How to make grid-view horizontally scrollable in android
I have written code for gridview in which i can show image and text but i want to show all image in single scrollable row like Pulse news apps. I have implemented horizontalscroll-view for gridview in xml but it does not work at all. I am using pageviwer for tabs and i am using fragments.
Here is my xml code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<HorizontalScrollView
android:id="@+id/horizontalScrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="horizontal" >
<GridView
android:layout_width="500dp"
android:layout_height="400dp"
android:id="@+id/gridview"
android:columnWidth="300dp"
android:numColumns="3"
android:horizontalSpacing="10dp"
android:scrollbars="horizontal">
</GridView>
</HorizontalScrollView>
</RelativeLayout>
Here is my image adpator code
public class ImageAdapter extends BaseAdapter {
private Context context;
private final String[] mobileValues;
private TextView t;
public ImageAdapter(Context context, String[] mobileValues) {
this.context = context;
this.mobileValues = mobileValues;
}
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View gridView;
if (convertView == null) {
gridView = new View(context);
// get layout from mobile.xml
gridView = inflater.inflate(R.layout.showlist_item, null);
// set value into textview
TextView textView = (TextView) gridView
.findViewById(R.id.grid_item_label);
textView.setText(mobileValues[position]);
// set image based on selected text
ImageView imageView = (ImageView) gridView
.findViewById(R.id.grid_item_image);
String mobile = mobileValues[position];
if (mobile.equals("Windows")) {
imageView.setImageResource(R.drawable.test_play_image);
} else if (mobile.equals("iOS")) {
imageView.setImageResource(R.drawable.test_play_image);
} else if (mobile.equals("Blackberry")) {
imageView.setImageResource(R.drawable.test_play_image);
} else {
imageView.setImageResource(R.drawable.test_play_image);
}
} else {
gridView = (View) convertView;
}
return gridView;
}
private void clickedButton(TextView tv){
int num = Integer.parseInt(tv.getText().toString());
++num;
tv.setText(Integer.toString(num));
}
private void clickedButtonm(TextView tv){
int num = Integer.parseInt(tv.getText().toString());
if(num>0){
--num;
tv.setText(Integer.toString(num));
}
}
public int getCount() {
return mobileValues.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
class MyOnClickListener implements OnClickListener{
public final TextView tv;
public MyOnClickListener(TextView tv){
this.tv=tv;
}
public void onClick(View v) {
// TODO Auto-generated method stub
clickedButton(tv);
}
}
class MyOnClickListenerm implements OnClickListener{
public final TextView tv;
public MyOnClickListenerm(TextView tv){
this.tv=tv;
}
public void onClick(View v) {
// TODO Auto-generated method stub
clickedButtonm(tv);
}
}
I want to display like this scrollable to right.
Solution 1:
There is a nice solution in Android from now on (as Zainodis has said in its comment ) : HorizontalGridView.
1. Gradle dependency
dependencies {
compile 'com.android.support:leanback-v17:23.1.0'
}
2. Add it in your layout
your_activity.xml
<!-- your stuff before... -->
<android.support.v17.leanback.widget.HorizontalGridView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:id="@+id/gridView"
/>
<!-- your stuff after... -->
3. Layout grid element
Create a layout for your grid element ( grid_element.xml ). I have created a simple one with only one button in it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
</LinearLayout>
4. Create an adapter
Highly inspired by this link : https://gist.github.com/gabrielemariotti/4c189fb1124df4556058
public class GridElementAdapter extends RecyclerView.Adapter<GridElementAdapter.SimpleViewHolder>{
private Context context;
private List<String> elements;
public GridElementAdapter(Context context){
this.context = context;
this.elements = new ArrayList<String>();
// Fill dummy list
for(int i = 0; i < 40 ; i++){
this.elements.add(i, "Position : " + i);
}
}
public static class SimpleViewHolder extends RecyclerView.ViewHolder {
public final Button button;
public SimpleViewHolder(View view) {
super(view);
button = (Button) view.findViewById(R.id.button);
}
}
@Override
public SimpleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
final View view = LayoutInflater.from(this.context).inflate(R.layout.grid_element, parent, false);
return new SimpleViewHolder(view);
}
@Override
public void onBindViewHolder(SimpleViewHolder holder, final int position) {
holder.button.setText(elements.get(position));
holder.button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(context, "Position =" + position, Toast.LENGTH_SHORT).show();
}
});
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public int getItemCount() {
return this.elements.size();
}
}
5. Initialize it in your activity :
private HorizontalGridView horizontalGridView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_activity);
horizontalGridView = (HorizontalGridView) findViewById(R.id.gridView);
GridElementAdapter adapter = new GridElementAdapter(this);
horizontalGridView.setAdapter(adapter);
}
Solution 2:
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@+id/seatLegendLayout">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/linearLayout_gridtableLayout"
android:layout_width="900dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<GridView
android:id="@+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="4dp"
android:columnWidth="100dp"
android:gravity="center"
android:numColumns="9"
android:horizontalSpacing="1dp"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbars="horizontal"
android:stretchMode="none"
android:verticalSpacing="1dp">
</GridView>
</LinearLayout>
</FrameLayout>
</HorizontalScrollView>