ListView with Horizontal ScrollView

Question

I am trying to make a listview which consists of a horizontal scrollview as each one of the rows. I want the elements to be lined up vertically so the view would become scro

Answer 1

I solved your problem in a bit different way: I replaced HorizontalScrollView and ListView by a RecyclerView with each row as a RecyclerView which, as I believe, is a preferred layout here.

Here's a result:

(don't pay to much attention to an ugly design :-) )

MainActivity layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#FFFFFF"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

MainActivity class:

public class MainActivity extends AppCompatActivity {

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

        RecyclerView chipRecyclerView = (RecyclerView)findViewById(R.id.recyclerView);
        chipRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        ArrayList<String[]> chipsArray = new ArrayList<>();
        chipsArray.add(new String[] {"Fitness", "Gaming", "Education","Animals", "Cars"});
        .....
        chipsArray.add(new String[] {"Education","Animals", "Cars"});

        chipRecyclerView.setAdapter(new ListChipsAdapter(chipsArray));
    }
}

ListChipsAdapter - adapter for the MainActivity's recycler view. It manages list of rows with chips.

public class ListChipsAdapter extends RecyclerView.Adapter {

    private ArrayList<String[]> chipsArray;

    public ListChipsAdapter(ArrayList<String[]> chipsArray) {
        this.chipsArray = chipsArray;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ChipsViewHolder(new RowChipsView(parent.getContext()));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((RowChipsView)holder.itemView).setAdapter(new ChipsAdapter(chipsArray.get(position)));
    }

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

    private class ChipsViewHolder extends RecyclerView.ViewHolder {

        public ChipsViewHolder(View itemView) {
            super(itemView);
        }
    }
}

RowChipsView - is a class which represents the particular single row:

public class RowChipsView extends FrameLayout {

    public RowChipsView(Context context) {
        super(context);
        initializeView(context);
    }

    private void initializeView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.single_row, this);
        ((RecyclerView)findViewById(R.id.recyclerViewHorizontal)).setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false));
    }

    public void setAdapter(ChipsAdapter adapter) {
        ((RecyclerView)findViewById(R.id.recyclerViewHorizontal)).setAdapter(adapter);
    }
}

It's Layout is consist of only one RecyclerView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recyclerViewHorizontal"
    android:layout_width="match_parent"
    android:layout_height="56dp"/>

Now, ChipsAdapter - the adapter which is used by each single row:

public class ChipsAdapter extends RecyclerView.Adapter {

    private String[] chipsArray;

    public ChipsAdapter(String[] chipsArray) {
        this.chipsArray = chipsArray;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ChipViewHolder(new ChipView(parent.getContext()));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((ChipView)holder.itemView).displayItem(chipsArray[position]);
    }

    @Override
    public int getItemCount() {
        return chipsArray.length;
    }

    private class ChipViewHolder extends RecyclerView.ViewHolder {

        public ChipViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Now, the last piece is a ChipView:

public class ChipView extends FrameLayout {

    public ChipView(Context context) {
        super(context);
        initializeView(context);
    }

    private void initializeView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.chip_view, this);
    }

    public void displayItem(String text) {
        ((TextView)findViewById(R.id.chipTextView)).setText(text);
    }
}

and it's layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/rounded_background"
    android:layout_margin="4dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/chipTextView"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        android:padding="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>

I've uploaded the project to my dropbox, so feel free to check it out!

I hope, it helps.