How to make grid-view horizontally scrollable in android

Question

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.

Answer 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); } 

Answer 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>