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)