Many Android apps now use the bottom navigation bar, which allows users to switch to 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 demo instance's frame chart:
The role of each of these classes and resource files are not explained in detail, and the resource picture (borrowed from other applications in the demo resource picture) is not available, you can change their own needs of the resource picture. Code directly on each layout file or individual class:
1, Res/layout directory under the 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 "android:layout_width=" Fill_parent "Android:layout_" height= "0.0dip" android:layout_weight= "1.0"/> <tabwidget android: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" an Droid:id= "@id/main_radio" android:background= "@drawable/maintab_toolbar_bg" android:layout_width= "Fill_parent" a ndroid:layout_height= "Wrap_content" > <RadioButton android:id= "@id/radio_button0" android:layout_margintop= "2.0dip" android:text= "@string/main_home" android:drawabletop= "@drawable/icon_1_n" style= "@style/main_tab_bottom"/> <radiobutton android:id= "@id/rad Io_button1 "android:layout_margintop=" 2.0dip "android:text=" @string/main_news "android:drawabletop=" @drawable Icon_2_n "style=" @style/main_tab_bottom "/> <radiobutton android:id=" @id/radio_button2 "Android:layout_marg intop= "2.0dip" android:text= "@string/main_manage_date" android:drawabletop= "@drawable/icon_3_n" style= "@style Main_tab_bottom "/> <radiobutton android:id=" @id/radio_button3 "android:layout_margintop=" 2.0dip "android:t ext= "@string/main_friends" android:drawabletop= "@drawable/icon_4_n" style= "@style/main_tab_bottom"/> <radi Obutton android:id= "@id/radio_button4" android:layout_margintop= "2.0dip" android:text= "@string/more" Android:
drawabletop= "@drawable/icon_5_n" style= "@style/main_tab_bottom"/> </RadioGroup> </LinearLayout> </TabHost>
2, res/drawable under the Home_btn_bg.xml Source:
<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 "> Message </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 Name= "Android:textsize" > @dimen/bottom_tab_font_size</item> <item name= "Android:textcolor" ># ffffffff</item> <item name= "android:ellipsize" >marquee</item> <item name= "android:gravity" & gt;center_horizontal</item> <item name= "Android:background" > @drawable/home_btn_bg</item> <i TEM name= "Android:paddingtop" > @dimen/bottom_tab_padding_up</item> <item name= "Android:paddingbottom" >2.0dip</item> <item name= "android:layout_width" >fill_parent</item> <item name= "Android: Layout_height ">wrap_content</item> <item name=" Android:layout_marginbottom ">2.0dip</item> & Lt;item name= "Android:button" > @null </item> <item name= "Android:singleline" >true</item> < Item Name= "Android:drawablepadding" >@dimen/bottom_tab_padding_drawable</item> <item name= "Android:layout_weight" >1.0</item> </sty
Le> </resources>
4, Src/com.andyidea.tabdemo package of the following UI interface class source code:
Maintabactivity.java Source:
Package Com.andyidea.tabdemo;
Import android.app.TabActivity;
Import android.content.Intent;
Import Android.os.Bundle;
Import Android.view.Window;
Import Android.widget.CompoundButton;
Import Android.widget.RadioButton;
Import Android.widget.CompoundButton.OnCheckedChangeListener;
Import Android.widget.TabHost;
public class Maintabactivity extends tabactivity implements oncheckedchangelistener{private Tabhost mtabhost;
Private Intent maintent;
Private Intent mbintent;
Private Intent mcintent;
Private Intent mdintent;
Private Intent meintent; /** called the activity is a.
* * @Override public void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
Requestwindowfeature (Window.feature_no_title);
Setcontentview (R.layout.maintabs);
This.maintent = new Intent (this,aactivity.class);
This.mbintent = new Intent (this,bactivity.class); This.mcintent = new Intent (this,cactivIty.class);
This.mdintent = new Intent (this,dactivity.class);
This.meintent = new Intent (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 void OnCheckedChanged (Compoundbutton buttonview, Boolean ischecked) {if (ischecked) {
Switch (Buttonview.getid ()) {case R.id.radio_button0:this.mtabhost.setcurrenttabbytag ("A_tab");
Break
Case R.id.radio_button1:this.mtabhost.setcurrenttabbytag ("B_tab");
Break Case R.id.raDio_button2:this.mTabHost.setCurrentTabByTag ("C_tab");
Break
Case R.id.radio_button3:this.mtabhost.setcurrenttabbytag ("D_tab");
Break
Case R.id.radio_button4:this.mtabhost.setcurrenttabbytag ("More_tab");
Break
}} private void Setupintent () {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)); Private Tabhost.tabspec Buildtabspec (String tag, int reslabel, int resicon, final Intent content) {R Eturn This.mTabHost.newTabSpec (tag). Setindicator (GetString (Reslabel), Getresources (). getdrawable (Resicon)). Setco
Ntent (content);
}
}
Which Aactivity.java and Bactivity.java, Cactivity.java, Dactivity.java, Eactivity.java in the same source, is used to represent different interface display, so here only list Aactivity.java's source code:
Package Com.andyidea.tabdemo;
Import android.app.Activity;
Import Android.os.Bundle;
Import android.view.Gravity;
Import Android.widget.TextView;
public class Aactivity extends activity{
@Override public
void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
TextView TV = new TextView (this);
Tv.settext ("This is A activity!");
Tv.setgravity (gravity.center);
Setcontentview (TV);
}
}
Finally, don't forget to register each activity component in the Androidmanifest.xml file. Okay, now let's look at the effect of our program running:
SOURCE Download: Android Implementation of the bottom navigation bar function (tab)
To achieve a more popular function of the bottom navigation bar, I hope this article will help you learn about Android software programming.