Simple library for creating bottom tab layout. Made by Stfalcon

Overview

BottomTabLayout

alt tag

Simple library for bottom tab layout

Download

Download via Gradle:

compile 'com.github.stfalcon:bottomtablayout:0.3'

or Maven:

<dependency>
  <groupId>com.github.stfalcon</groupId>
  <artifactId>bottomtablayout</artifactId>
  <version>0.3</version>
  <type>pom</type>
</dependency>

Usage

Create text selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black" android:state_pressed="true" /> <!-- pressed -->
    <item android:color="@color/black" android:state_selected="true" /> <!-- selected -->
    <item android:color="@color/white" /> <!-- default -->
</selector>

Create drawable selector for each button icon:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_button1_dark" android:state_pressed="true" /> <!-- pressed -->
    <item android:drawable="@drawable/ic_button1_dark" android:state_selected="true" /> <!-- selected -->
    <item android:drawable="@drawable/ic_button1" /> <!-- default -->
</selector>

Create menu resource file with items. Where title is title of button and icon is button drawable.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menu_button1"
        android:icon="@drawable/tab_button1_selector"
        android:title="Button1" />

    <item
        android:id="@+id/menu_button2"
        android:icon="@drawable/tab_button1_selector"
        android:title="Button2" />

    <item
        android:id="@+id/menu_button3"
        android:icon="@drawable/tab_button1_selector"
        android:title="Button3" />

    <item
        android:id="@+id/menu_button4"
        android:icon="@drawable/tab_button1_selector"
        android:title="Button4" />

    <item
        android:id="@+id/menu_button5"
        android:icon="@drawable/tab_button1_selector"
        android:title="Button5" />
</menu>

Create style for button

<style name="TabButtonTextStyle" parent="android:Widget.Button">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@drawable/tab_button_text_selector</item>
</style>

Add bottomtablayout view to activity layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.stfalcon.bottomtablayout_sample.MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomTabLayout" />

    <com.stfalcon.bottomtablayout.BottomTabLayout
        android:id="@+id/bottomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_alignParentBottom="true"
        android:background="@color/dark" />

</RelativeLayout>

In activity class:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        container = R.id.container; //Container for fragments

        //Setup button tab layout
        bottomTabLayout = (BottomTabLayout) findViewById(R.id.bottomTabLayout);
        //set button text style
        bottomTabLayout.setButtonTextStyle(R.style.TextGray16);
        // set buttons from menu resource
        bottomTabLayout.setItems(R.menu.menu_bottom_layout);
        //set on selected tab listener.
        bottomTabLayout.setListener(new BottomTabLayout.OnItemSelectedListener() {
            @Override
            public void onItemSelected(int id) {
                switchFragment(id);
            }
        });
        //set button that will be select on start activity
        bottomTabLayout.setSelectedTab(R.id.menu_button1);
        //enable indicator
        bottomTabLayout.setIndicatorVisible(true);
        //indicator height
        bottomTabLayout.setIndicatorHeight(getResources().getDimension(R.dimen.indicator_height));
        //indicator color
        bottomTabLayout.setIndicatorColor(R.color.green);
        //indicator line color
        bottomTabLayout.setIndicatorLineColor(R.color.dark);
    }

For example we can switch fragments in container:

/**
     * Show fragment in container
     * @param id Menu item res id
     */
    public void switchFragment(int id) {
        Fragment fragment = null;
        switch (id) {
            case R.id.menu_button1:
                fragment = ColoredFragment.newInstance(R.color.blue, "Fragment 1");
                break;
            case R.id.menu_button2:
                fragment = ColoredFragment.newInstance(R.color.green, "Fragment 2");
                break;
            case R.id.menu_button3:
                fragment = ColoredFragment.newInstance(R.color.pink, "Fragment 3");
                break;
            case R.id.menu_button4:
                fragment = ColoredFragment.newInstance(R.color.blueDark, "Fragment 4");
                break;
            case R.id.menu_button5:
                fragment = ColoredFragment.newInstance(R.color.white, "Fragment 5");
                break;
        }
        if (fragment != null) {
            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
            transaction.replace(container, fragment);
            transaction.commit();
        }
    }

For showing bubble count on tab.

bottomTabLayout.showTabBubbleCount(R.id.menu_button1, 3);

You can style bubble with methods:

bottomTabLayout.setTabBubbleColor(ContextCompat.getColor(this, R.color.blue));
bottomTabLayout.setTabBubblePadding(0, 0, 0, 0);
bottomTabLayout.setTabBubbleTextStyle(R.style.TextWhite12);

Take a look at the sample project for more information.

License

Copyright 2017 stfalcon.com

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.
You might also like...
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).

Simple Stack Why do I want this? To make navigation to another screen as simple as backstack.goTo(SomeScreen()), and going back as simple as backstack

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose
A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

🎉 [Android Library] A light-weight library to easily make beautiful Navigation Bar with ton of 🎨 customization option.
🎉 [Android Library] A light-weight library to easily make beautiful Navigation Bar with ton of 🎨 customization option.

Bubble Navigation 🎉 A light-weight library to easily make beautiful Navigation Bars with a ton of 🎨 customization options. Demos FloatingTopBarActiv

A simple Floating Action Button that shows an anchored Navigation View
A simple Floating Action Button that shows an anchored Navigation View

Floating Navigation View A simple Floating Action Button that shows an anchored Navigation View and was inspired by Menu Material Fixed created by Tom

Okuki is a simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick DI integration.

Okuki A simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick integration for automatic dependency-

A Simple App to implement Navigation Architecture Component.

Android Navigation codelab Content: https://codelabs.developers.google.com/codelabs/android-navigation/ License Copyright 2018 The Android Open Source

Simple API implement DataBinding and ViewBinding.
Simple API implement DataBinding and ViewBinding.

Binding has been migrated to Maven Central because jCenter will be deprecated

A simple, highly customizable compose navigation component for Android & Desktop platform.
A simple, highly customizable compose navigation component for Android & Desktop platform.

介绍 一个简单并提供高度扩展功能的 Compose 导航组件,同时支持 Android 和 Desktop 平台。 常用功能 使用 下载 // Android implementation("io.github.succlz123:compose-screen-android:0.0.1") //

The Words app is a simple dictionary app, with a list of letters, words for each letter, and the ability to look up definitions of each word in the browser.

Words App This folder contains the source code for the Words app codelab. Introduction Words app allows you to select a letter and use Intents to navi

Comments
  • Feature Request-  Badge Count Functionality

    Feature Request- Badge Count Functionality

    Hi,

    I found this library very good. i also use in my project. but i have to set badge count on tab. i go through library but not found any badge count related code. you can implement badge count functionality ?

    opened by indiascope 3
Owner
Stfalcon LLC
We are Stfalcon, mobile and web development company.
Stfalcon LLC
NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect.

NTabLayout Brief NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect. This tab bar's effe

XellossRyan 1 Oct 22, 2021
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 5 Nov 24, 2022
A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

Hamidreza Etebarian 1.2k Dec 30, 2022
A library that you can use for bottom navigation bar. Written with Jetpack Compose

FancyBottomNavigationBar A library that you can use for bottom navigation bar. W

Alperen Çevlik 3 Jul 27, 2022
BubbleTabBar is bottom navigation bar with customizable bubble like tabs

BubbleTabBar BubbleTabBar is bottom navigation bar with customizable bubble like tabs Usage <com.fxn.BubbleTabBar android:id="@+id/

Akshay sharma 576 Dec 30, 2022
Implementing bottom navigation in jetpack compose

Compose-Bottom-Navigation Implementing bottom navigation in jetpack compose Add the Navigation dependency Open the app's build file, found at app/buil

Steve Chacha 5 Dec 26, 2021
Jetpack Compose BottomDrawerScaffold (Material Bottom Drawer)

BottomDrawerScaffold Current Compose Version: 1.0.2 Compose BottomDrawerScaffold which implements the Material Bottom Drawer https://material.io/compo

Alexander Karkossa 8 Dec 28, 2022
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Kaique Ocanha 6 Jun 15, 2022
DSC Moi University session on using Navigation components to simplify creating navigation flow in our apps to use best practices recommended by the Google Android Team

Navigation Components Navigate between destination using safe args How to use the navigation graph and editor How send data between destinations Demo

Breens Mbaka 6 Feb 3, 2022
A simple navigation library for Android 🗺️

Enro ??️ A simple navigation library for Android "The novices’ eyes followed the wriggling path up from the well as it swept a great meandering arc ar

Isaac Udy 216 Dec 16, 2022