Why does the first relative grows a lot occupying all the screen, instead of share the space with all elements?

Question

I want to do something like this:

First of all I don't want a scroll View.

The second point is: I need a fixed footer.

So, the best way to work is with weight. When I put a weight in all relatives, the first relative grows a lot occupying all the screen, instead of share the space with all elements.

Here is my code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:fitsSystemWindows="true"
        android:background="@drawable/bg_app"
        tools:context=".ui.home.HomeActivity">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/app_bar"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/green_tataki"
                android:padding="5dp"
                app:popupTheme="@style/AppTheme.PopupOverlay">
                <!--Here the action bar-->
            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/app_bar"
            android:orientation="vertical">
            <View
                android:layout_width="wrap_content"
                android:layout_height="4dp"
                android:layout_above="@+id/image_product"
                android:background="@drawable/bg_transparent_header"
                android:backgroundTintMode="multiply"/>
            <!--Relative with background as image-->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.5"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:id="@+id/image_product"
                android:background="@drawable/sushi">
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/image_product"
                android:id="@+id/box_description"
                android:background="@color/white"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp">
                <!--Text view inside relative-->
            </RelativeLayout>

            <!--Relative 1-->
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.5"
                android:layout_below="@+id/box_description"
                android:id="@+id/quantity_button"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="3dp"
                android:background="@drawable/border_left">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="RELATIVE 1"/>
            </RelativeLayout>

            <!--Relative 2-->
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.5"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="3dp"
                android:id="@+id/additional_button"
                android:layout_below="@+id/quantity_button"
                android:background="@drawable/border_left">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="RELATIVE 1"/>
            </RelativeLayout>
            <!--Relative 3-->
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.5"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="3dp"
                android:id="@+id/delete_button"
                android:layout_below="@+id/additional_button"
                android:background="@drawable/border_left">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="RELATIVE 3"/>
            </RelativeLayout>
            <!--Relative 4-->
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.5"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_below="@+id/delete_button"
                android:background="@drawable/border_left"
                android:id="@+id/clarification_button">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="RELATIVE 4"
                        />
            </RelativeLayout>
            <!--Button-->
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="0.5"
                    android:gravity="center"
                    android:layout_margin="10dp"
                    android:padding="5dp"
                    android:id="@+id/button_add_to_car"
                    android:textColor="@color/brown_tataki"
                    android:layout_below="@+id/clarification_button"
                    android:background="@color/green_tataki"
                    android:text="@string/add_to_car"
                    android:textSize="15sp"/>
        </LinearLayout>
    <!--Footer-->
        <View
            android:layout_width="wrap_content"
            android:layout_height="4dp"
            android:layout_above="@+id/footer"
            android:background="@drawable/bg_transparent_footer"
            android:backgroundTintMode="multiply"/>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/green_tataki"
            android:layout_alignParentBottom="true"
            android:gravity="bottom"
            android:id="@+id/footer"
            android:padding="5dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="RELATIVE 4"/>
        </RelativeLayout>
    </RelativeLayout>
<!--Menu-->
    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:divider="@color/white"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_gravity="right"
        android:choiceMode="singleChoice"
        android:dividerHeight="0.5dp"
        android:background="@color/brown_tataki"
        android:id="@+id/left_drawer"/>
</android.support.v4.widget.DrawerLayout>

your mistake is quit simple - you added weight only for Relatives. Moreover with the same value and it seems you think about weight like scaleXY. Read my answer below. Any qestion high appreciate — piotrek1543, Dec 28 '15 at 21:52

score 0 · Answer 1 · edited May 23 '17 at 11:44

As I see you set the same value to all RelativeLayout so they would take identical amount of space, but it not means that thay would be two times smaller

Weight doesn't means the same what scale ;-)

You should add weight parameter to ALL of your views if you want to see a ViewGroup as on image, but before ... please read carefully: What does android:layout_weight mean?

Here's my all-time favorite explanation for `layout_weight`

If there are multiple views spanning a LinearLayout, then layout_weight gives them each a proportional size. A view with a bigger layout_weight value "weighs" more, so it gets a bigger space.

Here is an image to make things more clear.

Theory

The term layout weight is related to the concept of weighted average in math. It is like in a college class where homework is worth 30%, attendance is worth 10%, the midterm is worth 20%, and the final is worth 40%. Your scores for those parts, when weighted together, give you your total grade.

It is the same for layout weight. The Views in a horizontal LinearLayout can each take up a certain percentage of the total width. (Or a percentage of the height for a vertical LinearLayout.)

The Layout

The LinearLayout that you use will look something like this:
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    

</LinearLayout>
Note that you must use layout_width="match_parent" for the LinearLayout. If you use wrap_content, then it won't work. Also note that layout_weight does not work for the views in RelativeLayouts (see here and here for SO answers dealing with this issue).

The Views

Each view in a horizontal LinearLayout looks something like this:
<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
Note that you need to use layout_width="0dp" together with layout_weight="1". Forgetting this causes many new users problems. (See this article for different results you can get by not setting the width to 0.) If your views are in a vertical LinearLayout then you would use layout_height="0dp", of course.

In the Button example above I set the weight to 1, but you can use any number. It is only the total that matters. You can see in the three rows of buttons in the first image that I posted, the numbers are all different, but since the proportions are the same, the weighted widths don't change in each row. Some people like to use decimal numbers that have a sum of 1 so that in a complex layout it is clear what the weight of each part is.

One final note. If you have lots of nested layouts that use layout_weight, it can be bad for performance.

Extra

Here is the xml layout for the top image:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android:layout_weight="
        android:textSize="24sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="2" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1" />

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android:layout_weight="
        android:textSize="24sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:text="10" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20"
            android:text="20" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:text="10" />

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android:layout_weight="
        android:textSize="24sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text=".25" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:text=".50" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text=".25" />

    </LinearLayout>

</LinearLayout>

If you have any question please free to ask.

Hope it help

I read everything you suggest, I understand, and I fixed a way that works, but it is growing the first element, instead of improving :( — Marlaurita, Dec 29 '15 at 15:13
update your code and I would test it in my Android Studio and devices. Don't waorry :-) — piotrek1543, Dec 29 '15 at 15:46

score 0 · Answer 2 · answered Dec 28 '15 at 22:32

0

Try adding android:weight_sum="10"in the parent view that contains the subviews then use the layout_weight to give them the ratio

answered Dec 28 '15 at 22:32

SaNtoRiaN

2,212
2
15
25

I put it, but it still show the first relative in all the screen :( – Marlaurita Dec 29 '15 at 15:38

Why does the first relative grows a lot occupying all the screen, instead of share the space with all elements?

2 Answers2

Here's my all-time favorite explanation for layout_weight

Theory

The Layout

The Views

Extra

Here's my all-time favorite explanation for `layout_weight`