ListView with textViews wrapped horizontally filled dynamically

Question

A simple list view declared like below lists vertically the texts associated with its adapter.

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/itemsListView">
</ListView>

I need a view with variable number of items wrapped horizontally and its items are decided at runtime (illustrated in image below). How do I achieve that?

Answer 1

Use Google's brand new FlexboxLayout and its flexWrap:

https://github.com/google/flexbox-layout

Answer 2

Try

1. Add flex box dependency for recyclerview

compile 'com.google.android:flexbox:0.3.0-alpha3'

2. Please follow the steps for flexbox integration with recyclerview

https://github.com/google/flexbox-layout/blob/dev_recyclerview/RecyclerView.md

3. Set flex box attributes for recyclerview using:

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexDirection(FlexDirection.COLUMN);
layoutManager.setJustifyContent(JustifyContent.FLEX_END);

NOTE for Flexbox integration with RecyclerView

The code for the new FlexboxLayoutManager hasn't merged to the master branch yet, since it's not as stable as the existing FlexboxLayout. But you can still reference some sample code using the FlexboxLayoutManager inside the RecyclerView in the dev_recyclerview branch

For more details: https://github.com/google/flexbox-layout

Answer 3

You can use a RecycleView with StaggeredGridLayoutManager(int spanCount, int orientation).

mRecycleView = (RecyclerView) findViewById(R.id.rv_tags);
mRecycleView.setLayoutManager(new StaggeredGridLayoutManager(2,1));

Then setAdapter with your list items.

Answer 4

As far as I can see, your cells could be represented as A RelativeLayout with a centered LinearLayout horizontal inside. All the text objects (TextView or something more complex) are inserted in the LinearLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="horizontal" />

</RelativeLayout>

In your adapter, you have to bind the contents in this layout. If the LinearLayout contains more TextObjects than required, you have to remove the exceeding, otherwise you have to add as many TextObjects as required. The logic should be the following:

 int currentChildCount = holder.textContainer.getChildCount();    
    if(currentChildCount >item.getSubtasks().size()){
        for (int i = 0; i < (holder.textContainer.getChildCount() - < TOTAL_TEXTS >; i++) {
            holder.textContainer.removeView(holder.textContainer.getChildAt(holder.text.getChildCount() - 1));
        }
    } else {
        for (int i = 0; i < ( < TOTAL_TEXTS > -currentChildCount) ; i++){
            holder.textContainer.addView(LayoutInflater.from(context).inflate(R.layout.item_list_text_child, null, false));
        }
    }

Finally, you have to update the contents of the textObjects:

for (int i=0; i<holder.textContainer.getChildCount();i++){
        ArrayList<String> textContents =<YOUR_TEXTS>;
        composeChildTaskView(context,textContents.get(i),holder.textContainer.getChildAt(i));
}

I hope it helped.

Answer 5

use compile 'com.google.android:flexbox:0.3.0-alpha3'.

recyclerView.setLayoutManager(new FlexboxLayoutManager());

see https://github.com/google/flexbox-layout.