How to sort recyclerView right

Question

I created a recyclerView(see in this image)

But I'm not getting result that I want. I need get this:

You see I already grouped the profession, and all professions has it's own icon. So I'll now include my recyclerView code. How can I do like in image? If I've done something wrong, please tell me, not give downvote.

Here's the items class.

public class Rec_Items {

    private int image;
    private String fullName;
    private String profession;

    public Rec_Items(int image, String fullName, String profession) {
        this.image = image;
        this.fullName = fullName;
        this.profession = profession;
    }

    public int getImage() {
        return image;
    }

    public String getFullName() {
        return fullName;
    }

    public String getProfession() {
        return profession;
    }
}

Now here the adapter with it's ViewHolder.

public class SupportersAdapter extends RecyclerView.Adapter<SupportersAdapter.MyViewHolder> {

    Context context;
    List<Supporters_item> list = new ArrayList<>();

    public SupportersAdapter(Context context, List<Supporters_item> list) {
        this.context = context;
        this.list = list;
    }


    @Override
    public SupportersAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v;
        v = LayoutInflater.from(context).inflate(R.layout.supporters_view_item, parent, false);
        MyViewHolder holder = new MyViewHolder(v);
        return holder;
    }

    @Override
    public void onBindViewHolder(SupportersAdapter.MyViewHolder holder, int position) {
        holder.imageView.setImageResource(list.get(position).getImage());
        holder.fullName.setText(list.get(position).getFullName());
        holder.profession.setText(list.get(position).getProfession());

        if (list.get(position).getProfession().equals("Actress")) {
            holder.icon.setImageResource(R.drawable.medical);
        }
        if (list.get(position).getProfession().equals("Builder")) {
            holder.icon.setImageResource(R.drawable.builderkey);
        }
        if (list.get(position).getProfession().equals("Designer")) {
            holder.icon.setImageResource(R.drawable.shopping);
        }
        if (list.get(position).getProfession().equals("Programmer")) {
            holder.icon.setImageResource(R.drawable.education);
        }

        if (position > 0) {
            if (!list.get(position).getProfession().substring(0,1).equals(list.get(position-1).getProfession().substring(0, 1))) {
                holder.view.setVisibility(View.VISIBLE);
                holder.icon.setVisibility(View.VISIBLE);
            }
        }

    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {

        ImageView imageView, icon;
        TextView fullName, profession;
        View view;

        public MyViewHolder(View itemView) {
            super(itemView);

            imageView = (ImageView) itemView.findViewById(R.id.support_picture);
            fullName = (TextView) itemView.findViewById(R.id.fName);
            profession = (TextView) itemView.findViewById(R.id.profession);
            icon = (ImageView) itemView.findViewById(R.id.icon);
            view = itemView.findViewById(R.id.bottomLine);

        }
    }
}

I've done the group part in onBindViewHolder(), so watch there, I'm getting not the result that I want, I want to get the image result.

Here's the MainActivity class.

public class MainActivity extends AppCompatActivity {

    private List<Rec_Items> list;
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = (RecyclerView) findViewById(R.id.supporters_recycler);
        add();
        Adapter adapter = new Adapter(this, list);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);

    }

    public void add(){
        list = new ArrayList<>();
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Actress"));
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Programmer"));
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Builder"));
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Designer"));
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Actress"));
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Programmer"));
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Builder"));
        list.add(new Rec_Items(R.drawable.pfl_img, "Name Surname", "Designer"));
    }
}

How can I modify my code, what to change for getting grouped recyclerView?

Answer 1

You can sort the list alphabetically by profession before setting the adapter:

List<Rec_Items> sortedList = new ArrayList();
if (list.size() > 0) {
    Collections.sort(list, new Comparator<Rec_Items>() {
        @Override
        public int compare(final Rec_Items object1, final Rec_Items object2) {
            return object1.getProfession().compareTo(object2.getProfession());
        }
    });
}

//                                  SORTED LIST
Adapter adapter = new Adapter(this, sortedList);

To show the divisor (the line) on each section , you can add it on the xml design as gone android:visibility="gone" and show it if the previous item profession's initial letter is different from the current one:

//Inside onBindViewHolder method:
if(position > 0){
        // [----------------PREVIOUS ITEM-----------------]       [------------------CURRENT ITEM------------------]
    if(!list.get(position-1).getProfession().substring(0,1).equals(list.get(position).getProfession().substring(0,1))){
        //Example: holder.getDivisor().setVisibility(View.VISIBLE);
    }
}

For the icon part, you can use the same logic. Let it hidden in the xml design, and show it if the item is the first one in the list, or if the previous item profession's initial letter is different, that is, the current item is the first one of its section. You can check the profession's name to set the corresponding image.

Happy coding!