A more efficient layout possible?

Question

I have a working layout looking something like this:

This is the according xml:

<FrameLayout
    android:id="@+id/red"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        ...

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/green"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:background="@drawable/blueyellow_border">

                <ImageButton
                    android:id="@+id/blue"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:background="@drawable/selector_blue_border"
                    android:padding="5dp"
                    android:src="@drawable/blue_icon"
                    tools:ignore="ContentDescription"/>

                <ImageButton
                    android:id="@+id/yellow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_toRightOf="@id/blue"
                    android:background="@drawable/selector_yellow_border"
                    android:padding="5dp"
                    android:src="@drawable/selector_yellow_icon"
                    tools:ignore="ContentDescription"/>
            </RelativeLayout>

            <TextView
                android:id="@+id/green"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:background="@drawable/green_border"
                android:text="@string/green_string"/>

        </RelativeLayout>
</FrameLayout>

The problem is that this layout is not efficient according to Hierarchy View. In the following I am referring to the traffic light color scheme of Hierarchy View.

For the "yellow" ImageButton I get "red" for layout and "yellow" for measuring.
For the "blue" ImageButton I get "yellow" for drawing.
For the "green" TextView I get "yellow" for layout.
For the inner RelativeLayout I get "red" for measuring and drawing.
And for the outer RelativeLayout I get "red" for measuring and "yellow" for layout and drawing.

Is there a way to do what I am doing (i.e. use selectors for backgrounds and image sources) and still be more efficient?

I think you have been using too many nested RelativeLayouts. You can remove the unwanted layouts. — Mayur More, Jun 14 '16 at 08:09
Nesting layouts is bad for performances. A **single** RelativeLayout is all you need. — Phantômaxx, Jun 14 '16 at 08:15
For the sake of clarity I did not include the code of my backgrounds and their selectors. Yet, what I want is a couple of `ImageButton` s with round corners and one background for both of them also with a round top-left corner. In this case, I believe, nesting is necessary. Right? — kalabalik, Jun 14 '16 at 08:28
It can be managed in one relativeLayout. By setting the red as background to the parent layout, and the image buttons as its children. You can also make use of weights and weight sum for designing layouts. — Mayur More, Jun 14 '16 at 09:08
I don*t understand. Are you saying that the `FrameLayout` should be the background for the `ImageButton` s? This would miss the "...", i.e. the fact that this layout is holding more than just the outer `RelativeLayout`. Also my understanding about weights and weight sum in layout is that they are not really compatible with efficiency. — kalabalik, Jun 14 '16 at 09:49

score 2 · Accepted Answer · answered Jun 14 '16 at 08:08

You can use only one RelativeLayout. Something like this (code not verified):

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/some_red_background">

    <TextView
        android:id="@+id/green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/green_border"
        android:text="@string/green_string"/>

    <ImageButton
        android:id="@+id/yellow"
        tools:ignore="ContentDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/green"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_margin="2dp"
        android:background="@drawable/selector_yellow_border"
        android:padding="5dp"
        android:src="@drawable/selector_yellow_icon"/>

    <ImageButton
        android:id="@+id/blue"
        tools:ignore="ContentDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/yellow"
        android:layout_above="@id/green"
        android:background="@drawable/selector_blue_border"
        android:padding="5dp"
        android:src="@drawable/blue_icon"/>


</RelativeLayout>

The inner `RelativeLayout` does have a background ("blueyellow_border"), though, with a round top-left corner (not visible in the color scheme). — kalabalik, Jun 14 '16 at 08:25
Then, you can put blue and yellow items in simple LinearLayout. But, if you know sizes of blue-yellow items, it's better to add View with necessary background to RelativeLayout (before blue and yellow, for z-order) — Petrov Dmitrii, Jun 14 '16 at 08:29
The blue and yellow items are vector drawables, therefore, I believe, their absolute size is not given. However, a `LinearLayout` would be possible. Would it be more efficient than a `RelativeLayout`? — kalabalik, Jun 14 '16 at 08:35
Okay, to answer that last question myself: It is [complicated] (http://stackoverflow.com/questions/4069037/android-is-a-relativelayout-more-expensive-than-a-linearlayout). I tested it and found that in my case the `LinearLayout` is more efficient than the `RelativeLayout` by a small margin (5/100 seconds). @PetrovDimitri Thanks for your help! — kalabalik, Jun 14 '16 at 09:11

A more efficient layout possible?

1 Answers1