How to Create a custom Dialog with Tabs (Android)

Just earlier working on an app, I realized I needed to display tabbed information to users in a dialog box. This is quite different from the usual Tabbed Activity.

Dependency

The first step is to make sure you have "'com.android.support:design" in your build.gradle file.

Layouts

Next is to create the layout xml files for the custom dialog and your fragment. Your custom dialog may look like this:

dialog_sample.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">
	<android.support.design.widget.TabLayout
	android:id="@+id/tabLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	/>
	<android.support.v4.view.ViewPager
	android:id="@+id/masterViewPager"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	/>
	</LinearLayout>

view raw dialog_sample.xml hosted with ❤ by GitHub

And for the purpose of this tutorial, we will use a minimal Fragment, like the one indicated below:

fragment_sample.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">
	<TextView
	android:id="@+id/textView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" />
	</LinearLayout>

view raw fragment_sample.xml hosted with ❤ by GitHub

Implementation

Next up is, building the java classes for the dialog, the fragment adapter, and the fragments.

Here is a sample implementation of the viewpager's adapter:

CustomAdapter.java

	public class CustomAdapter extends FragmentPagerAdapter {
	List<Fragment> mFragmentCollection = new ArrayList<>();
	List<String> mTitleCollection = new ArrayList<>();
	public CustomAdapter(FragmentManager fm) {
	super(fm);
	}
	public void addFragment(String title, Fragment fragment)
	{
	mTitleCollection.add(title);
	mFragmentCollection.add(fragment);
	}
	//Needed for
	@Override
	public CharSequence getPageTitle(int position) {
	return mTitleCollection.get(position);
	}
	@Override
	public Fragment getItem(int position) {
	return mFragmentCollection.get(position);
	}
	@Override
	public int getCount() {
	return mFragmentCollection.size();
	}
	}

view raw CustomAdapter.java hosted with ❤ by GitHub

Note: you must override getTitle for the Tabs to have proper names.

Below is also a sample fragment for illustration purposes, we'll keep it simple for now:

CustomFragment.java

	public class CustomFragment extends Fragment {
	private String mText = "";
	public static CustomFragment createInstance(String txt)
	{
	CustomFragment fragment = new CustomFragment();
	fragment.mText = txt;
	return fragment;
	}
	@Override
	public View onCreateView(LayoutInflater inflater,
	ViewGroup container,
	Bundle savedInstanceState) {
	View v = inflater.inflate(R.layout.fragment_sample,container,false);
	((TextView) v.findViewById(R.id.textView)).setText(mText);
	return v;
	}
	}

view raw CustomFragment.java hosted with ❤ by GitHub

Go ahead and create your dialog's class:

TabbedDialog.java

	public class TabbedDialog extends DialogFragment {
	TabLayout tabLayout;
	ViewPager viewPager;
	@Nullable
	@Override
	public View onCreateView(LayoutInflater inflater,
	@Nullable ViewGroup container,
	@Nullable Bundle savedInstanceState) {
	View rootview = inflater.inflate(R.layout.dialog_sample,container,false);
	tabLayout = (TabLayout) rootview.findViewById(R.id.tabLayout);
	viewPager = (ViewPager) rootview.findViewById(R.id.masterViewPager);
	CustomAdapter adapter = new CustomAdapter(getChildFragmentManager());
	adapter.addFragment("Boy",CustomFragment.createInstance("John"));
	adapter.addFragment("Girl",CustomFragment.createInstance("Stacy"));
	adapter.addFragment("Robot",CustomFragment.createInstance("Aeon"));
	viewPager.setAdapter(adapter);
	tabLayout.setupWithViewPager(viewPager);
	return rootview;
	}
	}

view raw TabbedDialog.java hosted with ❤ by GitHub

And there you have it, it displays similarly to what's shown below:

Full source can be found here: https://github.com/kunmi/BlogTutorials/tree/master/TabbedDialog