Android Layout Weight not working with relative layout

Question

I am trying to implement layout weight for the first time, a bit I tried with linear layout it works good, but when I tried with relative and linear layout something went wrong. What is wrong here?

My XML File

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/Linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="100" >

<RelativeLayout
    android:id="@+id/Rlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="45" >

    <Gallery
        android:id="@+id/Gallery01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:spacing="4dip" >
    </Gallery>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/Rlayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="10"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY" />

    <ImageView
        android:id="@+id/ImageView02"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY" />
</RelativeLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/navbar"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="45"
    android:background="@drawable/button1"
    android:orientation="horizontal"
    android:weightSum="100" >

    <Button
        android:id="@+id/makerback"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="20"
        android:background="@drawable/makerback" />

    <Button
        android:id="@+id/makerphoto"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="20"
        android:background="@drawable/makerphoto" />

    <Button
        android:id="@+id/makerselves"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="20"
        android:background="@drawable/makerselves" />

    <Button
        android:id="@+id/makerskins"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="20"
        android:background="@drawable/makerskins" />

    <Button
        android:id="@+id/makersave"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="20"
        android:background="@drawable/makersave" />
</LinearLayout>

</LinearLayout>

I need to achieve the above image:

Solution 1

You cannot use percentages to define the dimensions of a View inside a RelativeLayout. The best ways to do it is to use LinearLayout and weights, or a custom Layout. -Romain Guy

Percentage width in a RelativeLayout

From Docs : http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#weight

UPDATE

We can now use PercentRelativeLayout . Example from docs:

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="25%"
        app:layout_marginLeftPercent="25%" />

</android.support.percent.PercentFrameLayout>

Solution 2

Try this: (Please notice the change within star symbol)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Linearlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="100" >

    <RelativeLayout
        android:id="@+id/Rlayout"
        android:layout_width="fill_parent"
        *android:layout_height="0dp"*
        android:layout_weight="45" >

        <Gallery
            android:id="@+id/Gallery01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:spacing="4dip" >
        </Gallery>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/Rlayout1"
        android:layout_width="fill_parent"
        *android:layout_height="0"*
        android:layout_weight="10"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="fitXY" />

        <ImageView
            android:id="@+id/ImageView02"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="fitXY" />
    </RelativeLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/navbar"
        android:layout_width="fill_parent"
        *android:layout_height="0"*
        android:layout_weight="45"
        android:background="@drawable/button1"
        android:orientation="horizontal"
        android:weightSum="100" >

        <Button
            android:id="@+id/makerback"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_weight="20"
            android:background="@drawable/makerback" />

        <Button
            android:id="@+id/makerphoto"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_weight="20"
            android:background="@drawable/makerphoto" />

        <Button
            android:id="@+id/makerselves"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_weight="20"
            android:background="@drawable/makerselves" />

        <Button
            android:id="@+id/makerskins"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_weight="20"
            android:background="@drawable/makerskins" />

        <Button
            android:id="@+id/makersave"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_weight="20"
            android:background="@drawable/makersave" />
    </LinearLayout>

</LinearLayout>

Solution 3

You don't use weight like that. Try

<RelativeLayout
    android:layout_height="0dip"
    android:layout_weight=1
    ... />

for example.