How to implement ListView with fastscroll and albhabet index

Question

Please help me do this for 2 days. I would like to implement a ListView with the fastscroll and albhabet index, as in the contacts app / below. I am using a SimpleAdapter to populate a ListView. As you can see from the image, selecting the letter of the alphabetical indexer on the right, selecting listView jumps to the corresponding ListItem. Please share some examples. Thanks in advance. EX: Below my code is just sorting the alphabet, and when I onclick on the E alphabet data associated with E, gng to diaplay..But it doesn’t show the E textbox in the middle when I touch the alphabet.

How to display text box E in the middle. When I touch the middle shortcut text box, you should show.

MainActivity.java

public class MainActivity extends Activity implements SearchView.OnQueryTextListener,SearchView.OnCloseListener { private ListView listView; private SearchView search; EfficientAdapter objectAdapter; EfficientAdapter2 objectAdapter1; int textlength=0; private CheckBox checkStat, checkRoutine, checkTat; private GestureDetector mGestureDetector; // x and y coordinates within our side index private static float sideIndexX; private static float sideIndexY; // height of side index private int sideIndexHeight; // number of items in the side index private int indexListSize; // list with items for side index private ArrayList<Object[]> indexList = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.homempleb); Log.i("scan"," txtScanResult "); Arrays.sort(CountriesList.name); ActionItem nextItem = new ActionItem(); final QuickAction quickAction = new QuickAction(this, QuickAction.VERTICAL); quickAction.addActionItem(nextItem); quickAction.setOnDismissListener(new QuickAction.OnDismissListener() { @Override public void onDismiss() { Toast.makeText(getApplicationContext(), "Dismissed", Toast.LENGTH_SHORT).show(); } }); listView = (ListView) findViewById(R.id.homelistView); listView.setTextFilterEnabled(true); objectAdapter = new EfficientAdapter(this); mGestureDetector = new GestureDetector(this, new SideIndexGestureListener()); listView.setAdapter(objectAdapter); } @Override public boolean onTouchEvent(MotionEvent event) { if (mGestureDetector.onTouchEvent(event)) { return true; } else { return false; } } private ArrayList<Object[]> createIndex(String[] strArr) { ArrayList<Object[]> tmpIndexList = new ArrayList<Object[]>(); Object[] tmpIndexItem = null; int tmpPos = 0; String tmpLetter = ""; String currentLetter = null; String strItem = null; for (int j = 0; j < strArr.length; j++) { strItem = strArr[j]; currentLetter = strItem.substring(0, 1); // every time new letters comes // save it to index list if (!currentLetter.equals(tmpLetter)) { tmpIndexItem = new Object[3]; tmpIndexItem[0] = tmpLetter; tmpIndexItem[1] = tmpPos - 1; tmpIndexItem[2] = j - 1; tmpLetter = currentLetter; tmpPos = j + 1; tmpIndexList.add(tmpIndexItem); } } // save also last letter tmpIndexItem = new Object[3]; tmpIndexItem[0] = tmpLetter; tmpIndexItem[1] = tmpPos - 1; tmpIndexItem[2] = strArr.length - 1; tmpIndexList.add(tmpIndexItem); // and remove first temporary empty entry if (tmpIndexList != null && tmpIndexList.size() > 0) { tmpIndexList.remove(0); } return tmpIndexList; } @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); final ListView listView = (ListView) findViewById(R.id.homelistView); LinearLayout sideIndex = (LinearLayout) findViewById(R.id.sideIndex); sideIndexHeight = sideIndex.getHeight(); sideIndex.removeAllViews(); // TextView for every visible item TextView tmpTV = null; // we'll create the index list indexList = createIndex(CountriesList.name); // number of items in the index List indexListSize = indexList.size(); // maximal number of item, which could be displayed int indexMaxSize = (int) Math.floor(sideIndex.getHeight() / 20); int tmpIndexListSize = indexListSize; // handling that case when indexListSize > indexMaxSize while (tmpIndexListSize > indexMaxSize) { tmpIndexListSize = tmpIndexListSize / 2; } // computing delta (only a part of items will be displayed to save a // place) double delta = indexListSize / tmpIndexListSize; String tmpLetter = null; Object[] tmpIndexItem = null; // show every m-th letter for (double i = 1; i <= indexListSize; i = i + delta) { tmpIndexItem = indexList.get((int) i - 1); tmpLetter = tmpIndexItem[0].toString(); tmpTV = new TextView(this); tmpTV.setText(tmpLetter); tmpTV.setGravity(Gravity.CENTER); tmpTV.setTextSize(20); LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1); tmpTV.setLayoutParams(params); sideIndex.addView(tmpTV); } // and set a touch listener for it sideIndex.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { // now you know coordinates of touch sideIndexX = event.getX(); sideIndexY = event.getY(); // and can display a proper item it country list displayListItem(); return false; } }); } class SideIndexGestureListener extends GestureDetector.SimpleOnGestureListener { @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // we know already coordinates of first touch // we know as well a scroll distance sideIndexX = sideIndexX - distanceX; sideIndexY = sideIndexY - distanceY; // when the user scrolls within our side index // we can show for every position in it a proper // item in the country list if (sideIndexX >= 0 && sideIndexY >= 0) { displayListItem(); } return super.onScroll(e1, e2, distanceX, distanceY); } } public void displayListItem() { // compute number of pixels for every side index item double pixelPerIndexItem = (double) sideIndexHeight / indexListSize; // compute the item index for given event position belongs to int itemPosition = (int) (sideIndexY / pixelPerIndexItem); // compute minimal position for the item in the list int minPosition = (int) (itemPosition * pixelPerIndexItem); // get the item (we can do it since we know item index) Object[] indexItem = indexList.get(itemPosition); // and compute the proper item in the country list int indexMin = Integer.parseInt(indexItem[1].toString()); int indexMax = Integer.parseInt(indexItem[2].toString()); int indexDelta = Math.max(1, indexMax - indexMin); double pixelPerSubitem = pixelPerIndexItem / indexDelta; int subitemPosition = (int) (indexMin + (sideIndexY - minPosition) / pixelPerSubitem); ListView listView = (ListView) findViewById(R.id.homelistView); listView.setSelection(subitemPosition); } 

EfficientAdapter.java

  public class EfficientAdapter extends BaseAdapter { private LayoutInflater mInflater; private Context context; public EfficientAdapter(Context context) { mInflater = LayoutInflater.from(context); this.context=context; } public int getCount() { return CountriesList.name.length; } public Object getItem(int position) { return position; } public long getItemId(int position) { return position; } public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = mInflater.inflate(R.layout.homemplebrowview, null); holder = new ViewHolder(); holder.text1 = (TextView) convertView .findViewById(R.id.name); holder.text2 = (TextView) convertView .findViewById(R.id.mrn); holder.text3 = (TextView) convertView .findViewById(R.id.date); holder.text4 = (TextView) convertView .findViewById(R.id.age); holder.text5 = (TextView) convertView .findViewById(R.id.gender); holder.text6 = (TextView) convertView .findViewById(R.id.wardno); holder.text7 = (TextView) convertView .findViewById(R.id.roomno); holder.text8 = (TextView) convertView .findViewById(R.id.bedno); holder.btnList = (Button)convertView.findViewById(R.id.listbutton); // holder.btnList.setOnClickListener(this); holder.btnList.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Intent next=new Intent(context, SeviceDetails.class); context.startActivity(next); } }); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.text1.setText(CountriesList.name[position]); holder.text2.setText(CountriesList.mrn[position]); holder.text3.setText(CountriesList.actualstart[position]); holder.text4.setText(CountriesList.age[position]); holder.text5.setText(CountriesList.gender[position]); holder.text6.setText(CountriesList.wardNo[position]); holder.text7.setText(CountriesList.roomNo[position]); holder.text8.setText(CountriesList.bedNo[position]); return convertView; } static class ViewHolder { public Button btnList; public TextView text8; public TextView text7; public TextView text6; public TextView text5; public TextView text4; public TextView text1; public TextView text2; public TextView text3; } @Override public void notifyDataSetChanged() { super.notifyDataSetChanged(); } } 

Answer 1

Here is a simple code to index the alphabet in a ListView that uses 2 java program files

1. MainActivity file, in which we process listview indexing

2. File CustomAdapter.java, which is a subclass of BaseAdapter for enumerating elements.

 MainActivity.java public class MainActivity extends Activity implements View.OnClickListener { private Map<String, Integer> mapIndex; private String[] fruits; private ListView fruitsList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); fruitsList.setAdapter(new CustomAdapter(this, Arrays.asList(fruits))); getIndexList(fruits); displayIndex(); } private void init() { fruitsList = (ListView)findViewById(R.id.list_fruits); fruits = getResources().getStringArray(R.array.fruits_array); Arrays.sort(fruits); } private void getIndexList(String[] fruits) { mapIndex = new LinkedHashMap<String, Integer>(); for(int i=0; i<fruits.length; i++) { String fruit = fruits[i]; String index = fruit.substring(0,1); if(mapIndex.get(index) == null) mapIndex.put(index, i); } } private void displayIndex() { LinearLayout indexLayout = (LinearLayout)findViewById(R.id.side_index); List<String> indexList = new ArrayList<String>(mapIndex.keySet()); TextView textView; for(String index : indexList) { textView = (TextView) getLayoutInflater().inflate(R.layout.alphabetindicator, null); textView.setText(index); textView.setOnClickListener(this); indexLayout.addView(textView); } } @Override public void onClick(View v) { TextView selectedTextView = (TextView) v; fruitsList.setSelection(mapIndex.get(selectedTextView.getText())); } } 

CustomAdaper.java

 public class CustomAdapter extends BaseAdapter { private Context context; private List<String> listItem; private LayoutInflater layoutInflater; CustomAdapter(Context context, List<String> listItem) { this.context = context; this.listItem = listItem; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder viewHolder; if (convertView == null) { viewHolder = new ViewHolder(); layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = layoutInflater.inflate(R.layout.indexindicator, parent, false); viewHolder.textView = (TextView) convertView.findViewById(R.id.listitem); convertView.setTag(viewHolder); } else { viewHolder = (ViewHolder) convertView.getTag(); } viewHolder.textView.setText(listItem.get(position)); return convertView; } static class ViewHolder { TextView textView; } @Override public int getCount() { return listItem.size(); } @Override public Object getItem(int position) { return listItem.get(position); } @Override public long getItemId(int position) { return 0; } } 

activity_main.xml

 <LinearLayout> <ListView android:id="@+id/list_fruits" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:scrollbars="none"> </ListView> <LinearLayout android:id="@+id/side_index" android:layout_width="wrap_content" android:layout_height="fill_parent" android:background="@color/white" android:gravity="center_horizontal" android:orientation="vertical" > </LinearLayout> </LinearLayout> 

alphabetIndicator.xml

 <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/side_list_item" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" android:padding="3dp" android:textSize="14sp" /> 

IndexIndicator.xml

 <LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical"> <TextView android:id="@+id/listitem" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="left" android:padding="3dp" android:textColor="#000000" android:textSize="14sp" /> </LinearLayout> 

Finally, include the string array in the strings.xml file (replace / enlarge the element according to your needs)

 <string-array name="fruits_array"> <item>Cantalope</item> <item>Date</item> <item>Grape</item> <item>Gooseberry</item> <item>Guava</item> <item>Honeydew melon</item> <item>Elderberry</item> <item>Fig</item> <item>Grapefruit</item> </string-array> 

Answer 2

Hello, see examples.

Example 1

Example 2

Example 3

Answer 3

This is actually really simple. Here is how I did it in my application. You can add your correct parameters, it is simple and easy to understand.

// charsContainer is a line layout that contains all of your characters that you touch. They automatically fit into the linear layout, so they are all visible due to the weight value that you associate with the TextView characters later

 final LinearLayout charsContainer = (LinearLayout) findViewById(R.id.charsContainer); // alphabetical_index is a framelayout which contains charsContainer and alphabetical_index_indicator, this is for the indicator to be visible over selected character. final FrameLayout alphabetical_index = (FrameLayout) findViewById(R.id.alphabetical_index); // alphabetical_index_indicator is an image displayed when your finger touches a character and move up and down final ImageView alphabetical_index_indicator = (ImageView) findViewById(R.id.alphabetical_index_indicator); for (int i = 0; i < chars.size() ; i++) { TextView charTextView = new TextView(this); charTextView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, 0, 1)); charTextView.setText(chars.get(i).toString()); charTextView.setTextColor(Color.GRAY); charTextView.setTextSize(11); charTextView.setPadding(convertValueToDP(4), 0, convertValueToDP(4), 0); charsContainer.addView(charTextView); } alphabetical_index.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { int alphabetical_index_top = (int) alphabetical_index.getTop(); int alphabetical_index_bottom = (int) alphabetical_index.getBottom(); boolean hasBackKey = KeyCharacterMap.deviceHasKey(KeyEvent.KEYCODE_BACK); boolean hasHomeKey = KeyCharacterMap.deviceHasKey(KeyEvent.KEYCODE_HOME); if(hasBackKey || hasHomeKey){ alphabetical_index_bottom = ((int) alphabetical_index.getY()) + alphabetical_index.getHeight(); }else{ alphabetical_index_bottom = ((int) alphabetical_index.getY()) + alphabetical_index.getHeight() - convertValueToDP(36); } switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // Do getListView().setVerticalScrollBarEnabled(false); break; case MotionEvent.ACTION_MOVE: int x = (int) event.getX(); int y = (int) event.getY(); if(alphabetical_index_indicator.getVisibility() == View.GONE){ alphabetical_index_indicator.setVisibility(View.VISIBLE); getListView().setVerticalScrollBarEnabled(false); Animation anim = AnimationUtils.loadAnimation(MyActivity.this, R.anim.fadein); alphabetical_index_indicator.startAnimation(anim); } if (y > alphabetical_index_top && (y - charsContainer.getChildAt(0).getHeight()) > alphabetical_index_top && y < alphabetical_index_bottom) { alphabetical_index_indicator.setY(y - charsContainer.getChildAt(0).getHeight()); } for (int i = 0; i < charsContainer.getChildCount(); i++) { View child = charsContainer.getChildAt(i); if (y > child.getTop() && y < child.getBottom()) { Character character = ((TextView) child).getText().toString().charAt(0); for (int j = 0; i < listViewStringArray.size(); j++) { if (listViewStringArray.get(j).toUpperCase(Locale.getDefault()).charAt(0) == character) { getListView().setSelection(j); break; } } } } // Do break; case MotionEvent.ACTION_CANCEL: // Do getListView().setVerticalScrollBarEnabled(true); break; case MotionEvent.ACTION_UP: Animation anim = AnimationUtils.loadAnimation(MyActivity.this,R.anim.fadeout); anim.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { alphabetical_index_indicator.setVisibility(View.GONE); getListView().setVerticalScrollBarEnabled(true); } @Override public void onAnimationRepeat(Animation animation) { } }); alphabetical_index_indicator.startAnimation(anim); break; } return true; } }); public static int convertValueToDP(float dp){ DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics(); float px = dp * (metrics.densityDpi / 160f); return (int)px; }