Apply Style to Android ListView

Question

I want to style the lisview in my application as seen is this image

Expected Output

I have tried to develop it by applying gradient :

code for list_item_normal is :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:centerColor="#E6E6E6"
        android:endColor="#CCCCCC"
        android:startColor="#FFFFFF" 
        android:angle="270"/>
    <!--
        <gradient
        android:startColor="#FF7500"
        android:centerColor="#FFCC00"
        android:endColor="#FF7500"
        android:angle="270"/>
    -->

    <stroke
        android:width="1dp"
        android:color="#A0000000" />

    <padding
        android:bottom="8dp"
        android:left="5dp"
        android:right="5dp"
        android:top="8dp" />

    <corners android:radius="5dp" />

</shape>

code for list_item_pressed.xml is :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">

    <gradient
        android:centerColor="#E6E6E6"
        android:endColor="#CCCCCC"
        android:startColor="#FFFFFF" android:angle="270"/>
    <!--
         <gradient android:startColor="#FF66CFE6" android:centerColor="#FF207FB9" 
        android:endColor="#FF0060B8" android:angle="270"/>
    -->

    <stroke
        android:width="2dp"
        android:color="#80000000" />

    <padding
        android:bottom="8dp"
        android:left="5dp"
        android:right="5dp"
        android:top="8dp" />

    <corners android:radius="7dp" />

</shape>

code for list_item_pressed.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">

    <gradient
        android:centerColor="#E6E6E6"
        android:endColor="#CCCCCC"
        android:startColor="#FFFFFF" android:angle="270"/>
    <!--
         <gradient android:startColor="#FF66CFE6" android:centerColor="#FF207FB9" 
        android:endColor="#FF0060B8" android:angle="270"/>
    -->

    <stroke
        android:width="2dp"
        android:color="#80000000" />

    <padding
        android:bottom="8dp"
        android:left="5dp"
        android:right="5dp"
        android:top="8dp" />

    <corners android:radius="7dp" />

</shape>

and list_gradient.xml

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

    <item android:state_pressed="true"
          android:drawable="@drawable/list_item_pressed" />

    <item android:state_focused="true"
          android:drawable="@drawable/list_item_selected" />

    <item android:drawable="@drawable/list_item_normal" />

</selector>

and i have applied this style on custom listitem like :

<TextView
    .../>

<ImageView
   ... />

and the main.xml in which i have lisview is :

<ListView
    android:id="@+id/List"
    style="@style/list_item_gradient"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:clickable="true" >
</ListView>

and i am getting output as shown below :

current output

Please help me by telling what i am doing wrong..

Thanks Shruti

I was trying to get my hands dirty with custom layouts of list row. I did what was necessary like pressed state, selected state, and normal state (like mentioned in your drawable files). I also changed the default layout style to list_item_gradient. I am running into choreographer warnings that I may be doing too much work on main thread. What could be a possible work around for this? — Ankit Garg, Jun 10 '13 at 11:12
I also read on some forums that it is because the style doesn't have any parent attribute. How to define one? — Ankit Garg, Jun 10 '13 at 11:43
I'm not sure whether to use AsyncTask here as I'm not doing any network related or any other heavy operation. Do you have any links which I can look into to solve this issue? Here is the blog post http://thesoftwarerogue.blogspot.in/2010/12/skipping-entry-in-package-table-0.html — Ankit Garg, Jun 10 '13 at 11:45

score 5 · Accepted Answer · edited May 23 '17 at 12:07

5

Do you know about Dithering? Check this: http://android.amberfog.com/?p=247.

Also check these questions:

And yes, i would suggest to create custom adapter for your LitsView, in which you just have to create one custom row xml layout file and apply the background image for one time.

edited May 23 '17 at 12:07

Community

1
1

answered Dec 19 '11 at 07:19

Paresh Mayani

127,700
71
241
295

please explain it a bit more..do i need to add listselector ?? – Shruti Dec 19 '11 at 07:26
i hav created a custom adapter only thing that is not wrking for me is i am unable to change the color of selected listitem – Shruti Dec 19 '11 at 07:35
@DroidShruti i think you are talking about that "yellow" image appears while touching a particular listitem, right? if this is the case then create selector.xml and apply it. – Paresh Mayani Dec 19 '11 at 07:39
yes i was talking about that only .. thanks fr replying .. created a selector and it is working fine – Shruti Dec 19 '11 at 07:58
@DroidShruti i am glad that my answer is helpful to you :) – Paresh Mayani Dec 19 '11 at 09:22
@DroidShruti I'm in love with you.. <3 – Shrey Jan 10 '12 at 08:30

score 1 · Answer 2 · answered Dec 19 '11 at 07:20

1

create a customAdapter extends baseAdapter . create list_item.xml and give it desired look set selector to its background . thats it .

answered Dec 19 '11 at 07:20

Shailendra Singh Rajawat

8,172
3
35
40

i have creted a custom adapter the only issue i am having is while selecting a list item its color doesnot change as shown in the first image – Shruti Dec 19 '11 at 07:34

Apply Style to Android ListView

2 Answers2

Linked