How to Add Animated Tab Layout in Android?

By Tell Me How -
0
10256
Animated Tab Layout in Andrid
Animated Tab Layout in Andrid

Today we’re going to see how to add animated Tab Layout in Android but this is a unique Zen UI 6.0 layout.

We’ve discussed already about animated tab layout library and you can see below:

Demo of Android Badges Tab Layout library
Badges Tab Layout library
Android SpaceTabLayout Animation
Space Tab Layout Library
Add Chrome like Tab Switcher Android Library
Chrome like Tab Switcher Android Library
Two Panels Layout Animation Android Library
Two Panels Layout Animation Android Library
Bubble Tab animation library Android
Bubble Tab animation library

Let’s move on to this awesome Library

1Demo

Function bar animation

2Application Demo

Animated Tab Layout Library - Asus ZenUi 6.0 (Concept)
Phone Animation – Asus ZenUi 6.0 (Concept)

3Download this project

4Include this library in project

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
      implementation 'com.github.iammert:AnimatedTabLayout:0.1'
}

5Create Tab in Resource XML

Create your tabs file under res/xml/ folder.

<?xml version="1.0" encoding="utf-8"?>
<tabs size="@dimen/size"
    space="@dimen/space">

    <tab
        inactiveColor="@color/colorGray"
        activeColor="@color/colorOrange"
        drawable="@drawable/ic_star_white_24dp"/>

    <tab
        inactiveColor="@color/colorGray"
        activeColor="@color/colorBlue"
        drawable="@drawable/ic_dialpad_white_24dp"/>

    <tab
        inactiveColor="@color/colorGray"
        activeColor="@color/colorRed"
        drawable="@drawable/ic_access_time_white_24dp"/>

    <tab
        inactiveColor="@color/colorGray"
        activeColor="@color/colorPurple"
        drawable="@drawable/ic_account_circle_white_24dp"/>
</tabs>

6Add animated tab layout in UI

Add tabs

<com.iammert.library.AnimatedTabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:atl_tabs="@xml/tabs"/>

7Add animation in Tab

Setup with viewpager or listen change on tab click.

atl.setupViewPager(viewpager)
atl.setTabChangeListener(object : AnimatedTabLayout.OnChangeListener {
    override fun onChanged(position: Int) {
    }
})

Hope you enjoy this project and if you’re then please share with your friends.

POPULAR ARTICLES

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...