ListView with Horizontal ScrollView
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
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.