Android Recyclerview item side by side

Question

I have recycler-view with items in it and can be scrolled vertically. Currently what i achieved is items are added one after another like a list. By i need to place them side by side.

Like the image below

And my output is

My recycler-view setup code:

topicAdapter = new TopicAdapter(topicList, getActivity());
        topicListView.setLayoutManager(new LinearLayoutManager(getActivity()));
        topicListView.setAdapter(topicAdapter);

and adapter code is:

public class TopicAdapter extends RecyclerView.Adapter<TopicAdapter.CategoryViewHolder> {
    private List<Topic> topicList;
    Context context;

    public TopicAdapter(List<Topic> topicList, Context context) {
        this.topicList = topicList;
        this.context = context;
    }

    @Override
    public CategoryViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //inflate the layout file
        View groceryProductView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_suggested_topics, parent, false);
        CategoryViewHolder holder = new CategoryViewHolder(groceryProductView);
        return holder;
    }

    @Override
    public void onBindViewHolder(CategoryViewHolder holder, final int position) {
        holder.txtview.setText(topicList.get(position).getName());
    }

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

    public class CategoryViewHolder extends RecyclerView.ViewHolder {
        TextView txtview;

        public CategoryViewHolder(View view) {
            super(view);
            txtview = view.findViewById(R.id.titleView);
        }
    }
}

https://stackoverflow.com/questions/37733221/android-horizontal-recyclerview-scroll-direction — IntelliJ Amiya, Jun 05 '18 at 10:27
`setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, true));` — IntelliJ Amiya, Jun 05 '18 at 10:27
They've added Chip in support library 28. [1](https://material.io/develop/android/components/chip/) [2](https://medium.com/google-developer-experts/exploring-the-v28-android-design-support-library-2c96c6031ae8) — denvercoder9, Jun 05 '18 at 10:31
add your adapter layout code it means adapter in define layout xml code — , Jun 05 '18 at 11:03
[4 ways - Create Horizontal RecylerView](https://androidride.com/horizontal-recyclerview-android-example/) — Athira Reddy, Dec 21 '19 at 05:15

score 1 · Answer 1 · edited Jun 12 '18 at 00:19

1

I can suggest you with a simple solution but, you cant achieve complete requirement with this code. You'll get side by side.

Replace

topicListView.setLayoutManager(new LinearLayoutManager(getActivity()));

with

topicListView.setLayoutManager(new GridLayoutManager(getActivity(), 3)); 

// 3 denotes the number of rows per column

edited Jun 12 '18 at 00:19

tuomastik

4,559
5
36
48

answered Jun 05 '18 at 10:52

Chethan Kumar

185
1
12

score 0 · Answer 2 · answered Jun 05 '18 at 10:28

0

Add This

  topicListView.setLayoutManager(new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL,false));

answered Jun 05 '18 at 10:28

mehul chauhan

1,792
11
26

This does not solve his problem, this will make them horizontal but in single file. He wants it to be on multiple lines – Anthony Cannon Jun 05 '18 at 10:33

Anthony Cannon · Answer 3 · 2018-06-05T11:15:14.950

0

I think a good way to do this is by using Material Choice Chips, you can learn how to use them here. You can then use a ChipGroup to group them and allow them to flow across multiple lines.

However, to solve your question at hand, you can use a GridLayoutManager and then supply a SpanSizeLookup.

edited Jun 05 '18 at 11:15

answered Jun 05 '18 at 10:31

Anthony Cannon

1,245
9
20

score 0 · Accepted Answer · answered Jun 05 '18 at 10:41

0

You can do this using Google's latest design component ChipGroup
Else you can use Flexbox-Layout by showing your tags in Grid Layout.

If you wish to go for Flexbox-Layout, check answer of avik

answered Jun 05 '18 at 10:41

Varad Mondkar

1,441
1
18
29

i have achieved this by using flexbox. but any idea how can i center the elements? This is my current output : https://imgur.com/5oGHiMW – Ahsan Aasim Jun 05 '18 at 10:45
Yes just `JustifyContent.CENTER` like `flexboxLayoutManager.setJustifyContent(JustifyContent.CENTER);` – Varad Mondkar Jun 05 '18 at 10:53
But you may also have to set `layout_gravity` attribute to your RecyclerView `android:layout_gravity="center"` – Varad Mondkar Jun 05 '18 at 10:55

score 0 · Answer 5 · answered Jun 05 '18 at 11:08

0

Use StaggeredGridLayoutManager for recyclerview

answered Jun 05 '18 at 11:08

Parth Suthar

123
4

Android Recyclerview item side by side

5 Answers5