Android Bottom Navigation Bottomnavigationbar

Project Address:

Https://github.com/Ashok-Varma/BottomNavigation

Reference

1.http://www.jianshu.com/p/0550500f8f56

2.http://blog.csdn.net/qq_16131393/article/details/51419901

1. Style

• The action of the bottom navigation is usually 3-5, less than 3 recommended tab, more than three recommended use of navigation drawer
• When switching, use cross-fade animations to avoid lateral movement between views

2, Fixed, shifting

Bottom navigation, there are two types of mode: fixed, shifting, respectively

Fixed:

Shifting:

3. Code implementation

1. Dependence:

compile ' com.ashokvarma.android:bottom-navigation-bar:1.4.1 '

2. layout file:

< Com.ashokvarma.bottomnavigation.BottomNavigationBar         Android:id = "@+id/bottom_navigation_bar"         android:layout_width= "Match_parent"        android:layout_height= "Wrap_ Content "        android:layout_gravity=" Bottom "/>        <!--  app:bnbautohideenabled= "false"/> --

3, the implementation of activity, the parameters of attention

1. Set the navigation bar mode: SetMode ()

Attribute: mode_fixed, Mode_shifting,mode_default
Method: SetMode () values:mode_fixed, mode_shifting

. SetMode (bottomnavigationbar.mode_fixed);

2. Set the navigation bar background mode: Setbackgroundstyle ()

Attribute: background_style_static, Background_style_ripple,background_style_default

Method: Setbackgroundstyle () values:background_style_static, background_style_ripple

. Setbackgroundstyle (Bottomnavigationbar.background_style_ripple)      

3. Set Bottomnavigationitem color

Attributes: bnbactivecolor, Bnbinactivecolor, Bnbbackgroundcolor value:color Value or resource
Methods: setactivecolor, Setinactivecolor, Setbarbackgroundcolor value:color Value or resource

Bottomnavigationitem.setactivecolorresource (R.color.primary)

4. Add Tag Badgeitem

New Badgeitem ()                . Setborderwidth (4).                Setbackgroundcolorresource (R.color.blue)                . SetText ( "5")                . Sethideonselect (autohide.ischecked ());  //TODO control note disappears or does not disappear     Bottomnavigationbar                AddItem (new Bottomnavigationitem (R.DRAWABLE.IC_HOME_WHITE_24DP, "home") ). Setactivecolorresource (R.color.orange). Setbadgeitem (Numberbadgeitem))
//TODO settings Badgeitem Default Hide Note This code after adding Bottomnavigationitem
Numberbadgeitem.hide ();

5. Set up Event listener Tabchangelistener

Bottomnavigationbar.settabselectedlistener (new  Bottomnavigationbar.ontabselectedlistener () {            @ Override            publicvoid ontabselected (int  position) {            }            @Override              Public void ontabunselected (int  position) {]            }            @Override            public  void ontabreselected (int  position) {            }        });

Show

Mode_fixed+background_style_static effect

De_fixed+background_style_ripple effect

Mode_shifting+background_style_static effect

Mode_shifting+background_style_ripple effect

Implementation of the case

Java

 Public classMainactivityextendsAppcompatactivityImplementsBottomnavigationbar.ontabselectedlistener {@BindView (r.id.bottom_navigation_bar) Bottomnavigationbar MBottomN    Avigationbar;    @BindView (R.id.fragment_container) framelayout mframelayout; Privatebookfragment mbookfragment; Privatelikefragment mlikefragment; Privateuserfragment muserfragment; @Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Setcontentview (R.layout.activity_main); Butterknife.bind ( This);    Initnavigationbar (); }    Private voidInitnavigationbar () {Mbottomnavigationbar.settabselectedlistener ( This);        Mbottomnavigationbar.setmode (bottomnavigationbar.mode_fixed);        Mbottomnavigationbar.setbackgroundstyle (bottomnavigationbar.background_style_ripple); Mbottomnavigationbar. AddItem (NewBottomnavigationitem (r.drawable.literature_100, "book"). Setactivecolorresource (R.color.orange)). AddItem (NewBottomnavigationitem (r.drawable.like_100, "collection"). Setactivecolorresource (R.color.teal)). AddItem (NewBottomnavigationitem (r.drawable.user_100, "Settings"). Setactivecolorresource (R.color.blue)). Setfirstselectedposition (0). Initialise (); }    /*** Set the default*/    Private voidsetdefaultfragment () {Fragmentmanager fm=Getsupportfragmentmanager (); Fragmenttransaction Transaction=fm.begintransaction (); Mbookfragment=bookfragment.newinstance ();        Transaction.replace (R.id.fragment_container, mbookfragment);    Transaction.commit (); } @Override Public voidOntabselected (intposition) {LOG.D ("Ontabselected", "ontabselected:" +position); Fragmentmanager FM=Getsupportfragmentmanager (); Fragmenttransaction Transaction=fm.begintransaction (); Switch(position) { Case0:                if(Mbookfragment = =NULL) {mbookfragment=bookfragment.newinstance ();                } transaction.replace (R.id.fragment_container, mbookfragment);  Break;  Case1:                if(Mlikefragment = =NULL) {mlikefragment=likefragment.newinstance ();                } transaction.replace (R.id.fragment_container, mlikefragment);  Break;  Case2:                if(Muserfragment = =NULL) {muserfragment=userfragment.newinstance ();                } transaction.replace (R.id.fragment_container, muserfragment);  Break; default:                 Break; }        //Transaction CommitTransaction.commit (); } @Override Public voidOntabunselected (intposition) {LOG.D ("Ontabunselected", "ontabunselected:" +position); } @Override Public voidOntabreselected (intposition) {LOG.D ("Ontabreselected", "ontabreselected:" +position); }}

Xml

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns: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"android:orientation= "vertical"Tools:context= "Com.ryan.simplereading.MainActivity">    <FramelayoutAndroid:id= "@+id/fragment_container"Android:layout_width= "Match_parent"Android:layout_height= "0DP"Android:layout_weight= "1"/>    <Com.ashokvarma.bottomnavigation.BottomNavigationBarAndroid:id= "@+id/bottom_navigation_bar"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"android:layout_gravity= "Bottom"/></LinearLayout>

Android Bottom Navigation Bottomnavigationbar