The bottom navigation implementation summary of Android development

There are many ways to implement the bottom navigation. At present, the more commonly used is the Radiogroup+fragment,fragmenttabhost+fragment,bottomnavigationbar three ways, the following are described separately:

One, Radiogroup+fragment way: This way is the oldest way to implement, the code is complex.

1. Layout:

<?xml version= "1.0" encoding= "UTF-8"?>


<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"


Android:layout_width= "Match_parent"


android:layout_height= "Match_parent"


android:orientation= "Vertical" >





<framelayout


Android:id= "@+id/content"


Android:layout_width= "Match_parent"


android:layout_height= "0DP"


Android:layout_weight= "1.0"


android:background= "@color/white"/>





<view


Android:layout_width= "Match_parent"


android:layout_height= "1DP"


android:background= "@color/view"/>





<radiogroup


Android:id= "@+id/group_home"


Android:layout_width= "Match_parent"


android:layout_height= "Wrap_content"


android:layout_gravity= "Bottom"


Android:background= "#4A192F"


Android:gravity= "Center_vertical"


android:orientation= "Horizontal" >





<radiobutton


Android:id= "@+id/radio_main"


style= "@style/home_tab_bottom"


Android:checked= "true"


android:drawabletop= "@drawable/home_tab_main_selector"


android:text= "Home"


Android:textcolor= "@color/TITLEBAR_BG"


Android:textsize= "14sp"/>





<radiobutton


Android:id= "@+id/radio_assortment"


style= "@style/home_tab_bottom"


android:drawabletop= "@drawable/home_tab_assortment_selector"


android:text= "Classification"


Android:textcolor= "@color/white"


Android:textsize= "14sp"/>





<radiobutton


Android:id= "@+id/radio_car"


style= "@style/home_tab_bottom"


android:drawabletop= "@drawable/home_tab_car_selector"


android:text= "Shopping Cart"


Android:textcolor= "@color/white"


Android:textsize= "14sp"/>





<radiobutton


Android:id= "@+id/radio_recommend"


style= "@style/home_tab_bottom"


android:drawabletop= "@drawable/home_tab_recommend_selector"


android:text= "Hot List"


Android:textcolor= "@color/white"


Android:textsize= "14sp"/>





<radiobutton


Android:id= "@+id/radio_my"


style= "@style/home_tab_bottom"


android:drawabletop= "@drawable/home_tab_my_selector"


Android:text= "Mine."


Android:textcolor= "@color/white"


Android:textsize= "14sp"/>





</RadioGroup>


</LinearLayout>

2.java Code:

Import Android.os.Bundle;


Import android.support.v4.app.FragmentActivity;


Import Android.support.v4.app.FragmentManager;


Import android.support.v4.app.FragmentTransaction;


Import Android.widget.RadioButton;


Import Android.widget.RadioGroup;





Import CN.ZMIT.BOTTOMNAVIGATIONDEMO.R;


Import cn.zmit.bottomnavigationdemo.fragment.FiveFragment;


Import cn.zmit.bottomnavigationdemo.fragment.FourFragment;


Import cn.zmit.bottomnavigationdemo.fragment.OneFragment;


Import cn.zmit.bottomnavigationdemo.fragment.ThreeFragment;


Import cn.zmit.bottomnavigationdemo.fragment.TwoFragment;





/**


* Created by the Administrator on 2016/8/9.


* Radiogroup+fragment


*/


public class Oneactivity extends Fragmentactivity {


Private Radiogroup Mradiogroup;





Private RadioButton radio_main;//Homepage





Private RadioButton radio_my;//mine.





Private RadioButton radio_assortment;//Classification





Private RadioButton radio_car;//Shopping Cart





Private RadioButton radio_recommend;//Hot List





Private Onefragment monefragment;//Homepage


Private Twofragment mtwofragment;//Classification


Private threefragment mthreefragment;//Shopping Cart


Private fourfragment mfourfragment;//Hot List


Private Fivefragment mfivefragment;//mine.


Private Fragmentmanager Fragmentmanager;





@Override


protected void OnCreate (Bundle savedinstancestate) {


Super.oncreate (savedinstancestate);


Setcontentview (R.layout.activity_one);


Fragmentmanager = Getsupportfragmentmanager ();


Init ();//Get ID


Settab (1);//Set home page as default display


}





/**


* Get ID


*/


Private Radiogroup.oncheckedchangelistener Oncheckedchangelistener;


private int checkid;





private void init () {


Mradiogroup = (radiogroup) Findviewbyid (r.id.group_home);


Radio_main = (RadioButton) Findviewbyid (R.id.radio_main);


Radio_my = (RadioButton) Findviewbyid (r.id.radio_my);


Radio_assortment = (RadioButton) Findviewbyid (r.id.radio_assortment);


Radio_car = (RadioButton) Findviewbyid (R.id.radio_car);


Radio_recommend = (RadioButton) Findviewbyid (r.id.radio_recommend);


Oncheckedchangelistener = new Radiogroup.oncheckedchangelistener () {


@Override


public void OnCheckedChanged (radiogroup group, int checkedid) {


if (Checkid!= checkedid) {


Switch (checkedid) {


Case R.id.radio_main:


Settab (1);


Changetab (1);


Break


Case R.ID.RADIO_MY:


Changetab (5);


Settab (5);


Break


Case R.id.radio_assortment:


Changetab (2);


Settab (2);


Break


Case R.id.radio_car:


Settab (3);


Changetab (3);


Break


Case R.id.radio_recommend:


Settab (4);


Changetab (4);


Break


}


}


Checkid = Checkedid;


}


};


Mradiogroup.setoncheckedchangelistener (Oncheckedchangelistener);


}





/***


* Changes when tab is switched


*


* @param i


*/


private void Changetab (int i) {





switch (i) {


Case 1:


Radio_main.settextcolor (Getresources (). GetColor (R.COLOR.TITLEBAR_BG));


Radio_my.settextcolor (Getresources (). GetColor (R.color.white));


Radio_assortment.settextcolor (Getresources (). GetColor (R.color.white));


Radio_recommend.settextcolor (Getresources (). GetColor (R.color.white));


Radio_car.settextcolor (Getresources (). GetColor (R.color.white));


Break


Case 2:


Radio_main.settextcolor (Getresources (). GetColor (R.color.white));


Radio_assortment.settextcolor (Getresources (). GetColor (R.COLOR.TITLEBAR_BG));


Radio_my.settextcolor (Getresources (). GetColor (R.color.white));


Radio_recommend.settextcolor (Getresources (). GetColor (R.color.white));


Radio_car.settextcolor (Getresources (). GetColor (R.color.white));





Break


Case 3:


Radio_main.settextcolor (Getresources (). GetColor (R.color.white));


Radio_my.settextcolor (Getresources (). GetColor (R.color.white));


Radio_car.settextcolor (Getresources (). GetColor (R.COLOR.TITLEBAR_BG));


Radio_recommend.settextcolor (Getresources (). GetColor (R.color.white));


Radio_assortment.settextcolor (Getresources (). GetColor (R.color.white));


Break


Case 4:


Radio_main.settextcolor (Getresources (). GetColor (R.color.white));


Radio_my.settextcolor (Getresources (). GetColor (R.color.white));


Radio_car.settextcolor (Getresources (). GetColor (R.color.white));


Radio_recommend.settextcolor (Getresources (). GetColor (R.COLOR.TITLEBAR_BG));


Radio_assortment.settextcolor (Getresources (). GetColor (R.color.white));


Break


Case 5:


Radio_main.settextcolor (Getresources (). GetColor (R.color.white));


Radio_my.settextcolor (Getresources (). GetColor (R.COLOR.TITLEBAR_BG));


Radio_car.settextcolor (Getresources (). GetColor (R.color.white));


Radio_recommend.settextcolor (Getresources (). GetColor (R.color.white));


Radio_assortment.settextcolor (Getresources (). GetColor (R.color.white));


Break


}


}





/***


* Toggle Tab


*/


private void Settab (int index) {


Fragmenttransaction transaction = Fragmentmanager.begintransaction ();


Hidefragments (transaction);


Switch (index) {


Case 1:


if (monefragment = = null) {


Monefragment = new Onefragment ();


Transaction.add (R.id.content, monefragment);


} else {


Transaction.show (monefragment);


Monefragment.setuservisiblehint (TRUE);


}


Break


Case 2:


if (mtwofragment = = null) {


Mtwofragment = new Twofragment ();


Transaction.add (R.id.content, mtwofragment);


} else {


Transaction.show (mtwofragment);


Mtwofragment.setuservisiblehint (TRUE);


}


Break


Case 3:


if (mthreefragment = = null) {


Mthreefragment = new Threefragment ();


Transaction.add (R.id.content, mthreefragment);


} else {


Transaction.show (mthreefragment);


Mthreefragment.setuservisiblehint (TRUE);


}


Break


Case 4:


if (mfourfragment = = null) {


Mfourfragment = new Fourfragment ();


Transaction.add (R.id.content, mfourfragment);


} else {


Transaction.show (mfourfragment);


Mfourfragment.setuservisiblehint (TRUE);


}


Break


Case 5:


if (mfivefragment = = null) {


Mfivefragment = new Fivefragment ();


Transaction.add (R.id.content, mfivefragment);


} else {


Transaction.show (mfivefragment);


Mfivefragment.setuservisiblehint (TRUE);


}


Break


}


Transaction.commit ();


}





private void Hidefragments (Fragmenttransaction transaction) {





if (monefragment!= null) {


Transaction.hide (monefragment);


}


if (mtwofragment!= null) {


Transaction.hide (mtwofragment);


}


if (mthreefragment!= null) {


Transaction.hide (mthreefragment);


}


if (mfourfragment!= null) {


Transaction.hide (mfourfragment);


}


if (mfivefragment!= null) {


Transaction.hide (mfivefragment);


}


}


}


Effect Chart:

Radiogroup+fragment Way

Second, Fragmenttabhost+fragment: now commonly used to implement the way, the code relatively concise some.

1. Layout:

<?xml version= "1.0" encoding= "Utf-8"?>


<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"


Android:layout_width= "Match_parent"


android:layout_height= "Match_parent"


android:orientation= "Vertical" >





<framelayout


Android:id= "@+id/realtabcontent"


Android:layout_width= "Match_parent"


android:layout_height= "0dip"


android:layout_weight= "1"/>





<android.support.v4.app.fragmenttabhost


Android:id= "@android: Id/tabhost"


Android:layout_width= "Match_parent"


android:layout_height= "Wrap_content"


android:background= "#4A192F" >





<framelayout


Android:id= "@android: Id/tabcontent"


Android:layout_width= "0DP"


android:layout_height= "0DP"


android:layout_weight= "0"/>


</android.support.v4.app.FragmentTabHost>





</LinearLayout>

Tab_item_view layout:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:gravity= "Center"
android:orientation= "Vertical" >

<imageview
Android:id= "@+id/imageview"
android:layout_margintop= "5DP"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:focusable= "false"
android:padding= "3DP"/>

<textview
Android:id= "@+id/textview"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:textcolor= "@color/tab_text"
Android:textsize= "14sp"/>

</LinearLayout>

2.java Code:

Import Android.os.Bundle;


Import android.support.v4.app.FragmentActivity;


Import Android.support.v4.app.FragmentTabHost;


Import Android.view.LayoutInflater;


Import Android.view.View;


Import Android.widget.ImageView;


Import Android.widget.TabHost;


Import Android.widget.TextView;





Import CN.ZMIT.BOTTOMNAVIGATIONDEMO.R;


Import cn.zmit.bottomnavigationdemo.fragment.FiveFragment;


Import cn.zmit.bottomnavigationdemo.fragment.FourFragment;


Import cn.zmit.bottomnavigationdemo.fragment.OneFragment;


Import cn.zmit.bottomnavigationdemo.fragment.ThreeFragment;


Import cn.zmit.bottomnavigationdemo.fragment.TwoFragment;





/**


* Created by the Administrator on 2016/8/9.


* Fragmenttabhost+fragment


*/


public class Twoactivity extends Fragmentactivity {


@Override


protected void OnCreate (Bundle savedinstancestate) {


Super.oncreate (savedinstancestate);


Setcontentview (R.layout.activity_two);


Initview ();


}





Private Fragmenttabhost Mtabhost;





/**


* Layout Filler


*


*/


Private Layoutinflater Mlayoutinflater;





/**


* Fragment Array interface


*


*/


Private Class mfragmentarray[] = {Onefragment.class, twofragment.class,


Threefragment.class, Fourfragment.class, fivefragment.class};


/**


* Storing an array of pictures


*


*/


private int mimagearray[] = {R.drawable.home_tab_main_selector,


R.drawable.home_tab_assortment_selector, R.drawable.home_tab_car_selector,


R.drawable.home_tab_recommend_selector, r.drawable.home_tab_my_selector};





/**


* Optional Card text


*


*/


Private String mtextarray[] = {"Home page", "category", "Shopping cart", "Hot List", "my"};





/**


* Initialize Component


*/


private void Initview () {


Mlayoutinflater = Layoutinflater.from (this);





Find Tabhost


Mtabhost = (fragmenttabhost) Findviewbyid (Android. R.id.tabhost);


Mtabhost.setup (this, Getsupportfragmentmanager (), r.id.realtabcontent);


Get the number of fragment


int count = Mfragmentarray.length;


for (int i = 0; I &amp;amp;amp;lt; count; i++) {


Set icons, text, and content for each tab button


Tabhost.tabspec Tabspec = Mtabhost.newtabspec (mtextarray[i))


. Setindicator (Gettabitemview (i));


Add the tab button to the Tab tab


Mtabhost.addtab (Tabspec, mfragmentarray[i], NULL);


}


}





/**


*


* Set the icon and text for each tab button


*/


Private View gettabitemview (int index) {


View view = Mlayoutinflater.inflate (R.layout.tab_item_view, NULL);


ImageView ImageView = (imageview) View.findviewbyid (R.id.imageview);


Imageview.setbackgroundresource (Mimagearray[index]);


TextView TextView = (TextView) View.findviewbyid (R.id.textview);


Textview.settext (Mtextarray[index]);


return view;


}


}

Fragmenttabhost+fragment Way

Third, Bottomnavigationbar: The latest way to achieve.

Before you use it, you need to be in the Android Studio

1. Layout:

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:orientation= "Vertical" >

<framelayout
Android:id= "@+id/layframe"
Android:layout_width= "Match_parent"
android:layout_height= "0DP"
android:layout_weight= "1"/>

<com.ashokvarma.bottomnavigation.bottomnavigationbar
Android:id= "@+id/bottom_navigation_bar"
Android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
android:layout_gravity= "Bottom"/>

</LinearLayout>

2.java Code:

Import Android.os.Bundle;


Import android.support.v4.app.Fragment;


Import Android.support.v4.app.FragmentManager;


Import android.support.v4.app.FragmentTransaction;


Import android.support.v7.app.AppCompatActivity;





Import Com.ashokvarma.bottomnavigation.BottomNavigationBar;


Import Com.ashokvarma.bottomnavigation.BottomNavigationItem;





Import java.util.ArrayList;





Import CN.ZMIT.BOTTOMNAVIGATIONDEMO.R;


Import cn.zmit.bottomnavigationdemo.fragment.AssortmentFragment;


Import cn.zmit.bottomnavigationdemo.fragment.CarFragment;


Import cn.zmit.bottomnavigationdemo.fragment.MainFragment;


Import cn.zmit.bottomnavigationdemo.fragment.MySpaceFragment;


Import cn.zmit.bottomnavigationdemo.fragment.RecommendFragment;





/**


* Created by the Administrator on 2016/8/9.


* Bottomnavigationbar


*/


public class Threeactivity extends Appcompatactivity implements Bottomnavigationbar.ontabselectedlistener {


Private arraylist&lt;fragment&gt; fragments;





@Override


protected void OnCreate (Bundle savedinstancestate) {


Super.oncreate (savedinstancestate);


Setcontentview (R.layout.activity_three);


Bottomnavigationbar Bottomnavigationbar = (bottomnavigationbar) Findviewbyid (R.id.bottom_navigation_bar);


Bottomnavigationbar.setmode (bottomnavigationbar.mode_fixed);


Bottomnavigationbar.setbackgroundstyle (bottomnavigationbar.background_style_static);


Bottomnavigationbar.setbarbackgroundcolor (r.color.bg);


Bottomnavigationbar.additem (New Bottomnavigationitem (R.drawable.home_tab_main_selector, "Home"))


. AddItem (New Bottomnavigationitem (R.drawable.home_tab_assortment_selector, category))


. AddItem (New Bottomnavigationitem (r.drawable.home_tab_car_selector, "Shopping cart")


. AddItem (New Bottomnavigationitem (R.drawable.home_tab_recommend_selector, "Hot List")


. AddItem (New Bottomnavigationitem (R.drawable.home_tab_my_selector, "my")


. setfirstselectedposition (0)


. Initialise ();


Fragments = Getfragments ();


Setdefaultfragment ();


Bottomnavigationbar.settabselectedlistener (this);


}





/**


* Set the default


*/


private void Setdefaultfragment () {


Fragmentmanager fm = Getsupportfragmentmanager ();


Fragmenttransaction transaction = Fm.begintransaction ();


Transaction.replace (R.id.layframe, Mainfragment.newinstance ("Home"));


Transaction.commit ();


}





Private Arraylist&lt;fragment&gt; getfragments () {


arraylist&lt;fragment&gt; fragments = new arraylist&lt;&gt; ();


Fragments.add (Mainfragment.newinstance ("homepage"));


Fragments.add (assortmentfragment.newinstance ("Classification"));


Fragments.add (carfragment.newinstance ("Shopping cart"));


Fragments.add (recommendfragment.newinstance ("Hot List"));


Fragments.add (Myspacefragment.newinstance ("my"));


return fragments;


}





@Override


public void ontabselected (int position) {


if (fragments!= null) {


if (Position &lt; Fragments.size ()) {


Fragmentmanager fm = Getsupportfragmentmanager ();


Fragmenttransaction ft = fm.begintransaction ();


Fragment Fragment = fragments.get (position);


if (fragment.isadded ()) {


Ft.replace (R.id.layframe, fragment);


} else {


Ft.add (R.id.layframe, fragment);


}


Ft.commitallowingstateloss ();


}


}





}





@Override


public void ontabunselected (int position) {


if (fragments!= null) {


if (Position &lt; Fragments.size ()) {


Fragmentmanager fm = Getsupportfragmentmanager ();


Fragmenttransaction ft = fm.begintransaction ();


Fragment Fragment = fragments.get (position);


Ft.remove (fragment);


Ft.commitallowingstateloss ();


}


}


}





@Override


public void ontabreselected (int position) {





}


}