How to make a Android contact alike listView?

Question

Hi, I have to make a listview like this image.

These letter A,B are auto scrolled by the listview. The Letter A is appear until there is no Item start with A in the list view.

I dont have any problem with the list view in the right. My difficulty is showing letter abc along with the listview.

Can anyone help me about this? Thanks.

Answer 1

I'm assuming that you already know how to make a list view to display data and/or images as the image above illustrates, and that your primary difficulty is to show the "A", "B", "C", etc.

If that is the case, then a good approach would be to specify a list of models (data), each containing a field of "name", "imageUrl" & an optional "firstLetter" which can be null.

When you sort these models by the "name" field, you go over the list once, and on each iteration you check if the 1st letter of the "name" field is different than the previous one (always true for the 1st element). If this is the case, the "firstLetter" field is set to the upper-case first letter of the "name" field. Otherwise, it will be null.

Then in your adapter, if the "firstLetter" field is not null, then make the TextView which displays this letter visible (otherwise, make it GONE), and assign the text to the value of "firstLetter".

EDIT:

The above was written before you asked for the "A", "B", etc to be "sticky" and remain until there are no more items beginning with that letter.

To implement the "sticky" behaviour, similar to the WhatsApp app which makes the dates of the texts sticky, you can create an additional view which floats over the list (you'll need to make sure that the paddings, styles and fonts match so that everything looks good).

Then, in your adapter, you'll need to check the following:

1. Am I already displaying this "hovering" letter for the letter that my cell wants to show? if that's the case, don't show it. This will prevent showing two "A"'s when the "A" is partially outside the screen.
2. Is the position of my cell which is showing the "A" or "B" slightly outside of the screen? If so, make sure to show the "hovering" letter and give it the correct text.

Answer 2

I think you have to use 2 listviews on a relativeLayout. First with the Capitals of the names and second, the list you want to show. For make your listview you must create your itemList.xml, with name and photo like you want for create your listview.xml. You will need a "people.java" class with atributes, for example, name and photo. Also, you need one adapter for create the relation between your list.xml and your mainclass.java. This page is in spanish but the code could be usable for you: http://www.oneoctopus.es/desarrollo-android/listviews-personalizadas-en-android/

Answer 3

When you are getting the data in adapter class then check for each object and its first word extract their first word in a char and compare that first word with other objects if they are same ignore and if different then save the previous char to temp char and assign the new one to previous char and so on.

Answer 4

For the sticky letters index, you can do the following:

1. On the leftmost side of your RecyclerView, create a TextView that will hold the letter index;
2. On the top of the Recycler view (in the layout that wrappes it) place a TextView in order to cover the one you created in step 1, this will be the sticky one;
3. Add a OnScrollListener in your RecyclerView. On method onScrolled (), set the TextView created in step 2 for the reference text taken from firstVisibleRow. Until here you shall have a stiky index, without the effects of transition;
4. To add the fade in/out transition effect, develop a logic that checks if the item previous of the currentFirstVisibleItem is the last of the previous letter list, or if the secondVisibleItem is the first one of the new letter. Based on these information make the sticky index visible/invisible and the row index the opposed, adding in this last the alpha effect.

I've answered about the sticky-index in this question and also provided a library that does this behaviour. Hope someone still needs it: https://stackoverflow.com/a/30679418/2068693