Using a RelativeLayout to split a layout evenly

Question

I have a Listview where each listview item looks like this! enter image description here

The ListViewItem is a RelativeLayout. Now I am having problem in creating the two split-screen buttons. Currently I'm doing it like this.

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

    <LinearLayout 
        android:layout_height="fill_parent" android:layout_width="fill_parent"
        android:layout_below="@+id/ReviewText">

    <RelativeLayout
        android:layout_weight="1"
        android:layout_height="fill_parent" android:layout_width="0dp"
        android:onClick="likeClicked"
        android:clickable="true" >
        <!-- SOME CODE -->
    </RelativeLayout>

    <RelativeLayout
        android:layout_weight="1"
        android:layout_height="fill_parent" android:layout_width="0dp"
        android:onClick="likeClicked"
        android:clickable="true" >
        <!-- SOME CODE -->
    </RelativeLayout>

    </LinearLayout>

<RelativeLayout>

This is working perfectly fine, but the android dev documentation here says that

Furthermore, nesting several instances of LinearLayout that use the layout_weight parameter can be especially expensive as each child needs to be measured twice. This is particularly important when the layout is inflated repeatedly, such as when used in a ListView or GridView.

Can I improve my code for performance. If yes, How? Is there any other way to have two buttons split evenly without using LinearLayout?

`LinearLayout's` weight is ideal but if you want to do it with RelativeLayout you need to programmatically set layout params of your layout in term of percentage. Check this for example code http://stackoverflow.com/a/16519595/1939564 — Muhammad Babar, Oct 30 '14 at 06:17

Phantômaxx · Answer 1 · 2014-10-30T08:37:53.570

In order to minimize layout nesting, so to optimize performances, I'd write a layout (which does take advantage of the layout's relativity) like this one:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <View
        android:id="@+id/dummy"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:layout_centerHorizontal="true"
        android:visibility="invisible"
    />
    <Button
        android:id="@+id/btnLeft"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@id/dummy"
        android:onClick="likeClicked"
        android:clickable="true"
    />
    <Button
        android:id="@+id/btnRite"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/dummy"
        android:onClick="likeClicked"
        android:clickable="true"
    />
<RelativeLayout>

I put a dummy View which is aligned to the center, then 2 buttons which I align to the left and to the right side of it.

This is a cool trick. Really helped me with a layout I was struggling with. Thanks for sharing! — NoChinDeluxe, Jun 16 '16 at 15:48

score 2 · Accepted Answer · answered Oct 30 '14 at 06:29

For a simple layout like your's LinearLayout's are perfect choice. The only thing to be wary about is nesting layout weight's inside a view whose parent already has a layout-weight assigned. This is perfectly ok:

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

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

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

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

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

</LinearLayout>

While this is not:

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" > <!-- nesting this way is bad for performance -->
            android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button" />
        </Button>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <!-- this is ok -->

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
    </LinearLayout>
</LinearLayout>

score 0 · Answer 3 · answered Oct 30 '14 at 06:19

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

<place top item layout here>   

<LinearLayout 
    android:layout_height="fill_parent" android:layout_width="fill_parent"
     android:orientation="horizontal" 
       android:weightSum="2">

<RelativeLayout
    android:layout_height="fill_parent" android:layout_width="0dp"
    android:onClick="likeClicked"
    android:clickable="true" 
     android:layout_weight="1"
    >
    <!-- SOME CODE -->
</RelativeLayout>

<RelativeLayout
    android:layout_weight="1"
    android:layout_height="fill_parent" android:layout_width="0dp"
    android:onClick="likeClicked"
    android:clickable="true" >
    <!-- SOME CODE -->
</RelativeLayout>

</LinearLayout>

 </LinearLayout>

score 0 · Answer 4 · edited Feb 08 '18 at 14:32

Hope , The performance can be improved if you follow the listed points

First thins don't use much XML code when you need something dynamically
instead of creating the 2 relative layouts in XML , create a class where it extends Linear layout/Relative layout
add the views which you want to show in the list item to the above layout
Measure the height and width dynamical with in the same class
And make sure the layout is parametrized where you can pass the content dynamically
Finally , you can inflate the created view , Using getview method of an adapter**

Refer the following link

Dynamic listview content loader

Using a RelativeLayout to split a layout evenly

4 Answers4