SubscribeSubscribe with Androidlift to get new post on mail.

Material Design Tabs | How to Create Android Material Design Tabs

Android Material Design Tabs

Material Design Tabs make it easy to explore and switch between different views.

Tabs enable content organisation at a high level, such as switching between views, data sets, or functional aspects of an app.Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Material Design Tabs Usage

A tab provides the affordable way for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

Material Design Tabs Types

  • Fixed.
  • Scrollable

Tab Layout is now part of Android Support Library. The material design solved many problems that android developer faced while creating any tab based UI.

Features of Material Design Tabs

  • We can use Image and text in tabs
  • Tab Strip color can be easily changed
  • Tabs can be easily used with other material design components like Toolbar, AppBar
  • Tabs can be made fixed or scrollable
  • We can use custom views for our tabs no need for 3rd party libraries

Material Design Tabs Output :

In Material Design Tabs blog post I will show you how we can use support library to create awesome looking tabs.

Download From Githubdownload code from github

Create a new project as MaterialTabsDemo follow this steps,

Note:

  • Download Icons from Google Material Icons site and paste into your drawable folder

Just follow my files content and put them accordingly.

build.gradle (Module:app)

 

Now goto res-> values-> colors.xml and paste below code

 

Inside values folder goto styles.xml and paste below code

 

Inside AndroidManifest.xml paste below code

 

Inside strings.xml paste below code

 

Inside activity_main.xml paste below code

 

Inside MainActivity.java paste below code

 

Let’s create some fragments to play around. Under you main package create one package as fragments and inside that create the MonFragmet.java and add following code.

For above fragment i have fragment_mon.xml layout inside it paste following code..

Like above create some more fragments with respect to their xml files, because we need it further code will be the same across all fragments.i have created something like following TueFragment.java, WedFragment.java, ThuFragment.java, FriFragment.jave, SatFragment.java & SunFragment.java with their respective fragment_tue.xml, fragment_wed.xml, fragment_thu.xml, fragment_fri.xml, fragment_sat.xml & fragment_sun.xml.

Simple :

  • Full Width Tabs : To make Tabs full width of the screen, just add this XML property to our TabLayout.
  • Center Aligned Tabs : To make Tabs Center Aligned of the screen with respect to width, just add this XML property to our TabLayout.

For simple tabs create SimpleTabsActivity.java under your main package and put following code.

In activity_simple_tabs.xml put following code

Now run the project and you will find output for Simple Tabs as follows :

material design tabs
android material design simple tabs

Scrollable Tabs :

For scrollable tabs create ScrollableTabsActivity.java under your main package and put following code.

 

In activity_scrollable_tabs.xml put following code

Now run the project and you will find output for Scrollable Tabs as follows :

material design tabs
android material design Scrollable tabs

 

Icon and Text Tabs :

For Icon and Text Tabs create IconTextTabsActivity.java under your main package and put following code.

 

In activity_icon_text_tabs.xml put following code

Now run the project and you will find output for Icon and Text Tabs as follows :

material design tabs
android material design icon and text tabs

Icon Tabs :

For Icon Tabs create IconTabsActivity.java under your main package and put following code.

 

In activity_icon_tabs.xml put following code

Now run the project and you will find output for Icon Tabs as follows :

material design tabs
android material design icon tabs

Custom Tabs :

For Icon Tabs create CustomTabsActivity.java under your main package and put following code.

 

In activity_custom_tabs.xml put following code

 

In custom_tab.xml put following code

This xml is for inflating the the TextView  in each tab with drawable TOP icon.

Now run the project and you will find output for Custom Tabs as follows :

material design tabs
android material design custom tabs

 

As a result we have played around following points in this post with the help hep of Material design support library.

  • Simple Tabs
    • Full Width Tabs
    • Center Alligned Tabs
  • Scrollable Tabs
  • Icon and Text Tabs
  • Icon Tabs
  • Custom Tabs

Also more information related to material design widget and components visit here.

May be this post will help a lot…!

Thanks for being here. Good Bye….!

 

 

(34)