Android 布局权重不适用于相对布局

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:

Answer 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>

Answer 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>

Answer 3

You don't use weight like that. Try

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

for example.

Answer 4

this may be use full

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"   >

    <RelativeLayout
        android:id="@+id/Rlayout"
        android:layout_width="fill_parent"
        android:layout_height="150dp"  >
        <Gallery
            android:id="@+id/Gallery01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:spacing="4dip"
            android:background="@drawable/ic_launcher">
        </Gallery>
    </RelativeLayout>

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


       <ImageView
          android:id="@+id/ImageView01"
          android:layout_width="fill_parent"
          android:layout_height="250dp"
          android:background="@drawable/ic_launcher"
          android:scaleType="fitXY" />

     </RelativeLayout> -->

    <ImageButton
        android:id="@+id/help"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="15dp"
        android:background="@drawable/ic_launcher" />


    <ImageButton
        android:id="@+id/numbers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="16dp"
        android:layout_toLeftOf="@+id/numbers"
        android:background="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/forword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="14dp"
        android:layout_toRightOf="@+id/numbers"
        android:background="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="14dp"
        android:background="@drawable/ic_launcher" />

</RelativeLayout>

Answer 5

You can implement it with traditional layout hierarchy but you should be aware of nested layout's negative impact on UI performance. Read Understanding the performance benefits of ConstraintLayout for reference.

To flatten your layout and use percentage values you can use ConstraintLayout's guidelines:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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
        android:id="@+id/ImageView01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/ImageView02"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Gallery
        android:id="@+id/Gallery01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:spacing="4dip"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/horGuideline1" />

    <Button
        android:id="@+id/makerback"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/horGuideline2" />

    <Button
        android:id="@+id/makerphoto"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline2"
        app:layout_constraintStart_toEndOf="@+id/verGuideline1"
        app:layout_constraintTop_toTopOf="@+id/horGuideline2" />

    <Button
        android:id="@+id/makerselves"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline3"
        app:layout_constraintStart_toEndOf="@+id/verGuideline2"
        app:layout_constraintTop_toTopOf="@+id/horGuideline2" />

    <Button
        android:id="@+id/makerskins"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline4"
        app:layout_constraintStart_toEndOf="@+id/verGuideline3"
        app:layout_constraintTop_toTopOf="@+id/horGuideline2" />

    <Button
        android:id="@+id/makersave"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/verGuideline4"
        app:layout_constraintTop_toTopOf="@+id/horGuideline2" />

    <android.support.constraint.Guideline
        android:id="@+id/horGuideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1" />

    <android.support.constraint.Guideline
        android:id="@+id/horGuideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6" />

    <android.support.constraint.Guideline
        android:id="@+id/verGuideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

</android.support.constraint.ConstraintLayout>