androidandroid-layoutandroid-relativelayouthierarchyviewer

A more efficient layout possible?


I have a working layout looking something like this:

Scheme of the layout

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.

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


Solution

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