How to Create a custom Dialog with Tabs (Android)

image from blog.smartthings.com


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>  

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>  

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();  
   }  
 }  

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;  
   }  
 }  


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;  
   }  
 }  


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



3 comments:

  1. This is what I was looking for. I am using a RecyclerView in the CustomFragment using a RecyclerView Adapter. How would I pass the selected item from the recyclerview to the MainActivity?

    ReplyDelete
  2. This is what I have been looking for. Thank you. One question however. I am using a RecyclerView in my CustomFragments. How would I pass the data from the RecyclerView in CustomFragment to MainActivity?

    ReplyDelete