Android resizing problem with LinearLayout and tiled background_问答_开发者

I have the following layout (it is complex but I have to put it all) ; I have 3 LinearLayouts, horizontal with a tiled png as background : 2 must be placed in the top of the screen and the last in the bottom of the screen. Between I have to put a widget gallery.

I want the 3 LinearLayouts to take the height of the png used for their backgrounds (it is ok for the 2 first but not for the last which is resized) and the gallery take the remaining size of the screen.

I cannot understand why that third LinearLayout is resized.

Thanks a lot in advance for your help. I put 2 pictures after the code to understand the situation.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:orientation="vertical">

<!-- THE FOLLOWING LAYOUT SHALL TAKE THE HEIGHT OF THE IMAGE USED FOR BACKGROUND
 => IT IS OK -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:orientation="horizontal"
        android:background="@drawable/bg_title" 
        android:gravity="center_horizontal">

        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/home_title"
            android:textColor="@color/white"
            android:gravity="center"
            android:textSize="20sp"/>
</LinearLayout>

<!-- THE FOLLOWING LAYOUT SHALL TAKE THE HEIGHT OF THE IMAGE USED FOR BACKGROUND
=> IT IS OK -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:background="@drawable/bg_channel_title">
    <FrameLayout 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:id="@+id/channels_frameLayout">

        <HorizontalScrollView 
            android:id="@+id/channel_scrollView" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content">

            <LinearLayout 
                android:id="@+id/channel_layout" 
                android:layout_width="match_parent" 
                android:layout_height="match_parent" 
                android:orientation="horizontal">

            </LinearLayout>
        </HorizontalScrollView>

    </FrameLayout>
</LinearLayout>

<!-- THE FOLLOWING LAYOUT SHALL TAKE THE REMAINING HEIGHT OF THE SCREEN -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical"
    android:id="@+id/description_frameLayout">
    <Gallery xmlns:android="http://schemas.android.com/apk/res/android" 
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center" 
    />
</LinearLayout>

<!-- THE FOLLOWING LAYOUT SHALL BE PLACED ON THE BOTTOM OF THE SCREEN 
AND TAKE THE HEIGHT OF THE IMAGE USED FOR BACKGROUND
=> IT IS NOK, THE LAYOUT IS RESIZED IN HEIGHT -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:background="@drawable/bg_description"
    android:id="@+id/description_layout"
    android:gravity="bottom">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content" 
        android:orientation="vertical"
        android:gravity="left"
        android:id="@+id/texts">

        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/orange"/>

        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"/>

    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:orientation="vertical"
        android:gravity="right"
        android:id="@+id/btns">

        <ImageButton
            android:id="@+id/info" 
            android:layout_width开发者_如何学编程="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/btn_info" />

        <ImageButton
            android:id="@+id/favorite" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null" 
            android:src="@drawable/btn_favorite" />

    </LinearLayout>
</LinearLayout>

Android resizing problem with LinearLayout and tiled background

Everywhere you put "android:layout_height="0dp"" and you have layout_weight="1" try with: "android:layout_height="wrap_content""

Moreover, you certainly miss the android:layout_weight="1" in the layout that contains the imagebuttons at the end of the file.

If your last layout is so big, it's because your @drawable/bg_description is certainly a little to big, that's why if you don't want to put android:layout_weight="1" in the imagebutton layout, simply reduce your drawable height.

Ok, I try reducing the height of the drawable ; it works. I cannot understand why. The first picture above is from Photoshop, I just created a workspace with the sizes of my handset and built my components in it, trying to respect some aspect ratios. Then I just picked up my components without modifying their sizes and used them as drawables in my application. I was expecting the aspect ratio will be respected as well in the screen of the device.

It is actually respected for the two first drawables (in the top part), but for the one in the bottom part I have to reduce it... If I do, it will work in the device, but in Photoshop it will not be relevant.

So what ? Is it impossible to mock our applications and use the graphical components as they were created ? For me it is weird.

I finally decide to move on and find an other way to solve my problem.

Everything is now done with xml configuration.

This is the layout containing the buttons in the bottom part of the screen :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:background="@drawable/bg_description"
    android:id="@+id/description_layout"
    >

And here is the bg_description.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#919191" />
    </shape>
</item>
<item android:top="1dp">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
            <gradient
                android:endColor="#525252"
                android:startColor="#1B1B1B"
                android:angle="90"/>
    </shape>
</item>

Everything is perfect now. The background is well displayed, the rendering is better than with the png and the there are not resizing problems anymore.

Tiled backgrounds are good but for simple use cases like this one, we have to consider better and simpliest solutions through the xml configuration.