MaterialTabsTemplate

Why this Repo?

MaterialTabsTemplate is solely created to reduce the burden of writing same boiler plate codes for Tab creation in Android.

Following are the possible styles of Tabs that can be generated from MaterialTabsTemplate.

Simple Tabs (Top & Bottom)

<a href="https://imgur.com/AAssdIW"><img src="https://i.imgur.com/AAssdIW.png" title="source: imgur.com" height="403" width="200" /></a><a href="https://imgur.com/NRBNjK1"><img src="https://i.imgur.com/NRBNjK1.png" title="source: imgur.com" height="403" width="200" /></a>

Icon Tabs (Top & Bottom)

<a href="https://imgur.com/mANfzop"><img src="https://i.imgur.com/mANfzop.png" title="source: imgur.com" height="403" width="200" /></a><a href="https://imgur.com/vk0sscM"><img src="https://i.imgur.com/vk0sscM.png" title="source: imgur.com" height="403" width="200" /></a>

Icon with Text Tabs (Top & Bottom)

<a href="https://imgur.com/5ULdB1X"><img src="https://i.imgur.com/5ULdB1X.png" title="source: imgur.com" height="403" width="200"/></a><a href="https://imgur.com/tYyOCQW"><img src="https://i.imgur.com/tYyOCQW.png" title="source: imgur.com" height="403" width="200"/></a>

Icon with Badge Tabs (Top & Bottom)

<a href="https://imgur.com/1LK1RLn"><img src="https://i.imgur.com/1LK1RLn.png" title="source: imgur.com" height="403" width="200"/></a><a href="https://imgur.com/nlzm74O"><img src="https://i.imgur.com/nlzm74O.png" title="source: imgur.com" height="403" width="200"/></a>

Implementation

1. Download or clone this repo

<a href="https://imgur.com/Q77IQu6"><img src="https://i.imgur.com/Q77IQu6.png" title="source: imgur.com" /></a>

2. Rename the downloaded folder to MaterialTabsTemplate and copy the complete folder.

<a href="https://imgur.com/AW7HMd4"><img src="https://i.imgur.com/AW7HMd4.png" title="source: imgur.com" /></a>

Paste the selected files into

For Mac

Go to Applications, Choose Android Studio, Right click and select Show Package Contents options.

<a href="http://imgur.com/6jkayYm"><img src="http://i.imgur.com/6jkayYm.png" title="source: imgur.com" height="153" width="400"/></a>

Navigate to > Contents - Plugins - android - lib - templates - other - paste the downloaded MaterialTabsTemplate folder

For Windows

Go to C - Program Files - Android - Android Studio

C:\Program Files\Android\Android Studio\

Navigate to Plugins - android - lib - templates - other - paste the downloaded MaterialTabsTemplate folder

<a href="http://imgur.com/g6vPucq"><img src="http://i.imgur.com/g6vPucq.png" title="source: imgur.com" height="203" width="250"/></a> <a href="http://imgur.com/16P1k0s"><img src="http://i.imgur.com/16P1k0s.png" title="source: imgur.com" height="203" width="300"/></a>

<a href="https://imgur.com/Qbw4jfr"><img src="https://i.imgur.com/Qbw4jfr.png" title="source: imgur.com" /></a>

Usages

It is easy and pretty straight forward

• Open your project in Android Studio.
• Right click on your project root package.
• Navigate to New - Other - MaterialTabsTemplate

<a href="https://imgur.com/suvT0rh"><img src="https://i.imgur.com/suvT0rh.png" title="source: imgur.com" /></a>

And This is how Template Wizard looks like!

<a href="https://imgur.com/KQ1byad"><img src="https://i.imgur.com/KQ1byad.png" title="source: imgur.com" height="403" width="500" /></a>

Why TabLayout instead of Design support BottomNavigationView?

I have plenty of reasons for the same as below:

• It’s not flexible.
• Random behaviour if there are less tab items.
• Customising text sizes and icon sizes are like a nightmare (Just try adding small sized icon for one tab and big sized icon for the other ;-) ).

Further article on https://blog.f22labs.com/instagram-like-bottom-tab-fragment-transaction-android-389976fb8759

Also refer RecyclerViewTemplate:

https://github.com/TakeoffAndroid/RecyclerViewTemplate

Contributions

Pull requests and contributions are most welcome.

Any type of Tabs layout on mind? You can always drop a mail!.