Android App bottom navigation bar (tab) instance

Many Android applications now use the bottom navigation bar, which allows users to switch between different pages at will, and now I use the Tabhost component to customize the function of a bottom navigation bar.

Let's take a look at the frame diagram of the demo instance:

The role of each of the classes and resource files are not explained in detail, there is also a resource image (in the demo borrowed other applications of the resource picture) also does not provide, you can change their own needs of the resource picture. Code directly on individual layout files or individual classes:

[1] res/layout directory of Maintabs.xml Source:

<?xml version= "1.0" encoding= "UTF-8"? ><tabhost android:id= "@android: Id/tabhost" android:layout_width= " Fill_parent "android:layout_height=" Fill_parent "xmlns:android= "Http://schemas.android.com/apk/res/android" > <linearlayout android:orientation= "vertical" android:layout_ Width= "Fill_parent" android:layout_height= "fill_parent" > <framelayout android:id= "@android: Id/tabcontent" an Droid:layout_width= "Fill_parent" android:layout_height= "0.0dip" android:layout_weight= "1.0"/> <TabWidget and Roid:id= "@android: Id/tabs" android:visibility= "Gone" android:layout_width= "Fill_parent" android:layout_height= " Wrap_content "android:layout_weight=" 0.0 "/> <Radiogroup android:gravity= "Center_vertical" android:layout_gravity= "bottom" android:orientation= "horizontal" android:id= "@id/main_radio" android:background= "@drawable/MAINTAB_TOOLBAR_BG"Android:layout_width= "Fill_parent" android:layout_height= "wrap_content" > <radiobutton android:id= "@id/radio_button0" and roid:layout_margintop= "2.0dip" android:text= "@string/main_home" android:drawabletop= "@drawable/icon_1_n" style= "@ Style/main_tab_bottom "/> <radiobutton android:id=" @id/radio_button1 "android:layout_margintop=" 2.0d                IP "android:text=" @string/main_news "android:drawabletop=" @drawable/icon_2_n "style=" @style/main_tab_bottom "/> <radiobutton android:id= "@id/radio_button2" android:layout_margintop= "2.0dip" android:text= "@string/main_mana Ge_date "android:drawabletop=" @drawable/icon_3_n "style=" @style/main_tab_bottom "/> <radiobutton and Roid:id= "@id/radio_button3" android:layout_margintop= "2.0dip" android:text= "@string/main_friends" Android: drawabletop= "@drawable/icon_4_n" style= "@style/main_tab_bottom"/> <radiobutton android:id= "@id/radi O_button4 "android:layout_margintop=" 2.0dip "Android:text= "@string/more" android:drawabletop= "@drawable/icon_5_n" style= "@style/main_tab_bottom"/> </radio Group> </LinearLayout></TabHost>

[2] res/drawable under the Home_btn_bg.xml Source:

<?xml version= "1.0" encoding= "UTF-8"?><selector  xmlns:android= "http://schemas.android.com/ Apk/res/android ">    <item android:state_focused=" true "android:state_enabled=" true "android:state_pressed = "false" android:drawable= "@drawable/home_btn_bg_s"/>    <item android:state_enabled= "true" Android:state_ Pressed= "true" android:drawable= "@drawable/home_btn_bg_s"/>    <item android:state_enabled= "true" Android: State_checked= "true" android:drawable= "@drawable/home_btn_bg_d"/>    <item android:drawable= "@drawable/ Transparent "/></selector>

[3] res/values under the source code:

Dimens.xml Source

<?xml version= "1.0" encoding= "Utf-8"?><resources> <dimen name= "Bottom_tab_font_size" >10.0sp</ dimen> <dimen name= "bottom_tab_padding_up" >5.0dip</dimen> <dimen name= "Bottom_tab_padding_ Drawable ">2.0dip</dimen> <dimen name=" switch_logo_bottom_padding ">30.0sp</dimen> <dimen Name= "Widget_height" >100.0dip</dimen> <dimen name= "sta_height" >48.0dip</dimen> <dimen name = "Large_padding_length" >20.0dip</dimen> <dimen name= "Widget_write_margin_top" >19.0dip</dimen > <dimen name= "widget_write_margin_left" >10.0dip</dimen> <dimen name= "Widget_content_margin_top" >20.0dip</dimen> <dimen name= "Widget_content_margin_left" >10.0dip</dimen> <dimen name= " Widget_logo_size ">35.0dip</dimen> <dimen name=" title_height ">74.0dip</dimen> <dimen name=" New_blog_size ">70.0dip</dimen> <dimen name=" emOtion_item_view_height ">13.299988dip</dimen> <dimen name=" Splash_test_top_margin_top ">20.0dip< /dimen> <dimen name= "splash_test_center_margin_right" >0.0dip</dimen> <dimen name= "Title_text_ Size ">20.0sp</dimen> <dimen name=" normal_padding_length ">10.0dip</dimen> <dimen name=" No_ Result_padding_length ">50.0dip</dimen></resources>

Drawables.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?><resources>    <item type= "drawable" name= "Ltgray" ># fff4f4f4</item>    <item type= "drawable" name= "Ltyellow" > #fffff4db </item>    <item type= " Drawable "Name=" Black "> #ff000000 </item>    <item type=" drawable "name=" Transparent "> #00000000 < /item>    <item type= "drawable" name= "Widget_edit_block_bg_normal" > @android: Color/transparent</item >    <item type= "drawable" name= "Transparent_background" > #99000000 </item>    <item type= " Drawable "name=" List_background "> #fff4f4f4 </item>    <item type=" drawable "Name=" Namcard_picker_bkg_ Normal "> #ff272727 </item>    <item type=" drawable "name=" Namcard_picker_bkg_hover "> #ff333333 </ Item></resources>

Ids.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?><resources> <item    type= "id" name= "main_radio" >  False</item>    <item type= "id" name= "radio_button0" >false</item>    <item Type= "id" name= "radio_button1" >false</item>    <item type= "id" name= "radio_button2" >  False</item>    <item type= "id" name= "Radio_button3" >false</item>    <item Type= "id" name= "radio_button4" >false</item></resources>

Strings.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?><resources> <string    name= "Hello" >hello world, maintabactivity!</string>    <string name= "app_name" >TabDemo</string>    <string name= " Main_news "> Messages </string>    <string name=" Main_home "> Home </string>    <string name=" More " > More </string>    <string name= "Main_manage_date" > Time </string>    <string name= "Main_ Friends "> Friends </string></resources>

Styles.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?><resources> <style name= "Main_tab_bottom" > <item nam E= "Android:textsize" > @dimen/bottom_tab_font_size</item> <item name= "Android:textcolor" > #ffffffff & lt;/item> <item name= "android:ellipsize" >marquee</item> <item name= "Android:gravity" >ce nter_horizontal</item> <item name= "Android:background" > @drawable/home_btn_bg</item> <it EM name= "Android:paddingtop" > @dimen/bottom_tab_padding_up</item> <item name= "Android:paddingbottom" & gt;2.0dip</item> <item name= "android:layout_width" >fill_parent</item> <item name= "Andro Id:layout_height ">wrap_content</item> <item name=" Android:layout_marginbottom ">2.0dip</item > <item name= "Android:button" >@NULL</item> <item name= "Android:singleline" >true</item> <item name= "android:drawablepadding" > @dimen/bottom_tab_padding_drawable</item> &lt ; Item Name= "Android:layout_weight" >1.0</item> </style></resources>

[4] Src/com.andyidea.tabdemo package below the various UI interface class source code:

Maintabactivity.java Source:

 PackageCom.andyidea.tabdemo;Importandroid.app.TabActivity;Importandroid.content.Intent;ImportAndroid.os.Bundle;ImportAndroid.view.Window;ImportAndroid.widget.CompoundButton;ImportAndroid.widget.RadioButton;ImportAndroid.widget.CompoundButton.OnCheckedChangeListener;ImportAndroid.widget.TabHost; Public classMaintabactivityextendsTabactivityImplementsoncheckedchangelistener{PrivateTabhost Mtabhost; PrivateIntent maintent; PrivateIntent mbintent; PrivateIntent mcintent; PrivateIntent mdintent; PrivateIntent meintent; /**Called when the activity is first created.*/@Override Public voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Requestwindowfeature (Window.feature_no_title);                Setcontentview (R.layout.maintabs);  This. maintent =NewIntent ( This, Aactivity.class);  This. mbintent =NewIntent ( This, Bactivity.class);  This. mcintent =NewIntent ( This, Cactivity.class);  This. mdintent =NewIntent ( This, Dactivity.class);  This. meintent =NewIntent ( This, Eactivity.class); ((RadioButton) Findviewbyid (R.id.radio_button0)). Setoncheckedchangelistener ( This); ((RadioButton) Findviewbyid (R.id.radio_button1)). Setoncheckedchangelistener ( This); ((RadioButton) Findviewbyid (R.id.radio_button2)). Setoncheckedchangelistener ( This); ((RadioButton) Findviewbyid (R.id.radio_button3)). Setoncheckedchangelistener ( This); ((RadioButton) Findviewbyid (R.id.radio_button4)). Setoncheckedchangelistener ( This);    Setupintent (); } @Override Public voidOnCheckedChanged (Compoundbutton Buttonview,BooleanisChecked) {        if(isChecked) {Switch(Buttonview.getid ()) { CaseR.id.radio_button0: This. Mtabhost.setcurrenttabbytag ("A_tab");  Break;  CaseR.id.radio_button1: This. Mtabhost.setcurrenttabbytag ("B_tab");  Break;  CaseR.id.radio_button2: This. Mtabhost.setcurrenttabbytag ("C_tab");  Break;  CaseR.id.radio_button3: This. Mtabhost.setcurrenttabbytag ("D_tab");  Break;  CaseR.id.radio_button4: This. Mtabhost.setcurrenttabbytag ("More_tab");  Break; }        }            }        Private voidsetupintent () { This. Mtabhost =Gettabhost (); Tabhost Localtabhost= This. Mtabhost; Localtabhost.addtab (Buildtabspec ("A_tab", R.string.main_home, R.drawable.icon_1_n, This. maintent)); Localtabhost.addtab (Buildtabspec ("B_tab", R.string.main_news, R.drawable.icon_2_n, This. mbintent)); Localtabhost.addtab (Buildtabspec ("C_tab", R.string.main_manage_date, R.drawable.icon_3_n, This. mcintent)); Localtabhost.addtab (Buildtabspec ("D_tab", R.string.main_friends, R.drawable.icon_4_n, This. mdintent)); Localtabhost.addtab (Buildtabspec ("More_tab", R.string.more, R.drawable.icon_5_n, This. meintent)); }        PrivateTabhost.tabspec Buildtabspec (String tag,intReslabel,intResicon,FinalIntent content) {        return  This. Mtabhost.newtabspec (TAG). Setindicator (GetString (Reslabel), Getresources (). getdrawable (Resicon)). Setcon    Tent (content); }}

Aactivity.java and Bactivity.java, Cactivity.java, Dactivity.java, Eactivity.java in the source code are the same, just to show the different interface display, it is only listed here Source code for Aactivity.java:

 PackageCom.andyidea.tabdemo;Importandroid.app.Activity;ImportAndroid.os.Bundle;Importandroid.view.Gravity;ImportAndroid.widget.TextView; Public classAactivityextendsactivity{@Override Public voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate); TextView TV=NewTextView ( This); Tv.settext ("This is A activity!");        Tv.setgravity (Gravity.center);    Setcontentview (TV); }}

Finally, let's not forget to register each Activity component in the Androidmanifest.xml file. OK, now let's look at what our program is running:

To this realization of a more popular bottom navigation bar function, reproduced please indicate the source, thank you!

Because of the need for the example source of children's shoes more, I still put the source code into the resources for everyone to download: http://download.csdn.net/detail/cjjky/4236055

Android App bottom navigation bar (tab) instance