inflating a layout in recyclerview in horizontal and vertical, FlexboxLayout with recycler view add view horizontal automatically vertical

user_10386851 0
Viewed 1986

I have a layout that is inflated in an activity. Now all the info are displayed in vertical as shown in the following. this is how it looks now

but what I want it to be is three textView should come horizontal and then next three should come as a next row and so on. I have posted the way it should look at bottom.this is how I want it to look like

this is the layout that has recyclerview

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv_my_groups"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        app:reverseLayout="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:visibility="gone"
        android:onClick="onOutsideClick"
        android:orientation="vertical"
        app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager"
        app:layout_constraintTop_toBottomOf="@id/rv_selected_groups" />

and the bottom is a separate layout with just a textView that I am using to inflate.

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/tv_group_name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:layout_margin="8dp"
         android:background="@drawable/chip_drawable"
         android:fontFamily="sans-serif-condensed"
         android:gravity="center"
         android:textAllCaps="false"
         android:textColor="@android:color/black"
         android:textSize="14sp" />

and the kotlin activity where I have inflated the layout

 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GroupsViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(R.layout.groups_item_row, parent, false)

    return GroupsViewHolder(view)
}

sorry if my code is not sufficient.

Required output Is there any way that I could implement that enter image description here

kotlin android xml
2 Answers

here is a complete example

Step 1: add implementation 'com.google.android:flexbox:1.1.0' in build.gradle

Note that starting from 1.1.0, the library is expected to use with AndroidX. Please migrate to AndroidX if you use 1.1.0 or above.

Please use 1.0.0 if you haven't migrated to AndroidX.

Step 2: Activity.xml

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row_reverse"
    app:justifyContent="center"
    app:alignItems="center"
    app:flexWrap="wrap">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Android"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="iOS"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Windows"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Linux"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Unix"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="MaxOS"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Java"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="C++"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Python"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Kotlin"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Hadoop"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Solr"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Lucene"/>

</com.google.android.flexbox.FlexboxLayout>

Step 3 flexbox_item_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@android:color/holo_green_light" />

    <corners android:radius="5sp"/>

</shape>

Output:

enter image description here

Step 3 FlexboxLayout with recyclerview

RecyclerView recyclerView = (RecyclerView) 
context.findViewById(R.id.recyclerview);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
recyclerView.setLayoutManager(layoutManager);
user_20035260

I would recommend using Google's FlexBox for this. It will automatically space the items to fit the screen in any way you specify it.

user_26646340
Related