How to used Horizontal Scroll in Gridview

Example – How to implement Horizontal Scroll in GridView?

In this blog we will explain how to implement Horizontal GridView with selector  in android. The selector keep GridView index position,  …explain step by step

Step 1: Implement selector xml class inside drawable folder.

selector_gridindex.xml

…………………………………………………………………………………………………………….....

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true"
        android:state_pressed="true" android:drawable="@drawable/background_selected" />
    <item android:state_enabled="false"
        android:state_focused="false" android:drawable="@drawable/background_selected" />
    <item android:state_enabled="true"
        android:state_selected="true" android:drawable="@drawable/background_selected" />

</selector>

…………………………………………………………………………………………………...................

Step 2: implement color gradient xml class and set in selector_gridindex.xml class.

Background_selected.xml

……………………………………………………………………………………………………………….

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >



    <gradient

        android:angle="90"

        android:centerColor="#50ff0000"

        android:endColor="#50ff0000"

        android:startColor="#50ff0000" />



</shape>

……………………………………………………………………………………………………………….

Step 3: Implement activity_main .xml class

activity_main.xml.

………………………………………………………………………………………………………………

<?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"

     >





    <HorizontalScrollView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:scrollbars="none"

        android:id="@+id/title_horizontalScrollView"

        android:layout_margin="1dp"

        android:fillViewport="false">



        <LinearLayout

            android:orientation="horizontal"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            >

            <GridView

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:id="@+id/listview"

                android:drawSelectorOnTop="true"

                android:gravity="center"

                android:listSelector="@drawable/selector_gridindex "

                android:scrollbars="horizontal"></GridView>



        </LinearLayout>

    </HorizontalScrollView>





</LinearLayout>

……………………………………………………………………………………………………………….

Step 4: implement gridview adapter class inside src folder.

GridViewImageAdapter.java

……………………………………………………………………………………………………………….

 

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.TextView;



import java.util.ArrayList;



   

public class GridViewImageAdapter extends BaseAdapter {

    private Context mContext;

    private final ArrayList<String> web;





    public GridViewImageAdapter(Context c, ArrayList<String> web ) {

        mContext = c;

        this.web = web;

    }



    @Override

    public int getCount() {

        // TODO Auto-generated method stub

        return web.size();

    }



    @Override

    public Object getItem(int position) {

        // TODO Auto-generated method stub

        return web.get(position);

    }



    @Override

    public long getItemId(int position) {

        // TODO Auto-generated method stub

        return position;

    }



    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        // TODO Auto-generated method stub

        //View grid;

        final ViewHolder holder;

        LayoutInflater inflater = (LayoutInflater) mContext

                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);



        if (convertView == null) {

            convertView = inflater.inflate(R.layout.card_background, null);



        }

        holder = new ViewHolder();

        holder.loungeName = (TextView) convertView.findViewById(R.id.text_items);

        holder.loungeName.setText(web.get(position));

        return convertView;

    }

    static class ViewHolder

    {



        TextView loungeName ;

    }

}

……………………………………………………………………………………………………………….

Step 5:implement MainActivity.java

……………………………………………………………………………………………………………….

 



import android.app.Activity;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Color;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.GridLayout;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.Toast;



import java.util.ArrayList;



public class MainActivity extends Activity {

    @Override

    protected void attachBaseContext(Context newBase) {

        super.attachBaseContext(newBase);

    }

    int width;

    GridView listview;

    ArrayList value=new ArrayList();

    @Override

    public void onCreate(Bundle savedInstanceState) {



        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        for (int i = 0; i < 20; i++) {

            value.add("SARVESH Kaushik" + i);

        }



        int noofcoloum=value.size();

        listview = (GridView)findViewById(R.id.listview);

        // (item layout width)*(Array Length)*(Add item main Layout Margin)

        int totalWidth =(100*noofcoloum)*2;

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(totalWidth, LinearLayout.LayoutParams.MATCH_PARENT);

        listview.setLayoutParams(params);

        listview.setNumColumns(noofcoloum);

        GridViewImageAdapter adapter = new GridViewImageAdapter(MainActivity.this, value);

        listview.setAdapter(adapter);

        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                Toast.makeText(getApplicationContext(),position+"",Toast.LENGTH_LONG).show();

            }

        });



    }

}

……………………………………………………………………………………………………………….