In earlier we use ActionBar Tabs over ViewPager that we had done in earlier post that you can check here. But this ActionBar Tabs is deprecated in material design. So for that we need Material Design Tabs for implementing tabs in our app. We have seen Google Play Store, Whatsapp and many more are using Material Design Tabs.
So in today’s article we are going to learn how to implement this Material Design Tabs in our app. For this we should have some knowledge about Material Design that you can check in this tutorial of Material Toolbar tutorial.
Before starting we need three libraries to be included in our build.gradle file :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0.0" defaultConfig { applicationId "tabbardemo.com.materialdesigntabs_demo" minSdkVersion 8 targetSdkVersion 23 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1' compile 'com.android.support:cardview-v7:23.0.1' compile 'com.android.support:recyclerview-v7:23.0.1' } |
The design library is necessary for implementing tabs.
Now for implementing Tabs we need to know about something new in design library widgets that are:
In this tutorial, we are going to learn how to implement Material Design Tabs by using TabLayout and also how to hide and show toolbar on scroll.
1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.
2. Open res=>values and inside values directory create a new xml file naming colors.xml and the following colors to that file.
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#D32F2F</color> <color name="colorPrimaryDark">#F44336</color> <color name="textColorPrimary">#FFFFFF</color> <color name="windowBackground">#FFFFFF</color> <color name="navigationBarColor">#000000</color> <color name="colorAccent">#C62828</color> <color name="blue">#03A9F4</color> </resources> |
3. Now open res=>values and inside values directory open styles.xml file and add the following style to it. This style is necessary for material design.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<resources> <style name="AppBaseTheme" parent="@style/AppTheme" /> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="android:windowDisablePreview">true</item> <item name="windowActionBar">false</item> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> <item name="android:windowNoTitle">true</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
4. For Lollipop versions we need to create a new directory under res directory naming values-v21 and under this values directory create new styles.xml file and add the following style for lollipop versions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="android:windowDisablePreview">true</item> <item name="windowActionBar">false</item> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> <item name="android:windowNoTitle">true</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:windowContentTransitions">true</item> <item name="android:navigationBarColor">@color/colorPrimary</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> <item name="android:windowSharedElementExitTransition">@android:transition/move</item> </style> </resources> |
5. Now create an activity_main.xml file under layout directory and add the following code this design will be going to be used for setting material design tabs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coordinatorLayout" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!-- AppBar Layout --> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="fill_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <!-- Tab Layout for creating tabs --> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <!-- Helps handing the Fragments for each Tab --> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="fill_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> |
The scroll flags for the Toolbar specify how it must behave upon scroll (i.e. its animation). “scroll|enterAlways” says make my Toolbar react to scroll events. Hide it when scrolling down, and reveal it when scrolling back up.
This behavior will be indicated by our ViewPager which will be hold our Fragments. The Fragments hold our scrollable view. So when we scroll down a list, the Toolbar knows when to react.
6. Since we have to add fragments over viewpager so for that we need a layout for fragment also so we create a new layout naming dummy_fragment.xml and add the following code. In this design i had used recyclerview for listing items.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/blue" android:gravity="center" android:orientation="vertical"> <!-- Recycler View --> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none" /> </LinearLayout> |
7. Now we have to create another layout for recyclerview row items naming item_row.xml and add the following code. In this code i had taken CardView that is also an part of design for this we had included library of cardview. This will display items in cards.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cardView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="10dp" app:cardCornerRadius="5dp" app:cardElevation="7dp"> <TextView android:id="@+id/cardTitle" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="15dp" android:text="Card Title" android:textColor="#000000" android:textSize="17sp" /> </android.support.v7.widget.CardView> |
8. Now create a ViewHolder java class for recyclerview item row naming DemoViewHolder.java and add the following code.
If you are not aware hoe to use recyclerview in android then you can check my tutorial about RecyclerView.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package tabbardemo.com.materialdesigntabs_demo; import android.support.v7.widget.RecyclerView; import android.view.View; import android.widget.TextView; /** * Created by SONU on 31/08/15. */ public abstract class DemoViewHolder extends RecyclerView.ViewHolder { public TextView title; public DemoViewHolder(View view) { super(view); this.title = (TextView) view.findViewById(R.id.cardTitle); } } |
9. After creating viewholder we need to create a adapter class for recyclerview naming RecyclerView_Adapter.java.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
package tabbardemo.com.materialdesigntabs_demo; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.ViewGroup; import java.util.ArrayList; /** * Created by SONU on 10/09/15. */ public class RecyclerView_Adapter extends RecyclerView.Adapter<DemoViewHolder> { private ArrayList<String> arrayList; private Context context; public RecyclerView_Adapter(Context context, ArrayList<String> arrayList) { this.context = context; this.arrayList = arrayList; } @Override public int getItemCount() { return (null != arrayList ? arrayList.size() : 0); } @Override public void onBindViewHolder(DemoViewHolder holder, int position) { final DemoViewHolder mainHolder = (DemoViewHolder) holder; //Setting text over textview mainHolder.title.setText(arrayList.get(position)); } @Override public DemoViewHolder onCreateViewHolder( ViewGroup viewGroup, int viewType) { LayoutInflater mInflater = LayoutInflater.from(viewGroup.getContext()); ViewGroup mainGroup = (ViewGroup) mInflater.inflate( R.layout.item_row, viewGroup, false); DemoViewHolder mainHolder = new DemoViewHolder(mainGroup) { @Override public String toString() { return super.toString(); } }; return mainHolder; } } |
10. Now come to your MainActivity.java and add the following code for setting Material Design Tabs over viewpager. In this activity we are using a FragmentPagerAdapter for setting fragment over viewpager and adding tabs over viewpager with title and finally attach the view pager to tabs.. We can also use tabListener for listening tab selection.
Note viewPager.setCurrentItem(tab.getPosition()); This handles changing the fragment based on Tab click.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
package tabbardemo.com.materialdesigntabs_demo; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.util.Log; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private static Toolbar toolbar; private static ViewPager viewPager; private static TabLayout tabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); viewPager = (ViewPager) findViewById(R.id.viewPager); setupViewPager(viewPager); tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.setupWithViewPager(viewPager);//setting tab over viewpager //Implementing tab selected listener over tablayout tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition());//setting current selected item over viewpager switch (tab.getPosition()) { case 0: Log.e("TAG","TAB1"); break; case 1: Log.e("TAG","TAB2"); break; case 2: Log.e("TAG","TAB3"); break; } } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } //Setting View Pager private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFrag(new DummyFragment("ANDROID"), "ANDROID"); adapter.addFrag(new DummyFragment("iOS"), "iOS"); adapter.addFrag(new DummyFragment("WINDOWS"), "WINDOWS"); viewPager.setAdapter(adapter); } //View Pager fragments setting adapter class class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>();//fragment arraylist private final List<String> mFragmentTitleList = new ArrayList<>();//title arraylist public ViewPagerAdapter(FragmentManager manager) { super(manager); } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } //adding fragments and title method public void addFrag(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } } } |
11. Finally we need to create a DummyFragment.java for placing a fragment over viewpager when tab is selected. In this class we are getting tab title via parameter and using it for setting array over recyclerview.
If you ant to read more for fragments then you can read my tutorial about Android Fragments.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
package tabbardemo.com.materialdesigntabs_demo; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; /** * Created by SONU on 16/09/15. */ public class DummyFragment extends Fragment { private View view; private String title;//String for tab title private static RecyclerView recyclerView; public DummyFragment() { } public DummyFragment(String title) { this.title = title;//Setting tab title } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { view = inflater.inflate(R.layout.dummy_fragment, container, false); setRecyclerView(); return view; } //Setting recycler view private void setRecyclerView() { recyclerView = (RecyclerView) view .findViewById(R.id.recyclerView); recyclerView.setHasFixedSize(true); recyclerView .setLayoutManager(new LinearLayoutManager(getActivity()));//Linear Items ArrayList<String> arrayList = new ArrayList<>(); for (int i = 0; i < 20; i++) { arrayList.add(title+" Items " + i);//Adding items to recycler view } RecyclerView_Adapter adapter = new RecyclerView_Adapter(getActivity(), arrayList); recyclerView.setAdapter(adapter);// set adapter on recyclerview } } |
12. Finally all done, run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.
4 Comments
Mali
Monday, May 22nd, 2017Good tutorial sir, but i have one question . I want to retrieve data from database and display this data into recyclerview in same example , So please help me I dont know where to have put this code into this example, Thanks in advanced
mali
Tuesday, May 23rd, 2017good tutorial sir, Thanks
I have one question , I want to fetch data from mysql database and display for Android, IOS , Windows. Please explain me in detail how to do it . Thanks in advanced………….
Dr. Droid
Tuesday, May 23rd, 2017Hi Mali,
I am sharing one link which will help you to fetch data from server and display in list but the listing is in activity. So you need to modify your code according to fragment and show list.
https://www.androhub.com/android-json-parser/
Thanks
Seun
Friday, September 15th, 2017Great tutorial, Although I want to get specific data from an sqlite table column into a listview in a tab fragment. I just can’t seem to getting around the code. Man thanks for your time and anticipated response