Android Layout Weight not working with relative layout

Question

enter image description here

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:

can you share the image what you want to achieve? – Vipul Jun 16 '12 at 07:24 — Vipul, Jun 16 '12 at 07:24

score 11 · Answer 1 · edited Nov 15 '17 at 20:32

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>

...except the OP is trying to define the dimensions of a `RelativeLayout` itself, not of a view inside a `RelativeLayout`. — Giulio Piancastelli, Aug 20 '14 at 13:51

score 3 · Answer 2 · edited Nov 16 '17 at 19:06

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>

score 1 · Answer 3 · answered Jun 16 '12 at 07:19

1

You don't use weight like that. Try

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

for example.

answered Jun 16 '12 at 07:19

c0dehunter

6,412
16
77
139

PrimoZ so no need to add weight sum? – Kalai Selvan.G Jun 16 '12 at 07:22
1

don't put the relative layout in side the linear layout, and then try it – user1208720 Jun 16 '12 at 07:52

score 0 · Answer 4 · edited Nov 16 '17 at 19:08

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>

score 0 · Answer 5 · answered Nov 16 '17 at 17:43

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>

Android Layout Weight not working with relative layout

5 Answers5