Wednesday 24 October 2012

Android ListView with Radio Buttons and Selected items

Hi Guys ,

Lets try to create a List View in Android which has a Radio button so we can choose from the options .

To create a list view we have to define it in xml file . But if we want to make the list view with radio buttons then we have set choice mode property .

for eg :


<ListView
        android:id="@+id/lstDemo"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:choiceMode="singleChoice">
     
    </ListView>

Then once our xml is ready we can create the List view object in Activity .

ListView listView;
ArrayList< String>arrayList; // list of the strings that should appear in ListView
ArrayAdapter arrayAdapter; // a middle man to bind ListView and array list 

In addition to list view we need objects of ArrayList and ArrayAdapter .

now we have to initialize all objects in Oncreate() method .

 listView = (ListView) findViewById(R.id.lstDemo);


// LIST OF STRINGS / DATA THAT SHOULD APPEAR IN LISTVIEW HERE WE HAVE HARD CODED IT WE CAN TAKE THIS INPUT FROM USER AS WELL



arrayList = new ArrayList();
        arrayList.add("India");
        arrayList.add("USA");
        arrayList.add("England");
        arrayList.add("Singapur");
        arrayList.add("China");
        arrayList.add("Canada");
        arrayList.add("Srilanka");
        arrayList.add("SouthAfrica");
        



 arrayAdapter = new ArrayAdapter(getApplicationContext(),android.R.layout.simple_list_item_single_choice,arrayList);
 listView.setAdapter(arrayAdapter);


Thats it if we run the application we will be able to see a list view with radio buttons. 
Now that we have list view with radio buttons lets try to highlight the selected items.

For doing this we should get the selected items in list view , for this we have to implement 
onitemClick listener in listview so here goes the code.

   listView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView arg0, View view, int position,
long arg3) {
}
});


      When we click on item on list view we can get it catch item selected in itemClickedListener.
So view is the item clicked in list view and position is the position of that item in list view which is clicked.
      Now that we know which item is click we can easily change the color of text but when we click on next item we we have to deselect the old selected item means recolor it back to default , and then hight the new selected item by coloring it .
      Lets C how to do it .


 listView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView arg0, View view, int position,
long itemId) {
/*  
*  when we click on item on list view we can get it catch item here.
* so view is the item clicked in list view and position is the position 
* of that item in list view which was clicked.
* Now that we know which item is click we can easily change the color
* of text but when we click on next item we we have to deselect the old 
* selected item means recolor it back to default , and then hight the 
* new selected item by coloring it .
* So here's the code of doing it.
* */
CheckedTextView textView = (CheckedTextView) view;
for (int i = 0; i < listView.getCount(); i++) {
textView= (CheckedTextView) listView.getChildAt(i);
if (textView != null) {
textView.setTextColor(Color.WHITE);
}
}
listView.invalidate();
textView = (CheckedTextView) view;
if (textView != null) {
textView.setTextColor(Color.BLUE);
}

}
});


You can take a look of code here 

XML code


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

    <ListView
        android:id="@+id/lstDemo"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:choiceMode="singleChoice">
     
    </ListView>

</LinearLayout>




Activity Code


package com.android.demo.listview;

import java.text.ChoiceFormat;
import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.CheckedTextView;
import android.widget.ListView;

public class BlogListVIewActivity extends Activity {
ListView listView;
ArrayList< String>arrayList; // list of the strings that should appear in ListView
ArrayAdapter arrayAdapter; // a middle man to bind ListView and array list 
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        listView = (ListView) findViewById(R.id.lstDemo);
        
        
        // LIST OF STRINGS / DATA THAT SHOULD APPEAR IN LISTVIEW HERE WE HAVE HARD CODED IT WE CAN TAKE THIS INPUT FROM USER AS WELL
        
        arrayList = new ArrayList();
        arrayList.add("India");
        arrayList.add("USA");
        arrayList.add("England");
        arrayList.add("Singapur");
        arrayList.add("China");
        arrayList.add("Canada");
        arrayList.add("Srilanka");
        arrayList.add("SouthAfrica");
        
       
        
        
        arrayAdapter = new ArrayAdapter(getApplicationContext(), android.R.layout.simple_list_item_single_choice,arrayList);
        listView.setAdapter(arrayAdapter);
        
        
        //  LETS HIGHLIGHT SELECTED ITEMS
        
        listView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView arg0, View view, int position,
long itemId) {
/*  
*  when we click on item on list view we can get it catch item here.
* so view is the item clicked in list view and position is the position 
* of that item in list view which was clicked.
* Now that we know which item is click we can easily change the color
* of text but when we click on next item we we have to deselect the old 
* selected item means recolor it back to default , and then hight the 
* new selected item by coloring it .
* So here's the code of doing it.
* */
CheckedTextView textView = (CheckedTextView) view;
for (int i = 0; i < listView.getCount(); i++) {
textView= (CheckedTextView) listView.getChildAt(i);
if (textView != null) {
textView.setTextColor(Color.WHITE);
}
}
listView.invalidate();
textView = (CheckedTextView) view;
if (textView != null) {
textView.setTextColor(Color.BLUE);
}

}
});
        
        
     
        
    }
}









Thanks for reading and hope it helped U..
Happy Coding...

13 comments:

  1. Nice blog sir it will help to newbies in android...

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Nice, i think you should add scenario section also, like where to use and when to use this. how this is different from normal list view, why you need a radio option with this list view?

    ReplyDelete
  4. Hi Sajeeva Yap from next post

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Rudi There is problem that when i am testing this demo below 4.0 then it did not change the color of selected item..Instead it change another item........Plz tell me why

    ReplyDelete
  7. Rudi ,
    There is problem that when i am testing this demo below 4.0 then it did not change the color of selected item..Instead it change another item........Plz tell me why

    ReplyDelete
  8. Hi Anil , Sorry for late response .. will get beck to you soon . I think it should work fine

    ReplyDelete
    Replies
    1. please check it.. I hope its not work fine, I checked it.....

      Delete