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

Demo

Function bar animation

Application Demo

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

Download this project

Include this library in project

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

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

Create 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>

Add 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"/>

Add 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.

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

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