Anh Phạm
Anh Phạm

Reputation: 125

How to create horizontal RecyclerView that auto new line when screen space is full?

I'm trying to use RecyclerView to display programmatically tags in my app. It would like this(sorry, i can't upload image to stackoverflow now)

http://anh.im/image/OUA

So, how can i create RecyclerView that show my contents left to right and auto new line at the right edge of RecyclerView look like the image and prevent it scroll horizontally? Thanks for any help!

Upvotes: 4

Views: 2556

Answers (3)

Fah
Fah

Reputation: 316

xml solution:

Add implementation 'com.google.android.flexbox:flexbox:3.0.0' to your app build.gradle.
Then add the layoutManager to your RecyclerView:

<androidx.recyclerview.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:adapter="@{viewModel.adapter}" // Only if you set the adapter with data binding
    app:layoutManager="com.google.android.flexbox.FlexboxLayoutManager" />

Upvotes: 1

Trang Đỗ
Trang Đỗ

Reputation: 180

Update 10/2022:

Use implementation 'com.google.android.flexbox:flexbox:3.0.0'. It's work for me!

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(getApplicationContext());
layoutManager.setFlexDirection(FlexDirection.ROW);
layoutManager.setJustifyContent(JustifyContent.FLEX_START);
recyclerView.setLayoutManager(layoutManager);

Upvotes: 1

Bhojaviya Sagar
Bhojaviya Sagar

Reputation: 571

Use implementation 'com.google.android:flexbox:1.0.0'

Just add in your recyclerview

 val decoration = DividerItemDecoration(context, RecyclerView.HORIZONTAL)
    decoration.setDrawable(ContextCompat.getDrawable(context, R.drawable.divider_10dp)!!)
    recyclerViewSelectionList.addItemDecoration(decoration)
    val layoutManager = FlexboxLayoutManager(this)
    layoutManager.flexDirection = FlexDirection.ROW
    layoutManager.justifyContent = JustifyContent.FLEX_START
    recyclerViewSelectionList.layoutManager = layoutManager

Upvotes: 5

Related Questions