Display Namelist In Recyclerview under each letter in alphabetic Order Android

Question

I have list of contacts which has to be displayed in alphabetic under each alphabet as shown in the image shown

How can I do this in RecyclerView, please suggest a solution.thanks

Diane

Hey..can you please share the code that you have done, I need to do the same ? – Bennett

Answer 1

1. Sort list with data by name
2. Iterate via list with data, and in place when current's item first letter != first letter of next item, insert special kind of object.
3. Inside your Adapter place special view when item is "special".

Daune

can somebody share snippet of above method am new for dev – Seeker

can it be do with cursoradapter – Seeker

Is there a way we can add header to recyclerview without adding object to the list? Like 'addHeaderView'? – Schonfeld

Answer 2

This is what I did following @divers's post:

as he mentioned I pass a team list to the the adapter which is sorted and alphabets are added before the next name.

this is he code used to set adapter

void updateUI(ArrayList<TeamMember> teamMembers) {



        adapter = new TeamMemberActivityAdapter(this, addAlphabets(sortList(teamMembers)));
        recList.setAdapter(adapter);
        recList.setVisibility(View.VISIBLE);
        spinningProgressView.setVisibility(View.GONE);
    } 

code to sort the team list obtained from server is given below:

 ArrayList<TeamMember> sortList(ArrayList<TeamMember> list) {
        Collections.sort(list, new Comparator<TeamMember>() {
            @Override
            public int compare(TeamMember teamMember1, TeamMember teamMember2) {
                return teamMember1.getFullname().compareTo(teamMember2.getFullname());
            }
        });
        return list;
    }

while adding alphabets to the list I am setting a type value to know whether its alphabet or team name to check this inside the adapter for showing corresponding layout .the code for that is as shown below:

ArrayList<TeamMember> addAlphabets(ArrayList<TeamMember> list) {
        int i = 0;
        ArrayList<TeamMember> customList = new ArrayList<TeamMember>();  TeamMember firstMember = new TeamMember();
        firstMember.setFullname(String.valueOf(list.get(0).getFullname().charAt(0)));
        firstMember.setType(1);
        customList.add(firstMember);
        for (i = 0; i < list.size() - 1; i++) {
            TeamMember teamMember = new TeamMember();
            char name1 = list.get(i).getFullname().charAt(0);
            char name2 = list.get(i + 1).getFullname().charAt(0);
            if (name1 == name2) {
                list.get(i).setType(2);
                customList.add(list.get(i));
            } else {
                list.get(i).setType(2);
                customList.add(list.get(i));
                teamMember.setFullname(String.valueOf(name2));
                teamMember.setType(1);
                customList.add(teamMember);
            }
        }
        list.get(i).setType(2);
        customList.add(list.get(i));
        return customList;
    }

And finally inside your adapter check if the item is teamMember name or alphabet and display corresponding layout as shown below:

  @Override
    public int getItemViewType(int position) {
        int viewType = 0;
        if (mMembers.get(position).getType() == TYPE_LETTER) {
            viewType = TYPE_LETTER;
        } else if (mMembers.get(position).getType() == TYPE_MEMBER) {
            viewType = TYPE_MEMBER;
        }

        return viewType;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {

        LayoutInflater mInflater = LayoutInflater.from(viewGroup.getContext());

        switch (viewType) {
            case TYPE_LETTER:
                ViewGroup vGroupImage = (ViewGroup) mInflater.inflate(R.layout.board_team_letter_item, viewGroup, false);
                ViewHolderLetter image = new ViewHolderLetter(vGroupImage);
                return image;
            case TYPE_MEMBER:
                ViewGroup vGroupText = (ViewGroup) mInflater.inflate(R.layout.board_team_member_item, viewGroup, false);
                ViewHolderMember text = new ViewHolderMember(vGroupText);
                return text;
            default:
                ViewGroup vGroupText2 = (ViewGroup) mInflater.inflate(R.layout.board_team_member_item, viewGroup, false);
                ViewHolderMember text1 = new ViewHolderMember(vGroupText2);
                return text1;

        }
    }

hope this could help you. all the best

Diane

hey, how are you then handling this in the onBindViewHolder method, as you are returning different Viewholder. I tried but I'm just stuck at this point. – Mitigate

in onBindViewHolder you have to select which layout to display based on the type of the item in the list. that is what is done here. – Diane

Answer 3

compare your model and get first character from title ....

private void getHeaderListLatter(ArrayList<CountriesModel> usersList) {

        Collections.sort(usersList, new Comparator<CountriesModel>() {
            @Override
            public int compare(CountriesModel user1, CountriesModel user2) {
                return String.valueOf(user1.name.charAt(0)).toUpperCase().compareTo(String.valueOf(user2.name.charAt(0)).toUpperCase());
            }
        });

        String lastHeader = "";

        int size = usersList.size();

        for (int i = 0; i < size; i++) {

            CountriesModel user = usersList.get(i);
            String header = String.valueOf(user.name.charAt(0)).toUpperCase();

            if (!TextUtils.equals(lastHeader, header)) {
                lastHeader = header;
                mSectionList.add(new CountriesModel(header,true));
            }

            mSectionList.add(user);
        }
    }

and in your adapter getItemViewType Layout like this ....

@Override
    public int getItemViewType(int position) {
        if (mCountriesModelList.get(position).isSection) {
            return SECTION_VIEW;
        } else {
            return CONTENT_VIEW;
        }
    }

for complete reference . https://github.com/sayanmanna/LetterSectionedRecyclerView

Transfix

Answer 4

I'm currently using this. It's very easy to implement, compatible with RecyclerView adapter, and so lightweight you'd barely call it a library!

Cirri

Answer 5

You can achieve it with this library.

There is a full example here of how to add headers.

And if you want to implement the search functionality, there is also a full example here, this is the result:

Noisome

Answer 6

https://github.com/emilsjolander/StickyListHeaders I hope this is what You want.

Eckmann

ya this one is the apt one. but I already completed the project – Diane