Android Alphabet ListView like contacts
Here is the code for list with alpha bite selection please go through
Here is the code for list with alpha bite selection please go through
1. Main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <ListView android:id="@+id/myListView"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- />
- <android.test.SideBar
- android:id = "@+id/sideBar"
- android:layout_height="fill_parent"
- android:layout_width="22px"
- android:layout_alignParentRight="true"
- />
- </RelativeLayout>
2. listview_row.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content">
- <LinearLayout
- android:id="@+id/section"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- />
- <TextView android:id="@+id/textView"
- android:layout_width="wrap_content"
- android:layout_height="80sp"
- android:textSize="45sp"
- />
- </LinearLayout>
3. MyAdapter.java
- package android.test;
- import java.util.ArrayList;
- import android.app.Activity;
- import android.content.Context;
- import android.graphics.Color;
- import android.view.Gravity;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.LinearLayout;
- import android.widget.SectionIndexer;
- import android.widget.TextView;
- public class MyAdapter extends BaseAdapter implements SectionIndexer {
- private ArrayList<String> stringArray;
- private Context context;
- public MyAdapter(Context _context, ArrayList<String> arr) {
- stringArray = arr;
- context = _context;
- }
- public int getCount() {
- return stringArray.size();
- }
- public Object getItem(int arg0) {
- return stringArray.get(arg0);
- }
- public long getItemId(int arg0) {
- return 0;
- }
- public View getView(int position, View v, ViewGroup parent) {
- LayoutInflater inflate = ((Activity) context).getLayoutInflater();
- View view = (View) inflate.inflate(R.layout.listview_row, null);
- LinearLayout header = (LinearLayout) view.findViewById(R.id.section);
- String label = stringArray.get(position);
- char firstChar = label.toUpperCase().charAt(0);
- if (position == 0) {
- setSection(header, label);
- } else {
- String preLabel = stringArray.get(position - 1);
- char preFirstChar = preLabel.toUpperCase().charAt(0);
- if (firstChar != preFirstChar) {
- setSection(header, label);
- } else {
- header.setVisibility(View.GONE);
- }
- }
- TextView textView = (TextView) view.findViewById(R.id.textView);
- textView.setText(label);
- return view;
- }
- private void setSection(LinearLayout header, String label) {
- TextView text = new TextView(context);
- header.setBackgroundColor(0xffaabbcc);
- text.setTextColor(Color.WHITE);
- text.setText(label.substring(0, 1).toUpperCase());
- text.setTextSize(20);
- text.setPadding(5, 0, 0, 0);
- text.setGravity(Gravity.CENTER_VERTICAL);
- header.addView(text);
- }
- public int getPositionForSection(int section) {
- if (section == 35) {
- return 0;
- }
- for (int i = 0; i < stringArray.size(); i++) {
- String l = stringArray.get(i);
- char firstChar = l.toUpperCase().charAt(0);
- if (firstChar == section) {
- return i;
- }
- }
- return -1;
- }
- public int getSectionForPosition(int arg0) {
- return 0;
- }
- public Object[] getSections() {
- return null;
- }
- }
4. SideBar.java
- package android.test;
- import android.content.Context;
- import android.graphics.Canvas;
- import android.graphics.Paint;
- import android.util.AttributeSet;
- import android.view.MotionEvent;
- import android.view.View;
- import android.widget.ListView;
- import android.widget.SectionIndexer;
- public class SideBar extends View {
- private char[] l;
- private SectionIndexer sectionIndexter = null;
- private ListView list;
- private final int m_nItemHeight = 29;
- public SideBar(Context context) {
- super(context);
- init();
- }
- public SideBar(Context context, AttributeSet attrs) {
- super(context, attrs);
- init();
- }
- private void init() {
- l = new char[] { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
- 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' };
- setBackgroundColor(0x44FFFFFF);
- }
- public SideBar(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- init();
- }
- public void setListView(ListView _list) {
- list = _list;
- sectionIndexter = (SectionIndexer) _list.getAdapter();
- }
- public boolean onTouchEvent(MotionEvent event) {
- super.onTouchEvent(event);
- int i = (int) event.getY();
- int idx = i / m_nItemHeight;
- if (idx >= l.length) {
- idx = l.length - 1;
- } else if (idx < 0) {
- idx = 0;
- }
- if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE) {
- if (sectionIndexter == null) {
- sectionIndexter = (SectionIndexer) list.getAdapter();
- }
- int position = sectionIndexter.getPositionForSection(l[idx]);
- if (position == -1) {
- return true;
- }
- list.setSelection(position);
- }
- return true;
- }
- protected void onDraw(Canvas canvas) {
- Paint paint = new Paint();
- paint.setColor(0xFFA6A9AA);
- paint.setTextSize(20);
- paint.setTextAlign(Paint.Align.CENTER);
- float widthCenter = getMeasuredWidth() / 2;
- for (int i = 0; i < l.length; i++) {
- canvas.drawText(String.valueOf(l[i]), widthCenter, m_nItemHeight + (i * m_nItemHeight), paint);
- }
- super.onDraw(canvas);
- }
- }
5. Main.java
- package android.test;
- import java.util.ArrayList;
- import android.app.Activity;
- import android.os.Bundle;
- import android.widget.ListView;
- public class Main extends Activity {
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- ListView list = (ListView) findViewById(R.id.myListView);
- ArrayList<String> stringList = InitListViewData();
- MyAdapter adapter = new MyAdapter(this, stringList);
- list.setAdapter(adapter);
- SideBar indexBar = (SideBar) findViewById(R.id.sideBar);
- indexBar.setListView(list);
- }
- private ArrayList<String> InitListViewData() {
- ArrayList<String> stringList = new ArrayList<String>();
- stringList.add("aback");
- stringList.add("abash");
- stringList.add("abbey");
- stringList.add("abhor");
- stringList.add("abide");
- stringList.add("abuse");
- stringList.add("candidate");
- stringList.add("capture");
- stringList.add("careful");
- stringList.add("catch");
- stringList.add("cause");
- stringList.add("celebrate");
- stringList.add("forever");
- stringList.add("fable");
- stringList.add("fidelity");
- stringList.add("fox");
- stringList.add("funny");
- stringList.add("fail");
- stringList.add("jail");
- stringList.add("jade");
- stringList.add("jailor");
- stringList.add("january");
- stringList.add("jasmine");
- stringList.add("jazz");
- stringList.add("zero");
- stringList.add("zoo");
- stringList.add("zeus");
- stringList.add("zebra");
- stringList.add("zest");
- stringList.add("zing");
- return stringList;
- }
- }
29 comments:
Thanks ... best article on net ...
Thanks for your comments
nice tutorial.... worked for me..
Thank you very much guys for visiting
the blog .... keep in touch
Actually Iam facing a problem with this code... the entire alphabet list is not visble on differnt mobile screens.. i tried lot of methods bt i didn't get it.. So, please help me... Thanks in advance...
private void setSection(LinearLayout header, String label) {
TextView text = new TextView(context);
header.setBackgroundColor(0xffaabbcc);
text.setTextColor(Color.WHITE);
text.setText(label.substring(0, 1).toUpperCase());
text.setTextSize(20);
text.setPadding(5, 0, 0, 0);
text.setGravity(Gravity.CENTER_VERTICAL);
header.removeAllViews(); // <-- remove previous added
header.addView(text);
header.setVisibility(View.VISIBLE); // <-- show it
}
Hi nice tutorial. its worked for me very well :) :) :)
but i have one problem with side bar
android.test.bar class not found exception what it means
plz help me i need side bar also
Thanks in advance...
Kindly check the android.test.bar is here I used in main.xml replace the android.test with your package name and test
Thanks a lot for this tutorial !
@tej deep:
You can set the sidebar height in SideBar.java line 15.
Now you need to know the correct value for each screen resolution.
Nice Tutorial.
I have one Question.
I am using your code in my app.
And I want to insert new listItem dynamically into your provided list and item should be placed into respective section.How can I do this.
Will u like to give me a way
Excellent article!
Pefect example..thank u soo much
Thanks for this post, it's help me
Excellent article, ca m'a aidé enormement encore merci
Hi ! I am using your code in my app but i get this error :
06-21 11:13:29.805: E/AndroidRuntime(18451): java.lang.ClassCastException: android.widget.SimpleCursorAdapter cannot be cast to android.widget.SectionIndexer
06-21 11:13:29.805: E/AndroidRuntime(18451): at com.indusa.erpdemo.adpater.SideBar.onTouchEvent(SideBar.java:49)
Can you guide me to resolve this ?
Thanks :)
This code give me error Like:
07-16 12:31:41.907: E/AndroidRuntime(25868): FATAL EXCEPTION: main
07-16 12:31:41.907: E/AndroidRuntime(25868): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.sidebar/com.example.sidebar.SideBarActivity}: android.view.InflateException: Binary XML file line #11: Error inflating class android.test.SideBar
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1955)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1980)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.ActivityThread.access$600(ActivityThread.java:122)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1146)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.os.Handler.dispatchMessage(Handler.java:99)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.os.Looper.loop(Looper.java:137)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.ActivityThread.main(ActivityThread.java:4340)
07-16 12:31:41.907: E/AndroidRuntime(25868): at java.lang.reflect.Method.invokeNative(Native Method)
07-16 12:31:41.907: E/AndroidRuntime(25868): at java.lang.reflect.Method.invoke(Method.java:511)
07-16 12:31:41.907: E/AndroidRuntime(25868): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
07-16 12:31:41.907: E/AndroidRuntime(25868): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
07-16 12:31:41.907: E/AndroidRuntime(25868): at dalvik.system.NativeStart.main(Native Method)
07-16 12:31:41.907: E/AndroidRuntime(25868): Caused by: android.view.InflateException: Binary XML file line #11: Error inflating class android.test.SideBar
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:691)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.view.LayoutInflater.rInflate(LayoutInflater.java:739)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
07-16 12:31:41.907: E/AndroidRuntime(25868): at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:251)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.Activity.setContentView(Activity.java:1835)
07-16 12:31:41.907: E/AndroidRuntime(25868): at com.example.sidebar.SideBarActivity.onCreate(SideBarActivity.java:14)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.Activity.performCreate(Activity.java:4465)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1049)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1919)
07-16 12:31:41.907: E/AndroidRuntime(25868): ... 11 more
07-16 12:31:41.907: E/AndroidRuntime(25868): Caused by: java.lang.ClassNotFoundException: android.test.SideBar
07-16 12:31:41.907: E/AndroidRuntime(25868): at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:61)
07-16 12:31:41.907: E/AndroidRuntime(25868): at java.lang.ClassLoader.loadClass(ClassLoader.java:501)
07-16 12:31:41.907: E/AndroidRuntime(25868): at java.lang.ClassLoader.loadClass(ClassLoader.java:461)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.view.LayoutInflater.createView(LayoutInflater.java:552)
07-16 12:31:41.907: E/AndroidRuntime(25868): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:680)
07-16 12:31:41.907: E/AndroidRuntime(25868): ... 21 more
Sidebar class not found exception plz help
Nice code but when i run my application it was force to close.
Thanks for sharing code. its working fine.
How can i add scroll view above side bar view in layout as all characters are not displayed .
tnx for post, how can i display the current char while scrolling like it is displayed while scrolling the contacts
How make that with this GridView?
Section headers seem to disappear when scrolling up and down in long lists - how do you overcome that?
How to get GetSections for this?
Hello,
Thanks for this great article.
I have used this. Only one issue which i found is that this is not showing full contacts. Only one contact with group. Also group name is under contact name.
Please suggest.
Hello,
I have found my mistake. I have taken textview inside section layout.
Now my code is running well.
Very very thanks fro this code.
I have used this code in a app where i have to use all phone contacts. Have you any idea that how can i get all numbers if a contact have more than one numbers.
nice tutorial, but can anyone tell me how to use this for cursor adapter.
thank you so much
Awesome tutorial. thanks a lot. Can you please tell me how to make side bar to fit to any mobile screen. Thanks in advance.
you are awesome man. thanks for making my task easy.
Post a Comment