Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create Grid View with in View pager

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.83k
    Comment on it

    In the below example I have created a GridView with in Viewpager. Here in activity_main.xml layout , I have added ToolBar, ImageView , TextView, TabLayout, Viewpager. In second step I have created three fragments xml layouts. In fragment_three.xml I have added a GridView.

    In third step I have created image_inflater.xml layout here I have added a ImageView. Now see the code in MainActivity, in this I have used setupViewPager method, In this method I have add three fragments classes OneFragment, TwoFragment and Three Fragment class. In ThreeFragment class I have added GriedView. After this in next step I have created a GridViewAdapter and ViewHolder class for using GridView.

    You can see below example code it clearly describes How to create Grid View with in View pager .
     

    Step(1)activity_main.xml layout-

    <?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">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            />
        <RelativeLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_below="@+id/toolbar"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/ivimg"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/collepsei"/>
    
    
            <TextView
                android:paddingTop="120dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Doon IT Fair"
                android:paddingLeft="5dp"
                android:textSize="24dp"
                android:id="@+id/tvDoon"
                android:textColor="#fff"/>
    
        </RelativeLayout>
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:background="#ECECEC"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
    
            android:layout_below="@+id/collapsing_toolbar"/>
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/tabs">
    
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_above="@+id/imageView"/>
    
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@android:color/holo_green_dark"
                android:layout_alignParentBottom="true"
                android:id="@+id/imageView" />
        </RelativeLayout>
    </RelativeLayout>
    
    


    Step(2)Created a new fragment_one.xml layout-

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="info.androidhive.materialtabs.fragments.OneFragment">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One"
        android:textSize="40dp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>
    
    </RelativeLayout>
    
    </RelativeLayout>


    Step(3)Created a new fragment_two.xml layout-

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="info.androidhive.materialtabs.fragments.OneFragment">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Two"
        android:textSize="40dp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>
    
    </RelativeLayout>

     

    Step(4)Created a new fragment_three.xml layout-

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <GridView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/gridViewFragmentThree"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:horizontalSpacing="1dip"
            android:numColumns="3"
            android:stretchMode="columnWidth"
            android:verticalSpacing="1dip" />
    </LinearLayout>


    Step(5)Created a new image_inflter.xml layout-

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
        <ImageView
            android:id="@+id/ivImageInflator"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"/>
    </LinearLayout>
    
    

     

    Step(6) MainActivity-

    public class MainActivity extends AppCompatActivity {
        public static MainActivity instance;
    
        private Toolbar toolbar;
        private TabLayout tabLayout;
        private ViewPager viewPager;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(viewPager);
    
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            tabLayout.setupWithViewPager(viewPager);
        }
        public static MainActivity getInstance() {
            return instance;
        }
    
        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFrag(new OneFragment(), "ONE");
            adapter.addFrag(new TwoFragment(), "TWO");
            adapter.addFrag(new ThreeFragment(), "THREE");
    
            viewPager.setAdapter(adapter);
        }
    
    
        class ViewPagerAdapter extends FragmentPagerAdapter {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
    
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
    
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
    
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
    
            public void addFrag(OneFragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
    
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }
    }


    Step(7)- Created OneFragment class-

    public class OneFragment extends Fragment {
        public OneFragment() {
            // Required empty public constructor
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            return inflater.inflate(R.layout.fragmnet_one, container, false);
        }
    
    }


    Step(8) Created TwoFragment class-

    public class TwoFragment extends OneFragment {
        public TwoFragment() {
            // Required empty public constructor
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            return inflater.inflate(R.layout.fragmnet_two, container, false);
        }
    
    }

     

    Step(9)Created a ThreeFragment class-

    public class ThreeFragment extends OneFragment {
        private GridView gridView;
        ArrayList<Drawable>all_images ;
        private TypedArray allImages;
    
    
        public ThreeFragment() {
            // Required empty public constructor
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_three,null);
            all_images = new ArrayList<>();
            getAllWidgets(rootView);
            // Inflate the layout for this fragment
            return rootView;
        }
    
        private void getAllWidgets(View rootView) {
            gridView =(GridView)rootView.findViewById(R.id.gridViewFragmentThree);
            allImages =getResources().obtainTypedArray(R.array.all_images);
            setAdapter();
        }
        private void setAdapter(){
            for (int i=0;i<allImages.length();i++){
                all_images.add(allImages.getDrawable(i));
            }
    
            GridViewAdapter gridViewAdapter = new GridViewAdapter(getActivity(), all_images);
            gridView.setAdapter(gridViewAdapter);
        }
    }


    Step(10)Created GridViewAdapter.java class -

    public class GridViewAdapter extends BaseAdapter {
    
            public ArrayList<Drawable> allItemsResourceID;
            private LayoutInflater inflater;
            Context context;
            public GridViewAdapter(Context context, ArrayList<Drawable> images) {
    
                this.context = context;
               inflater = LayoutInflater.from(context);
                allItemsResourceID = images;
                Log.d("Adapter", "Create Image Adapter " + allItemsResourceID.size());
            }
            GridViewAdapter(Context context) {
                inflater = LayoutInflater.from(context);
            }
            @Override
            public int getCount() {
                return allItemsResourceID.size();
            }
            @Override
            public Object getItem(int position) {
                return allItemsResourceID.get(position);
            }
            @Override
            public long getItemId(int position) {
                return position;
            }
            @Override
            public View getView(final int position, View convertView, ViewGroup parent) {
                final ViewHolder holder;
                View view = convertView;
                if (view == null) {
                    view = inflater.inflate(R.layout.image_inflater, parent, false);
                    holder = new ViewHolder();
                    assert view != null;
                    holder.imageView = (ImageView) view.findViewById(R.id.ivImageInflator);
                    view.setTag(holder);
                } else {
                    holder = (ViewHolder) view.getTag();
                }
                if (!allItemsResourceID.get(position).equals("")) {
                    holder.imageView.setImageDrawable(allItemsResourceID.get(position));
                }
                return view;
            }
        }
    
    class ViewHolder {
        ImageView imageView;
    }
    
    
    

     

    Step(11)Add items in String.xml layout

     <string-array name="all_images">
    
            <item>@drawable/one</item>
            <item>@drawable/two</item>
            <item>@drawable/g4</item>
            <item>@drawable/one</item>
            <item>@drawable/two</item>
            <item>@drawable/g4</item>
            <item>@drawable/one</item>
            <item>@drawable/two</item>
            <item>@drawable/g4</item>
    
    
        </string-array>

 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: