ListView with horizontal scrollview

Question

I am trying to create a list consisting of horizontal scrolling, like each of the lines. I want the elements to be vertically aligned so that the view becomes scrollable if there are more than a certain number of elements.

However, it looks like this.

I inflate 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 for adding views to a 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 a little differently: I replaced HorizontalScrollView and ListView with RecyclerView each row as RecyclerView , which I think is the preferred layout here.

Here is the result:

(ignore the 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 viewing MainActivity recycler. It manages a list of strings 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 that represents a specific 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); } } 

This layout consists 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 the ChipsAdapter is an adapter that is used by every single line:

 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 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 its location:

 <?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 uploaded the project to my Dropbox, so be sure to check it out!

Hope this helps.