Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make a Gridview with Horizontal scrolling

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 5.40k
    Comment on it

    Here for the scrolling Grid View I have use SectionPagerAdapter . Simply what I have done here is that , i have created a Fragment with a layout containing a grid view. And with the help of SectonpagerAdapter the fragment will inflate as many as time can depending upon amount of data we have.

    Well my **MainActivity** is as something like this :-

    public class MainActivity  {
    
    private ViewPager viewPager;
    private SectionPagerAdapter mSectionPagerAdapter;
    private ArrayList<GridFragment>fragmentArray;
    
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        fragmentArray = new ArrayList<GridFragment>();
        getSetupView();
        mSectionPagerAdapter = new SectionPagerAdapter(getSupportFragmentManager());
    
    }
    
    private void getSetupView(){
        RelativeLayout container = (RelativeLayout) super.findViewById(R.id.custom_container);
        getLayoutInflater().inflate(R.layout.category, container);
    
    
        viewPager = (ViewPager)category.findViewById(R.id.pager);
    
    }
    
    private class SectionPagerAdapter extends FragmentPagerAdapter{
    
        public SectionPagerAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }
    
        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            GridFragment fragment = fragmentArray.get(arg0);
            Bundle args = new Bundle();
            args.putInt("pageNumber", arg0);
            fragment.setArguments(args);
            return fragment;
        }
    
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return fragmentArray.size();
        }
    
    }
    
    }

    The layout for the above class i.e. "custom_container" can be any default layout of android for eg:

     <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    

     

    Want to invest but do not know how, Check InvestingCube trading ideas: InvestingCube's S&R.

     

    Now the fragment class i have used here i.e. **GridFragment** :-

    public class GridFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        public static final String ARG_SECTION_NUMBER = "section_number";
        private ArrayListimageList,imageListDemo;
      
    
    public GridFragment() {
    }
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        imageLoader = new ImageLoader(getActivity(), getString(R.string.app&#95;name));
        View rootView = inflater.inflate(R.layout.grid_layout,
                container, false);
        GridView gridView = (GridView) rootView
        .findViewById(R.id.gridview);
    
        imageList = new ArrayList<Integer>();
        imageListDemo = new ArrayList<Integer>();
        imageList.add(R.drawable.image1);
        imageList.add(R.drawable.image2);
        imageList.add(R.drawable.image3);
        imageList.add(R.drawable.image4);
        imageList.add(R.drawable.image5);
        imageList.add(R.drawable.image6);
        imageList.add(R.drawable.image7);
        imageList.add(R.drawable.image8);
        imageList.add(R.drawable.image9);
        imageList.add(R.drawable.image10);
        imageList.add(R.drawable.image11);
        imageList.add(R.drawable.image12);
        imageList.add(R.drawable.image13);
        imageList.add(R.drawable.image14);
    
    
        dataSettler(getArguments().getInt("pageNumber"));
        gridView.setAdapter( new MyAdapter(getActivity()));
    
    
        return rootView;
    }
    
    /**
         * Here I'm trying to have only six images in a fragment
         */
    private void dataSettler(int position){
    
        for(int i=position*6;i<(position*6)+6;i++)
                {
                    imageListDemo.add(imageList.get(i));
    
                }
    
    }
    private class MyAdapter extends BaseAdapter {
        private LayoutInflater inflater;
    
    
        public MyAdapter(Context context) {
            inflater = LayoutInflater.from(context);
    
        }
    
        @Override
        public int getCount() {
            return imageListDemo.size();
        }
    
        @Override
        public Object getItem(int i) {
            return imageListDemo.get(i);
        }
    
        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return 0;
        }
    
        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
    
            View v = view;
            SquareImageView picture;
    
            if(v == null) {
                v = inflater.inflate(R.layout.grid_item, viewGroup, false);
                v.setTag(R.id.picture, v.findViewById(R.id.picture));
                v.setTag(R.id.text, v.findViewById(R.id.text));
            }
    
             picture = (SquareImageView)v.getTag(R.id.picture);
             picture.setImageResource(mImageIds[index]);
             picture.setScaleType(ImageView.ScaleType.FIT_XY);
            return v;
        }
    
    }
    }

    The two layouts used here "grid_layout" for the rootView of fragment and "grid_item" for adapter class is given below :-

    grid_item :-

     

    <com.pakage.SquareImageView
        android:id="@+id/picture"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="centerCrop" />
    

     

    grid_layout :-

     

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:horizontalSpacing="15dp"
        android:numColumns="2"
        android:stretchMode="columnWidth"
        android:verticalSpacing="15dp" >
    </GridView>
    

     

    here i have used a custom class inside the xml grid_item which has it's own certain properties, known as "SquareImageView" as per my requirement. You can also use an Image view at this place. But you can also look into it if you wan to :-

    public class SquareImageView extends ImageView {
        public SquareImageView(Context context) {
            super(context);
        }
    
    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
    }

    So by this we can surely achieve our target. Any queries regarding this be will highly oblige. :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: