FlashyTabBar

Requirements

• Android 4.4+

Example

To run the example project, clone the repo, and run MainActivity

Installation

Add materialdesign library to your project

    dependencies {
        //your project depencies here
        implementation "com.google.android.material:material:1.0.0"
    } 

As library

GitHub Packages

Step 1 : Generate a Personal Access Token for GitHub

• Inside you GitHub account:
• Settings -> Developer Settings -> Personal Access Tokens -> Generate new token
• Make sure you select the following scopes (“ read:packages”) and Generate a token
• After Generating make sure to copy your new personal access token. You cannot see it again! The only option is to generate a new key.

Step 2: Store your GitHub — Personal Access Token details

• Create a github.properties file within your root Android project
• In case of a public repository make sure you add this file to .gitignore for keep the token private
• Add properties gpr.usr=GITHUB_USERID and gpr.key=PERSONAL_ACCESS_TOKEN
• Replace GITHUB_USERID with personal / organisation Github User ID and PERSONAL_ACCESS_TOKEN with the token generated in #Step 1

Step 3 : Update build.gradle inside the application module

• Add the following code to build.gradle inside the app module that will be using the library

    def githubProperties = new Properties()
    githubProperties.load(new FileInputStream(rootProject.file("github.properties")))
    repositories {
        maven {
            name = "GitHubPackages"

            url = uri("https://maven.pkg.github.com/Cuberto/flashy-tabbar-android")
            credentials {
                /** Create github.properties in root project folder file with     
                ** gpr.usr=GITHUB_USER_ID & gpr.key=PERSONAL_ACCESS_TOKEN 
                ** Or set env variable GPR_USER & GPR_API_KEY if not adding a properties file**/
                username = githubProperties['gpr.usr'] ?: System.getenv("GPR_USER")
                password = githubProperties['gpr.key'] ?: System.getenv("GPR_API_KEY")
            }
        }
    }

• inside dependencies of the build.gradle of app module, use the following code

    dependencies {
        //consume library
        implementation 'com.cuberto.flashytabbarandroid:flashytabbarandroid:1.0.0'
        ....
    }

Sync project and now you can use flashytabbar library

Android Archive Library

Download flashytabbarandroid-1.0.0.aar from assets, add it to your app module libs package and add this to your dependencies

    dependencies {
        //your project depencies here
        implementation fileTree(dir: 'libs', include: ['*.aar'])
    }

Sync project and now you can use flashytabbar library

Manual

Add TabFlashyAnimator and content of res package to your project

Usage

Add TabLayout to your xml with tabGravity="fill", tabIndicatorHeight="0dp" and tabMode="fixed"

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:elevation="20dp"
        android:minHeight="?actionBarSize"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed" />
        

Create adapter in your Activity, add some fragments and set ViewPager adapter

        private List<Fragment> mFragmentList = new ArrayList<>();
        private TabFlashyAnimator tabFlashyAnimator;
        private String[] titles = new String[]{"Events", "Highlights", "Search", "Settings"};
        
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mFragmentList.add(new TabFragment(titles[0]));
            mFragmentList.add(new TabFragment(titles[1]));
            mFragmentList.add(new TabFragment(titles[2]));
            mFragmentList.add(new TabFragment(titles[3]));
            ViewPager viewPager = findViewById(R.id.view_pager);
            FragmentStatePagerAdapter adapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
                @Override
                public Fragment getItem(int position) {
                    return mFragmentList.get(position);
                }
        
                @Override
                public int getCount() {
                    return mFragmentList.size();
                }
            };
            viewPager.setAdapter(adapter);

Setup your TabLayout with ViewPager

        TabLayout tabLayout = findViewById(R.id.tabLayout);
        tabLayout.setupWithViewPager(viewPager);

Create TabFlashyAnimator and tabItem as title and image id for each fragment. You can also set text color and size for tab item.

        tabFlashyAnimator = new TabFlashyAnimator(tabLayout);
        tabFlashyAnimator.addTabItem(titles[0], R.drawable.ic_events);
        tabFlashyAnimator.addTabItem(titles[1], R.drawable.ic_highlights);
        tabFlashyAnimator.addTabItem(titles[2], R.drawable.ic_search);
        tabFlashyAnimator.addTabItem(titles[3], R.drawable.ic_settings, R.color.colorAccent, getResources().getDimension(R.dimen.big_text));

Call highlightTab() for 0 position and add tabFlashyAnimator as OnPageChangeListener to ViewPager

        tabFlashyAnimator.highLightTab(0);
        viewPager.addOnPageChangeListener(tabFlashyAnimator);

Do this to set badge for tab item:

        tabFlashyAnimator.setBadge(1, 2);

Call tabFlashyAnimator onStart() and onStop() in appropriate activity methods

        @Override
        protected void onStart() {
            super.onStart();
            tabFlashyAnimator.onStart((TabLayout) findViewById(R.id.tabLayout));
        }
    
        @Override
        protected void onStop() {
            super.onStop();
            tabFlashyAnimator.onStop();
        }

iOS

Similar library FlashyTabBar by Cuberto

Author

Cuberto Design, [email protected]

License

FlashyTabbar is available under the MIT license. See the LICENSE file for more info.