Popularity
4.3
Growing
Activity
6.4
-
438
7
37

Description

This library is the implementation of TabLayout as seen on popular messaging app Snapchat Snapchat.com.

It can be used to animate Three or Five tabs.

Programming language: Kotlin
Tags: Kotlin     Android     Animations     UI Widget     TabLayout    

SnapTabLayout alternatives and similar packages

Based on the "UI Widget" category

Do you think we are missing an alternative of SnapTabLayout or a related project?

Add another 'UI Widget' Package

README

SnapTabLayout Tweet

Show some :heart: and star the repo to support the project

CircleCI Download Android Arsenal Material Up Android_Weekly

This library is the implementation of TabLayout as seen on popular messaging app Snapchat Snapchat.com.

It can be used to animate Three or Five tabs.

👏 Demo

snaptablayout demo 1 snaptablayout demo 2

Contents

  • [Installation](#💻-Installation)
  • [How to use / Sample](#❔-Usage)
    • [Customization](#📐-Customization)
  • Bugs and feedback

💻 Installation

 implementation 'com.fridayof1995.tabanimation:SnapTablayout:0.0.7'

❔ Usage

Step 1

<com.fridayof1995.tabanimation.SnapTabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
    .
    .                    
    custom:numOfTabs="three"
        />

Step 2

  • Tab Number (Required)

    This parameter specifies the number of tabs required:

    setNumOfTabs(SnapTabLayout.NumOfTabs.THREE);
    or
    setNumOfTabs(SnapTabLayout.NumOfTabs.FIVE);
    
  • Setting the icons (Required)

    This parameter specifies the icons to be inflated: All of the below are ImageButtons so you can set image, background etc. tab_name_explain

    tabLayout.smallCenterButton.setImageResource()
    tabLayout.largeCenterButton.setImageResource()
    tabLayout.startButton.setImageResource()
    tabLayout.endButton.setImageResource()
    

//Below required only when using five tabs. tabLayout.midStart.setImageResource() tabLayout.midEnd.setImageResource()


## 📐 Customization

* ### Background (Optional)
This parameter sets the background in extended and collapsed tab mode:

tabLayout.setBackgroundCollapsed(R.drawable.tab_gradient_collapsed) // By default black fall gradient. tabLayout.setBackgroundExpanded(R.drawable.tab_gradient_expanded)


* ### Color Transition in Icons (Optional)
This parameter sets the *ColorFilter* in extended and collapsed tab mode:

// When the layout moves from expanded to collapsed: Icons color transitions from white to black. tabLayout.setTransitionIconColors(R.color.white, R.color.black)


* ### Color Transition in ViewPager Background (Optional)
This parameter gives a smooth color transition to the background of viewpager as seen in demo:

tabLayout.setVpTransitionBgColors(LeftSideColor: android.R.color.holo_purple , CenterColor: android.R.color.black , RightSideColor: android.R.color.holo_orange_dark)

## Bugs and Feedback

For bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/nirukk52/SnapTabLayout/issues).

## 👨 Developed By

Niranjan Kurambhatti


## 📃 License

    Copyright 2018 Niranjan Kurambhatti

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.


*Note that all licence references and agreements mentioned in the SnapTabLayout README section above are relevant to that project's source code only.