Wednesday, 6 March 2013

Android ListView with Alternate list item background and hover.

Now i will show how to make a ListView with Alternate color i.e for odd position having different background and for even position of  List item having different background as well as different hover color.

Screenshots:-
























These are the following steps to do show.

Step1.1) Use two selector for odd and even postion list item

artists_list_backgroundcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@color/grey" />
<item android:state_pressed="true"
    android:drawable="@color/itemselected" />
<item android:state_selected="true"
 android:state_pressed="false"
    android:drawable="@color/itemselected" />
</selector>


Step 1.2)
artists_list_background_alternate.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@color/sign_out_color" />
<item android:state_pressed="true"
    android:drawable="@color/login_hover" />
<item android:state_selected="true"
 android:state_pressed="false"
    android:drawable="@color/login_hover" />
</selector>

Step2)
colors.xml

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

    <color name="survey_toplist_item">#EFEDEC</color>
    <color name="survey_alternate_color">#EBE7E6</color>
    <color name="grey">#ffffff</color>
    <color name="itemselected">#EDEDED</color>
    <color name="login_hover">#E5F5FA</color>
    <color name="sign_out_color">#e84040</color>

</resources>

Step 3.1)
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp" />

</RelativeLayout>

Step3.2) res/layout/listitem,xml

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

    <TextView
        android:id="@+id/heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:padding="15dp" />

</LinearLayout>

Step4)
MainActivity.java

package com.amit.listalternate;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ListView;

public class MainActivity extends Activity {
    private List<String> data;
    ListAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        data = new ArrayList<String>();
        fillData();
        adapter = new ListAdapter(this, data);
        ListView lvMain = (ListView) findViewById(R.id.list);
        lvMain.setAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    void fillData() {
        for (int i = 1; i <= 20; i++) {
            data.add("Heading" + i);
        }
    }

}

Step 5) Adapter
ListAdapter.java



package com.amit.listalternate;

import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ListAdapter extends BaseAdapter{
    Context ctx;
    LayoutInflater lInflater;
    List<String> data;

    ListAdapter(Context context, List<String> data) {
        ctx = context;
        this.data = data;
        lInflater = (LayoutInflater) ctx
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int position) {
        return data.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = convertView;
        if (view == null) {
            view = lInflater.inflate(R.layout.listitem, parent, false);
        }

        if (position % 2 == 0) {
            view.setBackgroundResource(R.drawable.artists_list_backgroundcolor);
        } else {
            view.setBackgroundResource(R.drawable.artists_list_background_alternate);
        }

        ((TextView) view.findViewById(R.id.heading)).setText(data.get(position));
       
        return view;
    }
}

Download full source code click ListViewWithAlternateColor









42 comments:

  1. At Webnet, we have impact of a specialist and acclaimed custom android apps development association really. Today, we are satisfied to say that we have shockingly particular satisfied customers who trust us with their work understanding that all they will get from us is yet the best quality android applications.

    ReplyDelete
  2. Hello Nice article. Really helpful.
    My question is can apply 3 different colors instead of two colors in listview alternatively?

    ReplyDelete
  3. Nice source for us and thanks for sharing this code in this blog and i bookmark this blog for future use.

    Enterprise Android apps development

    ReplyDelete
  4. I never knew that the process of developing an android application was very easy until I landed on this page which has explained the step by step procedure of developing the android application. I am very excited to learn this process and I will be teaching it to clients who are majorly students accessing our Personal Statement Writing Help.

    ReplyDelete
  5. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well

    as giving..
    Mobile App Development Company
    Mobile App Development Company in India
    Mobile App Development Companies

    ReplyDelete
  6. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..
    Web Designing Company Bangalore | Website Design Company Bangalore

    ReplyDelete
  7. I read this article. I think You put a lot of effort to create this article. I appreciate your work.
    Dissertation Writing Services

    ReplyDelete
  8. Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.
    full stack developer training in chennai



    ReplyDelete
  9. Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information.
    digital marketing training in online

    ReplyDelete
  10. A universal message I suppose, not giving up is the formula for success I think. Some things take longer than others to accomplish, so people must understand that they should have their eyes on the goal, and that should keep them motivated to see it out til the end.
    AWS Training in chennai

    AWS Training in bangalore

    ReplyDelete
  11. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
    Blueprism training in annanagar

    Blueprism training in velachery

    Blueprism training in marathahalli

    ReplyDelete
  12. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.

    Data Science Training in Chennai
    Data science training in bangalore
    Data science online training
    Data science training in pune

    ReplyDelete
  13. A universal message I suppose, not giving up is the formula for success I think. Some things take longer than others to accomplish, so people must understand that they should have their eyes on the goal, and that should keep them motivated to see it out til the end.
    java training in annanagar | java training in chennai


    java training in marathahalli | java training in btm layout

    ReplyDelete
  14. Thanks a lot for sharing. Keep blogging

    Karina

    ReplyDelete
  15. I was recommended this web site by means of my cousin. I am now not certain whether this post is written through him as nobody else recognise such precise about my difficulty. You're amazing! Thank you!
    angularjs-Training in pune

    angularjs-Training in chennai

    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    ReplyDelete
  16. I am really enjoying reading your well-written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
    Hadoop course in Marathahalli Bangalore
    DevOps course in Marathahalli Bangalore
    Blockchain course in Marathahalli Bangalore
    Python course in Marathahalli Bangalore
    Power Bi course in Marathahalli Bangalore

    ReplyDelete
  17. Nice Blog, Thank you so much sharing with us. Visit for
    Bulletproof Hosting

    ReplyDelete
  18. Excellant post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
    python training in pune | python training institute in chennai | python training in Bangalore

    ReplyDelete

  19. When I initially commented, I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same comment. Is there any way you can remove people from that service? Thanks.

    Amazon Web Services Training in Pune | Best AWS Training in Pune


    AWS Training in Pune | Best Amazon Web Services Training in Pune

    ReplyDelete
  20. Thank for sharing very valuable information.nice article.keep on blogging.For more information visit
    aws online training
    aws training in hyderabad
    aws online training in hyderabad

    ReplyDelete
  21. Hey, Wow all the posts are very informative for the people who visit this site. Good work! We also have a Website. Please feel free to visit our site. Thank you for sharing.Well written article Thank You Sharing with Us project management courses in chennai | pmp training class in chennai | pmp training fee | project management training certification | project management training in chennai

    ReplyDelete
  22. Hello! This is my first visit to When I initially commented, I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several your blog!
    iosh course in chennai

    ReplyDelete
  23. It was Informative Post,and Knowledgable also.Good Ones

    Article submission sites
    Technology

    ReplyDelete
  24. Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.
    Thanks & Regards,
    VRIT Professionals,
    No.1 Leading Web Designing Training Institute In Chennai.

    And also those who are looking for
    Web Designing Training Institute in Chennai
    SEO Training Institute in Chennai
    Photoshop Training Institute in Chennai
    PHP & Mysql Training Institute in Chennai
    Android Training Institute in Chennai

    ReplyDelete
  25. The site was so nice, I found out about a lot of great things. I like the way you make your blog posts. Keep up the good work and may you gain success in the long run.

    Microsoft Azure online training
    Selenium online training
    Java online training
    Java Script online training
    Share Point online training

    ReplyDelete
  26. Thank you for an interesting blog well explained.Its very helpful for me.


    One Plus One Service Centre in Chennai


    ReplyDelete
  27. Hello, I read your blog occasionally, and I own a similar one, and I was just wondering if you get a lot of spam remarks? If so how do you stop it, any plugin or anything you can advise? I get so much lately it’s driving me insane, so any assistance is very much appreciated.
    AWS Training in Chennai | Best AWS Training in Chennai
    Best Data Science Training in Chennai
    Best Python Training in Chennai
    Best RPA Training in Chennai
    Digital Marketing Training in Chennai
    Matlab Training in Chennai
    Best AWS Course Training in Chennai

    ReplyDelete
  28. Fantastic blog! Thanks for sharing very interesting post, I appreciate to blogger for amazing post.
    mobile app development services in usa

    ReplyDelete