TabDrawer

Android Navigation Tab Bar with Drawer - Alternative to Navigation Drawer (Hamburger Menu)

| | | | |----------|----------------------|--------------------| | Demo | Standard Tab Bar | Custom Layouts |

TabDrawer is an Open Source library for Android apps; combining the Navigation Tab Bar and a much user-friendly alternative to Navigation Drawer (Hamburger Menu)

You can easily add a fully customized Navigation Tab Bar (Bottom/Top/Left/Right), and a drawer for each tab that contains lists for navigating to different sections of the app.

---

v. 1.2.0 Release Notes:

• Badges added for Tabs
• Add below sample in your layout's TabDrawerLayout section

       tab:badgePosition="topRight"
       tab:badgeMarginToTabCorner="2dp"
       tab:badgePadding="2dp"
       tab:badgeColor="#ff0000"
       tab:badgeTextColor="#ffffff"
       tab:badgeSize="14dp"
       tab:badgeTextSize="10sp"

• .setBadgeCount(int tabPosition, int count)
• .getBadgeCount(int tabPosition)
• .clearBadgeCount(int tabPosition)
• Manually trigger Tab selection via .setSelectedTab(int tabPosition, int itemPosition, boolean sendClickInfo)

---

Adding TabDrawer Library

Gradle (through JCenter)

Simply add compile 'com.ashazar.tabdrawer:tabdrawer:1.2.0' in dependencies in your app's build.gradle file

dependencies {
    compile 'com.ashazar.tabdrawer:tabdrawer:1.2.0'
}

Using TabDrawer

Layout

• Set your root layout as RelativeLayout.
• Add xmlns:tab="http://schemas.android.com/apk/res-auto" namespace definition in RelativeLayout, in order to use TabDrawerLayout's own attributes.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tab="http://schemas.android.com/apk/res-auto"
    ...

• Place TabDrawerLayout as last child of root RelativeLayout. (Attribute explanations table for TabDrawerLayout is below the instructions)

    <com.ashazar.tabdrawer.TabDrawerLayout
        android:id="@+id/tabDrawer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        tab:tabBarPosition="bottom"
        tab:size_tabBar="48dp"
        tab:size_Total="240dp"
        tab:defaultSelectedTab="1"
        tab:padding="3dp"
        tab:drawer_padding="2dp"
        tab:list_padding="10dp"
        
        tab:badgePosition="topRight"
        tab:badgeMarginToTabCorner="2dp"
        tab:badgePadding="2dp"
        tab:badgeColor="#ff0000"
        tab:badgeTextColor="#ffffff"
        tab:badgeSize="14dp"
        tab:badgeTextSize="10sp"
        />

In Your Code

• Prepare TabDrawerData, object that holds all Tabs and Tabs' list items, as well as their properties (color, background color, etc.). (Method explanations table for TabDrawerData, Tab and TabListItem is below the instructions)

• Tabs can be: (a) Icon only, (b) Text only, or (c) Icon and Text (as in the sample app.)

• Tabs can: (a) have item lists (TabListItem), or (b) Tab only (act as a normal tab in a standard Tab Bar; no drawer opens, will be selected immediately, when clicked)

• Tab list items can be: (a) Text only, (b) Icon and Text (as in the sample app.), or (c) Icon only.

TabDrawerData tabDrawerData = new TabDrawerData()
                .setTabIconColors(
                        Color.parseColor("#3199ff"),
                        Color.parseColor("#ffffff")
                )
                .setTabTitleSize(12)
                .setTabTitleColors(
                        ContextCompat.getColor(context, R.color.tabTitle),
                        ContextCompat.getColor(context, R.color.tabTitle_selected),
                        Color.parseColor("#CCCCCC")
                )
                .setTabBackgroundColors(
                        ContextCompat.getColor(context, R.color.tabBackground),
                        ContextCompat.getColor(context, R.color.tabBackground_selected)
                )
                .setTabListItemTitleColors(Color.parseColor("#ffffff"))
                .setTabListItemTitleSize(16)

                .addTab( new Tab()
                        .setTitle("Demo")
                )

                .addTab( new Tab()
                        .setTitle("Queue")
                        .setIconImage(R.drawable.n_queue)
                        .setDrawerListColumnNumber(2)
                        .addTabListItem( new TabListItem("Add to Queue", R.drawable.ic_add_box_white_24dp ) )
                        .addTabListItem( new TabListItem("Archive", R.drawable.ic_archive_white_24dp) )
                );

• Prepare TabDrawer and Initialize
• TabDrawer takes following arguments: Context, Activity, TabDrawerLayout's Id, and TabDrawerData
• You need to override onTabDrawerClicked() to get clicked Tab's and item's positions.
• onTabDrawerClicked() only passes the clicks you need. So you don't have to do checks for open/close drawer; or whether the Tab or item already selected.
• Call initialize()

TabDrawer tabDrawer = new TabDrawer(context, activity, R.id.tabDrawer, tabArray) {
            @Override
            public void onTabDrawerClicked(int tabPosition, int itemPosition) {
                super.onTabDrawerClicked(tabPosition, itemPosition);
            }
        };

        tabDrawer.initialize();

If you want more customization, you can override below methods to modify the views as you want. For Tabs:

• setUnselectedTabView(RelativeLayout tabLayout, ImageView iconView, TextView titleView, int tabPosition)
• setSelectedTabView(RelativeLayout tabLayout, ImageView iconView, TextView titleView, int tabPosition)
• setInactiveSelectedTabView(RelativeLayout tabLayout, ImageView iconView, TextView titleView, int tabPosition)

For List Items in Drawer:

• setUnselectedListItemView(int tabPosition, int itemPosition, View view, ImageView iconView, TextView titleView)
• setSelectedListItemView(int tabPosition, int itemPosition, View view, ImageView iconView, TextView titleView)

You can override onBackPressed() to close Drawer when pressed 'Back'.

@Override
public void onBackPressed() {
    if (tabDrawer.isDrawerOpen())
        tabDrawer.closeDrawer();
    else
        super.onBackPressed();
}

---

Attributes for TabDrawerLayout

| Attribute | Mandatory | Explanation | |------------------------------|-----------|---------------------------------------------------------------------------------------------------------| | NameSpace: android | | | | layout_width | yes | "match_parent" for Top/Bottom TabDrawer; "wrap_content" for Left/Right TabDrawer | | layout_height | yes | "wrap_content" for Top/Bottom TabDrawer; "match_parent" for Left/Right TabDrawer | | | | | | NameSpace: tab | | | | topBarPosition | yes | top / bottom / left / right | | size_tabBar | yes | Size (in 'dp') of the TabBar only. | | | | Height for Top / Bottom TabDrawer; Width for Left / Right TabDrawer | | size_Total | yes | Size (in 'dp') of the TabBar & Drawer (when opened) | | | | Height for Top / Bottom TabDrawer; Width for Left / Right TabDrawer | | defaultSelectedTab | no | Initial highlighted Tab number. (default: 1) (integer) | | | | 1 for first Tab. (not 0) | | padding | no | Padding of the Tab itself. (in 'dp') | | | | Can also use paddingTop, paddingBottom, paddingLeft, paddingRight | | drawer_padding | no | Padding for the Drawer (in 'dp') | | | | Can also use list_paddingTop, list_paddingBottom, list_paddingLeft, list_paddingRight | | list_padding | no | Padding for the Drawer's GridView (in 'dp') | | | | Can also use list_paddingTop, list_paddingBottom, list_paddingLeft, list_paddingRight | | badgePosition | yes | Position of the badges | | | | topRight, topLeft, bottomRight, bottomLeft, center