Side bar navigation for tablets

Question

Im making a android application for a tablet. Im using very similar design to Google Maps, and I use the BottomNavigationView for portrait.

Looking at material design guidelines, bottom navigation is recommended to have on the left side as a bar. As shown in this picture:

Side bar navigation

In the post its called the compact "rail".

Is there something equivalent to BottomNavigationView that can look like the picture linked above?

Answer 1

the devlight.io:navigationtabbar:1.2.5 dependency is now stored at https://repo.grails.org, specifically at https://repo.grails.org/ui/native/core/devlight/io/navigationtabbar/1.2.5/navigationtabbar-1.2.5.pom

Below is my example codes to get the dependency working.

in build.gradle(app level):

implementation 'devlight.io:navigationtabbar:1.2.5'

in settings.gradle:

pluginManagement {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
        maven { url 'https://jcenter.bintray.com' }
        maven { url 'https://jitpack.io' }
        maven { url "https://repo.grails.org/grails/core" } 
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url "https://repo.grails.org/grails/core" } 
        maven { url 'https://jitpack.io' }
        maven { url 'https://jcenter.bintray.com' }
    }
}
rootProject.name = "xxx"
include ':app'

and in build.gradle(Project level):

buildscript {
    repositories {
        mavenCentral()
        google()
    }
    dependencies {
        classpath 'com.github.dcendents:android-maven-gradle-plugin:1.5'
        classpath "com.jfrog.bintray.gradle:gradle-bintray-plugin:1.7.3"
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

plugins {
    id 'com.android.application' version '8.3.1' apply false
    id 'com.android.library' version '8.3.1' apply false
}

Answer 2

I figured out a way to get it like I wanted. I just created a navigation drawer fragment, like you usually would do it, and just specified the width to be quite small, so just the icons are shown.

Answer 3

With the material component library you can use the NavigationRailView:

Add in your layout:

<com.google.android.material.navigationrail.NavigationRailView
    android:id="@+id/navigation_rail"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/menu_5n" />

In the code:

NavigationBarView.OnNavigationItemSelectedListener { item ->
    when(item.itemId) {
        R.id.item1 -> {
            // Respond to navigation item 1 click
            true
        }
        R.id.item2 -> {
            // Respond to navigation item 2 click
            true
        }
        else -> false
    }
}

Answer 4

if you want

this then try below

add compile 'devlight.io:navigationtabbar:1.2.5' dependency in app level gradle file. now add in .xml file below and related java code

<devlight.io.library.ntb.NavigationTabBar
   android:id="@+id/ntb"
   android:layout_width="match_parent"
   android:layout_height="50dp"
   app:ntb_animation_duration="400"
   app:ntb_preview_colors="@array/colors"
   app:ntb_corners_radius="10dp"
   app:ntb_active_color="#fff"
   app:ntb_inactive_color="#000"
   app:ntb_badged="true"
   app:ntb_titled="true"
   app:ntb_scaled="true"
   app:ntb_tinted="true"
   app:ntb_title_mode="all"
   app:ntb_badge_position="right"
   app:ntb_badge_gravity="top"
   app:ntb_badge_bg_color="#ffff0000"
   app:ntb_badge_title_color="#ffffffff"
   app:ntb_typeface="fonts/custom_typeface.ttf"
   app:ntb_badge_use_typeface="true"
   app:ntb_swiped="true"
   app:ntb_bg_color="#000"
   app:ntb_icon_size_fraction="0.5"
   app:ntb_badge_size="10sp"
   app:ntb_title_size="10sp"/>

in java

    final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb);
final ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_first),
                Color.parseColor(colors[0])
        ).title("Heart")
                .badgeTitle("NTB")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_second),
                Color.parseColor(colors[1])
        ).title("Cup")
                .badgeTitle("with")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_third),
                Color.parseColor(colors[2])
        ).title("Diploma")
                .badgeTitle("state")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_fourth),
                Color.parseColor(colors[3])
        ).title("Flag")
                .badgeTitle("icon")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_fifth),
                Color.parseColor(colors[4])
        ).title("Medal")
                .badgeTitle("777")
                .build()
);
navigationTabBar.setModels(models);
navigationTabBar.setViewPager(viewPager, 2);

navigationTabBar.setTitleMode(NavigationTabBar.TitleMode.ACTIVE);
navigationTabBar.setBadgeGravity(NavigationTabBar.BadgeGravity.BOTTOM);
navigationTabBar.setBadgePosition(NavigationTabBar.BadgePosition.CENTER);
navigationTabBar.setTypeface("fonts/custom_font.ttf");
navigationTabBar.setIsBadged(true);
navigationTabBar.setIsTitled(true);
navigationTabBar.setIsTinted(true);
navigationTabBar.setIsBadgeUseTypeface(true);
navigationTabBar.setBadgeBgColor(Color.RED);
navigationTabBar.setBadgeTitleColor(Color.WHITE);
navigationTabBar.setIsSwiped(true);
navigationTabBar.setBgColor(Color.BLACK);
navigationTabBar.setBadgeSize(10);
navigationTabBar.setTitleSize(10);
navigationTabBar.setIconSizeFraction(0.5);

for more check this github repo.