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 scrollable if there are more then a certain amount of items.

However it comes out looking like this.

I am inflating the following xml

single_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:background="#FFFFFF"
    android:layout_height="fill_parent">

    <HorizontalScrollView  xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

        <com.example.jj.library.ChipView
            android:layout_weight="1"
            android:id="@+id/text_chip_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        </LinearLayout>

    </HorizontalScrollView>

</LinearLayout>

This is my adapter to add the views to the view

Adapter.java

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

import com.example.jj.library.Chip;
import com.example.jj.library.ChipView;
import com.example.jj.library.ChipViewAdapter;
import com.example.jj.library.OnChipClickListener;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by jj on 12/21/2015.
 */
public class LiveFeedAdapter extends ArrayAdapter<LiveFeedDataProvider> implements OnChipClickListener {


    private static final String TAG = "LIVEFEED ADAPTER";
    Context CTX;
    private ChipView mTextChipLayout;
    public List<LiveFeedDataProvider> liveFeed_list = new ArrayList<LiveFeedDataProvider>();

    public LiveFeedAdapter(Context context, int resource) {
        super(context, resource);
        CTX = context;
    }

    @Override
    public void add(LiveFeedDataProvider object){
        liveFeed_list.add(object);
        super.add(object);
    }

    @Override
    public int getCount() {
        return liveFeed_list.size();
    }


    @Override
    public LiveFeedDataProvider getItem(int position) {

        return liveFeed_list.get(position);
    }

    @Override
    public View getView(final int position, View convertView, final ViewGroup parent) {
        if(convertView == null){
            LayoutInflater inflator = (LayoutInflater) CTX.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflator.inflate(R.layout.single_livefeed_row,parent,false);
        }
        ChipViewAdapter adapterLayout = new MainChipViewAdapter(getContext());
        mTextChipLayout = (ChipView) convertView.findViewById(R.id.text_chip_layout);
        mTextChipLayout.setAdapter(adapterLayout);
        mTextChipLayout.setChipLayoutRes(R.layout.chip_close);
        mTextChipLayout.setChipBackgroundColor(CTX.getResources().getColor(R.color.light_blue));
        mTextChipLayout.setChipBackgroundColorSelected(CTX.getResources().getColor(R.color.green));
        mTextChipLayout.setOnChipClickListener(this);
        LiveFeedDataProvider provider = liveFeed_list.get(position);
        Log.d(TAG, "LENGTH = " + provider.interests.length);
        for(int i = 0; i < provider.interests.length; i++) {
            String interest = provider.interests[i];
            mTextChipLayout.add(new Tag(interest));
        }
            return convertView;
    }

    @Override
    public void onChipClick(Chip chip) {

    }

}

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.