BottomNavigationView Designed according Google guideLine

Overview

Material Bottom Navigation

DEPRECATED

Use offical Bottom Navigation

Android Arsenal

BottomNavigationView

Designed according Google [guideLine][1] [1]: https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-usage [2]: http://luseen.com/ [3]: http://fir.im/luseen?release_id=56feaea800fc741d61000000 By [Luseen][2] Technologies

[Download simple apk][3]

Download

Gradle:

compile 'com.github.armcha:LuseenBottomNavigation:1.8.2'

Maven:

<dependency>
  <groupId>com.github.armcha</groupId>
  <artifactId>LuseenBottomNavigation</artifactId>
  <version>1.8.2</version>
  <type>pom</type>
</dependency>

Usage

Add the BottomNavigationView to your layout

 <com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />

Add BottomNavigation items

  BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigation);
  
   BottomNavigationItem bottomNavigationItem = new BottomNavigationItem
                ("Record", ContextCompat.getColor(this, R.color.firstColor), R.drawable.ic_mic_black_24dp);
   BottomNavigationItem bottomNavigationItem1 = new BottomNavigationItem
                ("Like", ContextCompat.getColor(this, R.color.secondColor), R.drawable.ic_favorite_black_24dp);
  bottomNavigationView.addTab(bottomNavigationItem);
  bottomNavigationView.addTab(bottomNavigationItem1);

Then set your OnBottomNavigationItemClickListener

 
bottomNavigationView.setOnBottomNavigationItemClickListener(new OnBottomNavigationItemClickListener() {
            @Override
            public void onNavigationItemClick(int index) {
                 Toast.makeText(MainActivity.this, "Item " +index +" clicked", Toast.LENGTH_SHORT).show();
            }
        });

If you are using a ViewPager , you can connect to the BottomNavigationView, Set color in this way, when using view pager:

 ContextCompat.getColor(context, R.color.firstColor)
 bottomNavigationView.setUpWithViewPager(yourPager , colorResources , imageResources);

You can disable slide animation when using viewPager

bottomNavigationView.disableViewPagerSlide();

If your activity/fragment will not recreate and bottom navigation items doubled on orientation change, just can call this method

bottomNavigationView.willNotRecreate(true);

Customize

Customize with xml

  <com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
         android:id="@+id/bottomNavigation"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         app:bnv_colored_background="true"
         app:bnv_with_text="false"
         app:bnv_shadow="true"
         app:bnv_tablet="false"
         app:bnv_viewpager_slide="true"
         app:bnv_active_color="@color/colorPrimary"
         app:bnv_active_text_size="@dimen/bottom_navigation_text_size_active"
         app:bnv_inactive_text_size="@dimen/bottom_navigation_text_size_inactive"/>

or programmatically

You can activate tablet mode

 bottomNavigationView.activateTabletMode();

 bottomNavigationView.isWithText(true);

 bottomNavigationView.isColoredBackground(false);
 bottomNavigationView.setItemActiveColorWithoutColoredBackground(yourColor);

Change text active or inactive size

  bottomNavigationView.setTextActiveSize(float yoursize);
  bottomNavigationView.setTextInactiveSize(float yoursize);

Change tab programmatically

bottomNavigationView.selectTab(int position);

You can just disable BottomNavigationView shadow by calling

 bottomNavigationView.disableShadow();

You can set your custom font for item text. assets/fonts/your_font.ttf

 bottomNavigationView.setFont(Typeface.createFromAsset(getApplicationContext().getAssets(), "fonts/your_font.ttf"));

Contact

Pull requests are more than welcome.

Please fell free to contact me if there is any problem when using the library.

License

      Copyright 2016 Arman Chatikyan

  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.
Comments
  • Shadow of bottom bar covers actual content

    Shadow of bottom bar covers actual content

    It seems that the view you are creating with the gradient as a background it is actually cutting the content. In your examples the shadow looks good because you do not have any content and the background is white. I would expect to see something like the attached image where the shadow it is on top of the content.

    screenshot_20160329-100021-2

    opened by amilcar-andrade 5
  • How to set selected Tab manually?

    How to set selected Tab manually?

    Hi,

    is it possible to select the tab manually? (Using 5 tabs which have activities/fragments behind, I need to set the selected tab manually after I switch to an activity.)

    Cheers, Chris

    opened by chrjsorg 4
  • Set up with view pager keeps causing a Null pointer Exception

    Set up with view pager keeps causing a Null pointer Exception

    AS MENTIONED IN the title i've set up the view pager, the color resources, and the images. The pager is assigned to an adapter, simply i keep getting a null pointer exception somehow java.lang.RuntimeException: Unable to start activity ComponentInfo{com.mcubetechnologies.landolsi.cherni.onabupourvous/com.mcubetechnologies.landolsi.cherni.onabupourvous.MainActivity}: java.lang.NullPointerException at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2389) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2441) at android.app.ActivityThread.access$900(ActivityThread.java:151) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1354) at android.os.Handler.dispatchMessage(Handler.java:110) at android.os.Looper.loop(Looper.java:193) at android.app.ActivityThread.main(ActivityThread.java:5345) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:515) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:824) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:640) at dalvik.system.NativeStart.main(Native Method) Caused by: java.lang.NullPointerException at com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView.setUpWithViewPager(BottomNavigationView.java:366) at com.mcubetechnologies.landolsi.cherni.onabupourvous.MainActivity.onCreate(MainActivity.java:57) at android.app.Activity.performCreate(Activity.java:5343) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1088) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2343) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2441)  at android.app.ActivityThread.access$900(ActivityThread.java:151)  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1354)  at android.os.Handler.dispatchMessage(Handler.java:110)  at android.os.Looper.loop(Looper.java:193)  at android.app.ActivityThread.main(ActivityThread.java:5345)  at java.lang.reflect.Method.invokeNative(Native Method)  at java.lang.reflect.Method.invoke(Method.java:515)  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:824)  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:640)  at dalvik.system.NativeStart.main(Native Method) `

    opened by amineMpdam 2
  • Tabs being doubled on orientation change?

    Tabs being doubled on orientation change?

    Is it possible for you to reproduce this issue on your side? I'm not quite sure if its an issue on my side. I tried to set the bottomNavigationView to null before creating the tabs etc. but I still get this issue.

    opened by chrjsorg 2
  • Need Requested Feature

    Need Requested Feature

    Hi Bro , great work and really like your library , only one request to you is it possible to update library for more than 5 items and if more than 5 then arrow key appear and we can press arrow key or swipe RTL to view other options

    opened by microcian 1
  • Using it with FAB

    Using it with FAB

    Hi, i am using this bottom navigation at my MainActivity (with ViewPager), which has a FAB, but it stays behind the bottom navigation, and the snackbar event´s goes over the bottom navigation.

    What is the best approach to resolve that?

    Thanks.

    opened by igormatos 1
  • Set Typeface

    Set Typeface

    @armcha Thank for your great library and great work Is it possible to add a method which can get or set the Typeface of Bottom Navigation Items? It would be greater than normal Typeface Thank you again I'm waiting for your response

    opened by ParhamAhmadi 1
  • Tab divided into two parts...

    Tab divided into two parts...

    According to my need ..... i want to divide bottom tab into two parts 1st contain 3 tab and 2nd also 3 and between them, i want to add Floating action button ..is it possible ?..plzz elaborate ...

    opened by arpitjoshi08 1
  • item set default active image not see image when first show

    item set default active image not see image when first show

    onSizeChange() if (bottomNavigationItems.get(i).getImageResourceActive() != 0) { if (i == currentItem) icon.setImageResource(bottomNavigationItems.get(i).getImageResourceActive()); else bottomNavigationItems.get(i).getImageResource(); }

    opened by wensonli 0
  • View pager connection added

    View pager connection added

    Hello ,

    A lot of times this library will be used with a ViewPager, so I added a convenience method to connect them , even though the changes are minimal, I have found this method to be in a lot of similar implementations like this library. AlsoI made tiny code tweeks and updated the README.md to reflect the changes

    Best, Hosssam

    opened by hussamsh 0
  • When setting ImageResourceActive for the BottomNavigationItem, the icon of its cannot be initialized.

    When setting ImageResourceActive for the BottomNavigationItem, the icon of its cannot be initialized.

    https://github.com/armcha/LuseenBottomNavigation/blob/c90533e04be5faa75ceb028225a3d43da283d12a/BottomNavigationViewLibrary/src/main/java/com/luseen/luseenbottomnavigation/BottomNavigation/BottomNavigationView.java#L236

    Code of this line should be changed as below:

    icon.setImageResource(bottomNavigationItems.get(i).getImageResource());
    
    opened by cnneillee 0
  • Bug and Problem in Use this Library.

    Bug and Problem in Use this Library.

    Hello, tank you. i import your lib. and gradle is ready.

    but in my layout have problem

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="58dp"
            android:background="@android:color/holo_green_dark"
            android:minHeight="?attr/actionBarSize"
            android:titleTextColor="#ffffff">
    
        </android.support.v7.widget.Toolbar>
    
    
        <Button
            android:id="@+id/btnPayment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Payment"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"/>
    
    
        <com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" />
    
    </LinearLayout>
    
    

    Error show in Android Studio :

    java.lang.IndexOutOfBoundsException: Position must be less or equivalent than items size, items size is -1 current is 0   at com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView.onSizeChanged(BottomNavigationView.java:156)   at android.view.View.sizeChange(View.java:17641)   at android.view.View.setFrame(View.java:17603)   at android.view.View.layout(View.java:17520)   at android.view.ViewGroup.layout(ViewGroup.java:5612)   at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1741)   at android.widget.LinearLayout.layoutHorizontal(LinearLayout.java:1730)   at android.widget.LinearLayout.onLayout(LinearLayout.java:1496)   at android.view.View.layout(View.java:17523)   at android.view.ViewGroup.layout(ViewGroup.java:5612)   at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)   at android.widget.FrameLayout.onLayout(FrameLayout.java:261)   at android.view.View.layout(View.java:17523)   at android.view.ViewGroup.layout(ViewGroup.java:5612)   at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1079)   at android.view.View.layout(View.java:17523)   at android.view.ViewGroup.layout(ViewGroup.java:5612) Copy stack to clipboard   Tip: Try to refresh the layout.  
    
    opened by QuestionPython 0
  • Change background of selected item

    Change background of selected item

    How can I change background of the selected item in order to make it look like this: screen shot 2017-03-15 at 17 55 45

    I tried to do i this way: bottomNavigation.getItem(index).setColor(ContextCompat.getColor(DashboardActivity.this, R.color.colorPurpleButtonPressed)); inside of the OnBottomNavigationItemClickListener, but it causes StackOverFlow

    opened by Leonid-Kiev 0
  • setImageResourceActive problem

    setImageResourceActive problem

    Hi,

    When I set the drawable via setImageResourceActive() method, the initial drawable resource not shown for first time opened app. after select /unselect the drawable changing working. did i miss anything? can you help for this.

    |Thanks.

     final BottomNavigationView bottomNavigationView =(BottomNavigationView)findViewById(R.id.bottomNavigation);
    
            BottomNavigationItem homeNavigationItem = new BottomNavigationItem
                    ("Feed", ContextCompat.getColor(this, R.color.colorAccent), R.drawable.ic_home_icon);
            BottomNavigationItem recentsNavigationItem = new BottomNavigationItem
                    ("Recents", Color.parseColor("#553e52"), R.drawable.ic_wall_clock);
            BottomNavigationItem vaskNavigationItem = new BottomNavigationItem
                    ("Vask", Color.parseColor("#7B1FA2"), R.drawable.vask_icon);
            final BottomNavigationItem favoritesNavigationItem = new BottomNavigationItem
                    ("Favorites",Color.parseColor("#FF5252"), R.drawable.heart_shape);
    
      favoritesNavigationItem.setImageResource(R.drawable.heart_shape);
            favoritesNavigationItem.setImageResourceActive(R.drawable.vask_icon);
    
      BottomNavigationItem profileNavigationItem = new BottomNavigationItem
                    ("Profile", Color.parseColor("#FF9800"), R.drawable.ic_user_silhouette);
    
            bottomNavigationView.addTab(homeNavigationItem);
            bottomNavigationView.addTab(recentsNavigationItem);
            bottomNavigationView.addTab(vaskNavigationItem);
            bottomNavigationView.addTab(favoritesNavigationItem);
            bottomNavigationView.addTab(profileNavigationItem);
    
    opened by gurikoxo 2
Owner
Arman
Arman
Android library that provides the floating action button to sheet transition from Google's Material Design.

MaterialSheetFab Library that implements the floating action button to sheet transition from Google's Material Design documentation. It can be used wi

Gordon Wong 1.6k Dec 13, 2022
Navigation menu for Android (based off Google+ app)

RibbonMenu Navigation menu for Android (based on Google+ app). Usage Menus are created in xml as normal, adding text and an icon. In the layout you wa

David Scott 487 Nov 24, 2022
Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app)

Android SideNavigation Library Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app). Description The Go

Evgeny Shishkin 319 Nov 25, 2022
Android Library for a DrawerLayout similar to the one in Google Apps

GoogleNavigationDrawerMenu This project aims to let you use a ListView menu similar to the one in the new Google Apps (Keep, Play Music...) without ha

Jorge Martin Espinosa 267 Nov 25, 2022
Floating Action Menu for Android. Inspired by the Google Plus floating menu

android-floating-action-menu Floating Action Menu for Android. Inspired by the Google Plus floating menu. Demo Setup The simplest way to use this libr

Alessandro Crugnola 242 Nov 10, 2022
Space Navigation is a library allowing easily integrate fully customizable Google Spaces like navigation to your app.

Space-Navigation-View Introduction Space Navigation is a library allowing easily integrate fully customizable Google [Spaces][1] like navigation to yo

Arman 2k Dec 23, 2022
Frogo Android UI Kit - Frogo UI Design Kit Guideline

About This Project Follow-up project from frogo-ui-kit UI Kit for helping you in apps development Migrate from frogo-ui-kit Just renaming package com.

Frogobox 6 Nov 25, 2022
Sample to grasp screen transition flow using Navigation and BottomNavigationView.

NavigationFlowSample Navigation + BottomNavigationView を使用した画面遷移で、Destinationのフローを把握するためのサンプルです。 画面遷移時にバックグラウンドで動作しているの処理を切り替える際に有効かもしれません。 Code class

null 0 Oct 28, 2021
Frogo UI - Frogo UI Guideline

About This Project (release-and-work-in-progress ?? ??️ ??‍♀️ ⛏ ) UI Kit for helping you in apps development Avaiable for android and desktop Follow-u

Frogobox 14 Dec 14, 2022
Horoscope API for android to get the horoscope according to the sunsign

Horoscope-API. Simple Java API to get the horoscope according to the sunsign. Contents Features Implementation API Usage To-dos Credits License Featur

TheBotBox 34 Dec 2, 2022
This app reminds people to take medicine according to their respective schedule.

Medicine Reminder App Reminds people for medicine. Objective In this busy and competitive world, it is very difficult for a person to remember each an

Naman Agarwal 4 Jun 3, 2021
HideDroid is an Android app that allows the per-app anonymization of collected personal data according to a privacy level chosen by the user.

HideDroid An Android App for preserving user privacy HideDroid is an Android app that allows the per-app anonymization of collected personal data acco

null 100 Dec 12, 2022
Socially is a textView which is able to create separate clickable views according to your requirements.

Socially is a textView which is able to create separate clickable views according to your requirements.

Enes Zor 30 Oct 25, 2022
Flux is a dynamic weather that communicates the weather throughout a landscape whose details vary according to the time and the weather at that particular time.

Flux ?? Description Flux is a dynamic weather that communicates the weather throughout a landscape whose details vary according to the time and the we

null 415 Jan 4, 2023
Android application in Kotlin to know the Chinese horoscope according to the date of birth

ZodiacoChino Aplicación Android en lenguaje Kotlin para saber el horóscopo chino según la fecha de nacimiento Esta aplicación solicita el nombre, fech

ArterialK 0 Nov 19, 2021
A Tip Calculator app written in Kotlin that takes Total cost as an input and calculate tip according to the feedbacks.

Create a Tip Calculator App Code for the Android Basics in Kotlin: Create a Tip Calculator app codelab. In this codelab, you will be writing code for

Hemant Sachdeva 1 Dec 4, 2021
Portfolio application for the purpose of listing events according to the return of an API

My Event Schedule Aplicativo portifólio com a finalidade de listar eventos de ac

Ricardo Souza 2 Feb 26, 2022
An application to find out the weather according to the current location of the phone

Weather App An application to find out the weather according to the current loca

Heba Elsaid 2 Jan 1, 2022