How to make Android List View Design from Android L Preview Design

Question

I make Android L preview image style list item. This is my code for these similar design.

// Drawable/list_item_bg.xml

<?xml version="1.0" encoding="utf-8"?>

     <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
          <item>
                <shape
                 android:shape="rectangle">
                  <solid android:color="#E6E6E6" />
                </shape>
          </item>
          <item android:bottom="1dp">
              <shape
                    android:shape="rectangle">
                   <solid android:color="#FAFAFA" />
              </shape>
          </item>
      </layer-list>

//Drawable/list_icon_bg

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/list_grey_bg" />
</shape>

// Layout/list_item

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp">

    <ImageView
        android:id="@+id/list_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="16dp"
        android:src="@drawable/thumb"
        android:background="@drawable/list_icon_bg"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:background="@drawable/list_item_bg"
        android:layout_toRightOf="@+id/list_icon"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/primary_text"
            android:paddingRight="16dp"
            android:text="Sample Text" />

    </LinearLayout>

</RelativeLayout>

But i have problem for list item selected state. Background Color of list item selected state is work on icon area only. Selected state's list item background color is not working on LinearLayout area. How can i fix.

Sixtasixteen

i can not fully understand your question, but try to put "android:background="@drawable/list_icon_bg" line in your parent layout of the row. may this help you. – Nescience

If i added "android:background="@drawable/list_icon_bg" in parent view, divider line will occur full screen. – Sixtasixteen

You are consuming the click on Icon and not passing it to the main listview maybe ? – Wald

I want list item's background color effected on whole list item. Not only icon area (in figure 2). – Sixtasixteen

please try to set some hight of parent list and "android:background="@drawable/list_icon_bg" line in your parent layout of the row. then post screen shot – Nescience

Answer 1

activity_main:
============


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:background="@drawable/list_icon_bg">

    <ImageView
        android:id="@+id/list_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="16dp"
        android:src="@drawable/thumb"
        />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:background="@drawable/list_item_bg"
        android:layout_toRightOf="@+id/list_icon"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/primary_text"
            android:paddingRight="16dp"
            android:text="Sample Text" />

    </LinearLayout>

</RelativeLayout>

Avila