Android Create A Dynamic Fragment On ViewPager

Today i will show you how to add dynamic fragment in viewpager. Dynamic means the size of fragment can change everytime.

Example :

In a list there are 10 items, it means there will 10 fragments appears in viewpager. If there are 5 items, then 5 fragments will appears.

Result

So for create a dynamic fragment on viewpager, please read carefully the following steps :

File Drawable

Inside folder drawable, create a new xml file that will used as indicator. Look the following image :

Indicator viewpager

Create the following xml file and place it insideres/drawable on your project :

selected_item.xml

	<?xml version="1.0" encoding="utf-8"?>
	<shape android:shape="oval"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:useLevel="true"
	android:dither="true">
	<size
	android:height="9dip"
	android:width="9dip"/>
	<solid android:color="@android:color/white"/>
	</shape>

view raw selected_item.xml hosted with ❤ by GitHub

nonselected_item.xml

	<?xml version="1.0" encoding="utf-8"?>
	<shape android:dither="true"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="oval"
	android:useLevel="true">
	<size android:height="9dip"
	android:width="9dip"/>
	<solid android:color="@android:color/darker_gray"/>
	</shape>

view raw nonselected_item.xml hosted with ❤ by GitHub

Layouting

This project use 2 layouts (1 for activity and 1 for fragment):

1. activity_main.xml 
2. fragment_dinamis.xml

activity_main.xml

This file contains viewpager and its indicator. here is the code :

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<android.support.v4.view.ViewPager
	android:id="@+id/viewPager_itemList"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	></android.support.v4.view.ViewPager>
	<RelativeLayout
	android:id="@+id/viewPagerIndicators"
	android:layout_width="match_parent"
	android:layout_height="55dp"
	android:layout_alignParentBottom="true"
	android:layout_marginTop="5dp"
	android:gravity="center">
	<LinearLayout
	android:id="@+id/indicators"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_centerHorizontal="true"
	android:gravity="center"
	android:orientation="horizontal">
	</LinearLayout>
	</RelativeLayout>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

fragment_dinamis.xml

This file contains attributes that will appears on fragment. Attributes will appears on fragment depend on its data in List. In this proheject i use textview as fragment's marker number (you can change as you wish). Here is the code :

	<?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:background="@android:color/holo_blue_light"
	android:layout_height="match_parent">
	<TextView
	android:id="@+id/text_view_detail_fragment"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="Title"
	android:textColor="@android:color/white"
	android:gravity="center"
	android:textStyle="bold"
	android:textSize="18dp"/>
	</LinearLayout>

view raw fragment_dinamis.xml hosted with ❤ by GitHub

Code in Class Java

In this part, we will use 3 java classes, they are :

1. DinamisFragment.java
2. FragmentAdapter.java
3. MainActivity.java

 
DinamisFragment.java

This class is a fragment class. We just create on fragment class, other fragments will create automatically depend on list size. Here is the code :

	package com.putuguna.fragmentdinamis;
	import android.os.Bundle;
	import android.support.annotation.Nullable;
	import android.support.v4.app.Fragment;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.TextView;
	/**
	* Created by putuguna on 21/03/17.
	*/
	public class DinamisFragment extends Fragment {
	private TextView tvDetailFragment;
	private String detail;
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
	return inflater.inflate(R.layout.fragment_dinamis, container, false);
	}
	@Override
	public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
	super.onViewCreated(view, savedInstanceState);
	tvDetailFragment = (TextView) view.findViewById(R.id.text_view_detail_fragment);
	tvDetailFragment.setText(getDetail());
	}
	public String getDetail() {
	return detail;
	}
	public void setDetail(String detail) {
	this.detail = detail;
	}
	}

view raw DinamisFragment.java hosted with ❤ by GitHub

There is not special code in fragment above, just like usual. The increment of fragment will happen in its adapter.

Take a look at method setDetail(). This method used in adapter, Why?

Because data got from activity, then data will sent to adapter, from adapter data will set into its fragment.

FragmentAdapter.java

	package com.putuguna.fragmentdinamis;
	import android.content.Context;
	import android.support.v4.app.Fragment;
	import android.support.v4.app.FragmentManager;
	import android.support.v4.app.FragmentStatePagerAdapter;
	import java.util.List;
	/**
	* Created by putuguna on 21/03/17.
	*/
	public class FragmentAdapter extends FragmentStatePagerAdapter {
	private Context ctx;
	private List<String> data;
	private Fragment[] fragments;
	public FragmentAdapter(Context ctx, FragmentManager fm, List<String> data) {
	super(fm);
	this.ctx = ctx;
	this.data = data;
	fragments = new Fragment[data.size()];
	}
	@Override
	public Fragment getItem(int position) {
	Fragment fragment = null;
	String items = data.get(position);
	DinamisFragment dinamisFragment = new DinamisFragment();
	dinamisFragment.setDetail(items);
	fragment = dinamisFragment;
	if (fragments[position] == null) {
	fragments[position] = fragment;
	}
	return fragments[position];
	}
	@Override
	public int getCount() {
	if (data != null) {
	return data.size();
	} else {
	return 0;
	}
	}
	}

view raw FragmentAdapter.java hosted with ❤ by GitHub

Take a look at attribute fragments. That attribute created as an array ([]), it because the size of data will dynamic, so the fragment also created dynamic (as an array).

Take a look again to method getItem(int position). There is a function : dinamisFragment.setDetail(items). Method setDetail() came from DinamisFragment.

MainActivity.java

In this file as usual is place where we set the data into a List, hosting the viewpager, etc. Here is the code :

	package com.putuguna.fragmentdinamis;
	import android.support.v4.view.ViewPager;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.support.v7.widget.LinearLayoutCompat;
	import android.widget.LinearLayout;
	import java.util.ArrayList;
	import java.util.List;
	public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
	private LinearLayout indicator;
	private int mDotCount;
	private LinearLayout[] mDots;
	private ViewPager viewPager;
	private List<String> listItem = new ArrayList<>();
	private FragmentAdapter fragmentAdapter;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	indicator = (LinearLayout) findViewById(R.id.indicators);
	viewPager = (ViewPager) findViewById(R.id.viewPager_itemList);
	setData();
	}
	private void setData(){
	listItem.add("Ini adalah fragment 1");
	listItem.add("Ini adalah fragment 2");
	listItem.add("Ini adalah fragment 3");
	listItem.add("Ini adalah fragment 4");
	listItem.add("Ini adalah fragment 5");
	fragmentAdapter = new FragmentAdapter(this, getSupportFragmentManager(), listItem);
	viewPager.setAdapter(fragmentAdapter);
	viewPager.setCurrentItem(0);
	viewPager.setOnPageChangeListener(this);
	setUiPageViewController();
	}
	private void setUiPageViewController(){
	mDotCount = fragmentAdapter.getCount();
	mDots = new LinearLayout[mDotCount];
	for(int i=0; i<mDotCount; i++){
	mDots[i] = new LinearLayout(this);
	mDots[i].setBackgroundResource(R.drawable.nonselected_item);
	LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
	LinearLayoutCompat.LayoutParams.WRAP_CONTENT,
	LinearLayout.LayoutParams.WRAP_CONTENT
	);
	params.setMargins(4,0,4,0);
	indicator.addView(mDots[i],params);
	mDots[0].setBackgroundResource(R.drawable.selected_item);
	}
	}
	@Override
	public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
	}
	@Override
	public void onPageSelected(int position) {
	for (int i=0; i<mDotCount; i++){
	mDots[i].setBackgroundResource(R.drawable.nonselected_item);
	}
	mDots[position].setBackgroundResource(R.drawable.selected_item);
	}
	@Override
	public void onPageScrollStateChanged(int state) {
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

That's all about how to create a dynamic fragment on viewpager. Hope it helps. Thank you.