Android Layout optimization for ListView of ArrayAdapter: is FrameLayout really useless?

Question

I have created a color catalogue for my app and have decided to use an Array adapter to inflate this catalogue. My color layout is as follows:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="40dp"
        android:layout_marginEnd="40dp">

        <ImageView
            android:id="@+id/fav_swatch"
            android:layout_width="80dp"
            android:layout_height="match_parent"/>

        <TextView
            android:id="@+id/fav_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/fav_swatch"
            android:layout_toEndOf="@+id/fav_swatch"
            android:paddingLeft="30dp"
            android:paddingStart="30dp"
            android:paddingTop="10dp"
            android:textSize="20sp"
            />

        <TextView
            android:id="@+id/fav_coord"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/fav_swatch"
            android:layout_toEndOf="@+id/fav_swatch"
            android:layout_below="@+id/fav_name"
            android:paddingLeft="30dp"
            android:paddingStart="30dp"
            android:paddingTop="10dp"
            android:textSize="20sp"
            />

        <ImageButton
            android:id="@+id/btn_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/ic_clear"/>

        <ImageButton
            android:id="@+id/btn_modify"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn_delete"
            android:layout_toStartOf="@+id/btn_delete"
            android:background="@drawable/ic_edit"/>

    </RelativeLayout>

</FrameLayout>

My activity layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fav_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin" />

    <ListView
        android:id="@+id/fav_lv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    </ListView>

</FrameLayout>

So this code leads to the desired layout as this:

The problem is that Android warns me

This RelativeLayout or its parent FrameLayout is useless

It is not really useless because if I keep only the RelativeLayout as parent:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_marginLeft="20dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="20dp"
    android:layout_marginRight="40dp"
    android:layout_marginEnd="40dp"
    xmlns:android="http://schemas.android.com/apk/res/android">

        <ImageView
            android:id="@+id/fav_swatch"
            android:layout_width="80dp"
            android:layout_height="match_parent"/>

        <TextView
            android:id="@+id/fav_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/fav_swatch"
            android:layout_toEndOf="@+id/fav_swatch"
            android:paddingLeft="30dp"
            android:paddingStart="30dp"
            android:paddingTop="10dp"
            android:textSize="20sp"
            />

        <TextView
            android:id="@+id/fav_coord"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/fav_swatch"
            android:layout_toEndOf="@+id/fav_swatch"
            android:layout_below="@+id/fav_name"
            android:paddingLeft="30dp"
            android:paddingStart="30dp"
            android:paddingTop="10dp"
            android:textSize="20sp"
            />

        <ImageButton
            android:id="@+id/btn_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/ic_clear"/>

        <ImageButton
            android:id="@+id/btn_modify"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn_delete"
            android:layout_toStartOf="@+id/btn_delete"
            android:background="@drawable/ic_edit"/>

</RelativeLayout>

the margins are simply ignored and I get this sort of ugly layout:

My question is: is there any way to get the right layout without having to put a 'useless' FrameLayout to get a cleaner and more optimized code?

EDIT: the interesting java code:

// Construct the data source
        ArrayList<Colour> arrayOfColours = new ArrayList<>();

        final ColourAdapter adapter = new ColourAdapter(this, arrayOfColours);

        ListView lv = (ListView) findViewById(R.id.fav_lv);
        lv.setAdapter(adapter);

        final Colour[] colour = new Colour[ca.getMaxNumberOfFavColours()];
        for (int i = 0; i < numberOfColours; i++) {
            colour[i] = new Colour(colourPixel[i], colourName[i]);
            adapter.add(colour[i]);
        }

score 1 · Accepted Answer · edited May 23 '17 at 12:32

In your scenario FrameLayoutis containing one child element as RelativeLayout. Your all further elements are contained inside RelativeLayout. May be this is reason Android Studio is giving you a warning.

This RelativeLayout or its parent FrameLayout is useless.

I don't understand your point of having RelativeLayout inside FrameLayout. Instead i would also recommend to use either one of them.

Moreover, you can get the same result just by doing this in your second scenario...

removing margin from RelativeLayout.
instead of margin, add android:padding="20dp" in RelativLayout.

Let me know if you have any queries related to this.

I would recommend you to see the diff. in margin and padding and avoid giving margin to outer most container of your layout.

PS: Developers don't give much attention to warnings until they became errors. :p

The padding was the key. I guess I still need a better insight of layout attributes. Thanks! — Daniel Borrajo Gutiérrez, Apr 15 '17 at 15:40

Android Layout optimization for ListView of ArrayAdapter: is FrameLayout really useless?

1 Answers1