Android Program Development Fragment implementation of the bottom navigation bar instance Code _android

The popular application of the navigation is generally divided into two kinds, one is the bottom navigation, one is the side bar.

Description

Ide:as,android Studio;
Simulator: genymotion;

The effect of the implementation, see the figure below.

Concrete implementation

In order to understand this implementation process, we post the code more than one write, so that more convenient to understand [the final release of the complete code implementation]. Look at the interface of the map to do more rough, but the skeleton of the implementation process has, want to more perfect design, then self-improvement bar ^0^.

Layout

By looking at the above effect chart, you find that any one of the options pages is composed of three parts:

Top of the Actionbar after removing the title bar;

A fragmentlayout is used in the middle to put the corresponding fragment;

At the bottom a large linearlayout is placed with four styles (Imagview + TextView) of the small item.

(1) Complete and specific code, see: Show_main_lay.xml, through the comments can be seen in the layout of the three parts of the composition.

<?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:background=" @color Coloraccent "android:orientation=" vertical "> <!--1. Top title bar--> <include android:id= "@+id/show_main_title" layout= "@layout/title_layout"/> <!--2. Storage of four fragment--> <framelayout android:id= "@+id/content" android:layout_width= "Match_parent" Android:layout_ height= "0DP" android:layout_weight= "1" android:background= "@color/whitesmoke" ></FrameLayout> <!--3. The bottom four Options menu--> <linearlayout android:layout_width= "match_parent" android:layout_height= "60DP" Android: background= "#FFFFFF" > <!--four parts are the same: ImageView + textview--> <relativelayout android:id= "@+id/first_layout
"Android:layout_width=" 0DP "android:layout_height=" Match_parent "android:layout_weight=" 1 "> <LinearLayout Android:layout_width= "Match_parent" android:layout_height="Wrap_content" android:layout_centervertical= "true" android:orientation= "vertical" > <imageview android:id= "@ +id/first_image "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "android:layout_gravity=" "Center_horizontal" android:src= "@android:d rawable/ic_menu_compass"/> <textview android:id= "@+id/first_text "Android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:layout_gravity=" Center_ Horizontal "android:layout_margintop=" 5DP "android:text=" message "android:textcolor=" #7597B3 "/> </linearlayout > </RelativeLayout> <relativelayout android:id= "@+id/second_layout" android:layout_width= "0DP" Android:
layout_height= "Match_parent" android:layout_weight= "1" > <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:layout_centervertical= "true" android:orientation= "vertical" > < ImageView android:id= "@+id/second_image" android:layout_width= "Wrap_content" WRap_content "android:layout_gravity=" Center_horizontal "android:src=" @android:d Rawable/ic_menu_agenda "/> <
TextView android:id= "@+id/second_text" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_gravity= "Center_horizontal" android:layout_margintop= "5DP" android:text= "Found" android:textColor= "#
7597b3 "/> </LinearLayout> </RelativeLayout> <relativelayout android:id=" @+id/third_layout "
Android:layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" > <LinearLayout
Android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_centervertical= "true" android:orientation= "vertical" > <imageview android:id= "@+id/third_image" android:layout_width= "Wrap_content" "Android:layout_height=" wrap_content "android:layout_gravity=" Center_horizontal "android:src=" @android:d rawable/ Ic_menu_edit "/> <textview android:id= @+id/third_text" android:layout_width= "Wrap_content" Android:layout_height= "Wrap_content" android:layout_gravity= "Center_horizontal" android:layout_margintop= "5DP" Android: text= "Record" android:textcolor= "#7597B3"/> </LinearLayout> </RelativeLayout> <relativelayout android : id= "@+id/fourth_layout" android:layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1 "> <linearlayout android:layout_width=" match_parent "android:layout_height=" Wrap_content "Android:layout_ Centervertical= "true" android:orientation= "vertical" > <imageview android:id= "@+id/fourth_image" Android:
Layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "Center_horizontal" android:src= "@android:d rawable/ic_menu_myplaces"/> <textview android:id= "@+id/fourth_text" Android:layout_ Width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "Center_horizontal" Android: layout_margintop= "5DP" android:text= "my" android:textcolor= "#7597B3"/> </LinearLayout> </relativElayout> </LinearLayout> </LinearLayout> 

Please attach the source screenshot:

(2) for the first part of the layout of the top title bar, code see: Title_layout.xml:

<?xml version= "1.0" encoding= "Utf-8"?>
<relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "56DP"
android:background= "@color/colorprimarydark"
android:orientation= "Horizontal" >
<imageview
Android:id= "@+id/title_imv"
Android:layout_width= "30DP"
android:layout_height= "30DP"
Android:layout_centervertical= "true"
android:layout_marginleft= "10DP"
android:src= "@android:d rawable/ic_menu_more"/>
<textview
Android:id= "@+id/title_text_tv"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:layout_centerinparent= "true"
android:text= "Home"
Android:textsize= "20SP"
Android:textcolor= "@color/bg_color"/>
</RelativeLayout>

See screenshot below:

(3) in the second part of the layout, we set up 4 more. XML layout files, respectively, named: Fg1.xml, Fg2.xml, Fg3.xml, Fg4.xml, the content of only changes in the TextView text description, such as the first page, changed to the second page. Only one of the fg1.xml is given below:

<?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: gravity= "center"
android:background= "@color/aquamarine"
android:orientation= "vertical" >
< TextView
android:layout_width= "wrap_content"
android:layout_height= "Wrap_content"
Second page "
android:textsize=" 22sp/>
</LinearLayout>

As shown in figure:

(4) Here also gives the colors.xml content of the list of values, the color is relatively complete but the name is not easy to remember:

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <color name= "colorprimary" > #3F51B5 </color > <color name= "Colorprimarydark" > #303F9F </color> <color name= "coloraccent" > #FF4081 </color
> <color name= "Bg_color" > #EDEDED </color> <color name= "Contents_text" > #ff000000 </color> <color name= "Encode_view" > #ffffffff </color> <color name= "Help_button_view" > #ffcccccc </color > <color name= "Help_view" > #ff404040 </color> <color name= "possible_result_points" > #c0ffff00 </color> <color name= "Result_image_border" > #ffffffff </color> <color name= "Result_minor_text" > #ffc0c0c0 </color> <color name= "result_points" > #c000ff00 </color> <color name= "Result_text" > #ffffffff </color> <color name= "Result_view" > #b0000000 </color> <color name= "Sbc_header_ Text "> #ff808080 </color> <color name=" Sbc_header_view "> #ffffffff </color> <cOlor name= "Sbc_list_item" > #fffff0e0 </color> <color name= "Sbc_layout_view" > #ffffffff </color> <color name= "Sbc_page_number_text" > #ff000000 </color> <color name= "Sbc_snippet_text" > #ff4b4b4b </color> <color name= "Share_text" > #ff000000 </color> <color name= "Share_view" > #ffffffff < /color> <color name= "Status_view" > #50000000 </color> <color name= "Status_text" > #ffffffff </ color> <color name= "Transparent" > #00000000 </color> <color name= "Viewfinder_frame" > #ffffffff </color> <color name= "Viewfinder_laser" > #ffff0000 </color> <color name= "Viewfinder_mask" ># 60000000</color> <color name= "header" > #58567D </color> <color name= "Grgray" > #686868 </ color> <color name= "White" > #FFFFFF </color> <!----> <color name= "Ivory" > #FFFFF0 </
color> <!--ivory--> <color name= "Lightyellow" > #FFFFE0 </color> <!--bright yellow--><color name= "Yellow" > #FFFF00 </color> <!--yellow--> <color name= "Snow" > #FFFAFA </color> <!--Snow White--> <color name= "Floralwhite" > #FFFAF0 </color> <!--flower White--> <color " LemonChiffon "> #FFFACD </color> <!--lemon Silk--> <color name=" Cornsilk "> #FFF8DC </color> <!- -Rice silk--> <color name= "Seashell" > #FFF5EE </color> <!--Sea-color--> <color-name= "Lavenderblush" ># Fff0f5</color> <!--mauve--> <color name= "papayawhip" > #FFEFD5 </color> <!--wood color--> < Color name= "Blanchedalmond" > #FFEBCD </color> <!--white apricot--> <color name= "Mistyrose" > #FFE4E1 </ Color> <!--light Rose--> <color name= "Bisque" > #FFE4C4 </color> <!--orange-yellow--> <color name= " Moccasin "> #FFE4B5 </color> <!--buckskin color--> <color name=" Navajowhite "> #FFDEAD </color> <!-- Nawa--> <color name= "Peachpuff" > #FFDAB9 </color> <!--peach--> <color name= "GOld "> #FFD700 </color> <!--golden--> <color name=" Pink "> #FFC0CB </color> <!--pink--> <
Color name= "Lightpink" > #FFB6C1 </color> <!--bright pink--> <color name= "Orange" > #FFA500 </color> <!--Orange--> <color name= "Lightsalmon" > #FFA07A </color> <!--bright flesh--> <color "Name=" > #FF8C00 </color> <!--dark orange--> <color name= "Coral" > #FF7F50 </color> <!--coral--> <
Color name= "Hotpink" > #FF69B4 </color> <!--hot pink--> <color name= "tomato" > #FF6347 </color> <!--tomato color--> <color name= "orangered" > #FF4500 </color> <!--red Orange--> <color name= "Deeppink" > #FF1493 </color> <!--deep pink--> <color name= "fuchsia" > #FF00FF </color> <!--Magenta--> < Color name= "Magenta" > #FF00FF </color> <!--red-purple--> <color name= "Red" > #FF0000 </color> <!- -Red--> <color name= "Oldlace" > #FDF5E6 </color> <!--old suit--&GT <color name= "Lightgoldenyellow" > #FAFAD2 </color> <!--bright golden yellow--> <color name= "linen" > #FAF0E6 </color> <!--linen color--> <color name= "Antiquewhite" > #FAEBD7 </color> <!--antique White--> <color Name= "Salmon" > #FA8072 </color> <!--meat color--> <color name= "Ghostwhite" > #F8F8FF </color> <! --Ghost White--> <color name= "Mintcream" > #F5FFFA </color> <!--mint color--> <color name= "WhiteSmoke" ># f5f5f5</color> <!--smoke white--> <color name= "Beige" > #F5F5DC </color> <!--beige--> <color Name = "Wheat" > #F5DEB3 </color> <!--light yellow--> <color name= "Sandybrown" > #F4A460 </color> <!--Sandy Brown --> <color name= "Azure" > #F0FFFF </color> <!--Azure--> <color name= "Honeydew" > #F0FFF0 </ color> <!--Honey--> <color name= "AliceBlue" > #F0F8FF </color> <!--Allisland--> <color name= " Khaki "> #F0E68C </color> <!--Yellow-brown--> <color name=" Lightcoral "> #F08080 </color> <!--bright Coral--> <color name= "Palegoldenrod" > #EEE8AA </color> <!--cang Kylin color- > <color name= "Violet" > #EE82EE </color> <!--Violet--> <color name= "DarkSalmon" > #E9967A </ Color> <!--dark flesh--> <color name= "Lavender" > #E6E6FA </color> <!--lavender--> <color name= " Lightcyan "> #E0FFFF </color> <!--bright cyan--> <color name=" Burlywood "> #DEB887 </color> <!-- Solid wood color--> <color name= "Plum" > #DDA0DD </color> <!--plum--> <color name= "Gainsboro" > #DCDCDC < /color> <!--light grey--> <color name= "Crimson" > #DC143C </color> <!--dark Crimson--> <color "
Palevioletred "> #DB7093 </color> <!--pale violet--> <color name=" Goldenrod "> #DAA520 </color> <!--golden Kylin color--> <color name= "Orchid" > #DA70D6 </color> <!--lavender--> <color name= "Thistle" ># D8bfd8</color> <!--thistle color--> <color name= "Lightgray" > #D3D3D3 </color&Gt <!--bright Gray--> <color name= "Lightgrey" > #D3D3D3 </color> <!--bright Gray--> <color name= "Tan" ># D2b48c</color> <!--Brown--> <color name= "Chocolate" > #D2691E </color> <!--skillful color--> <
Color name= "Peru" > #CD853F </color> <!--Peru color--> <color name= "indianred" > #CD5C5C </color> <!--Indian red--> <color name= "mediumvioletred" > #C71585 </color> <!--Violet--> <color-Name= " Silver "> #C0C0C0 </color> <!--silver--> <color name=" Darkkhaki "> #BDB76B </color> <!--dark brown-- > <color name= "Rosybrown" > #BC8F8F </color> <!--maroon rose--> <color name= "Mediumorchid" > #BA55D3 </color> <!--powder purple--> <color name= "Darkgoldenrod" > #B8860B </color> <!--dark Golden--> < Color name= "Firebrick" > #B22222 </color> <!--brick--> <color name= "Powderblue" > #B0E0E6 </color > <!--powder blue--> <color name= "Lightsteelblue" > #B0C4DE </color> <!--Bright steel blue--> <color name= "paleturquoise" > #AFEEEE </color> <!--pale gem green--> <color name= "Greenyellow"
> #ADFF2F </color> <!--yellow-green--> <color name= "LightBlue" > #ADD8E6 </color> <!--bright blue--> <color name= "Darkgray" > #A9A9A9 </color> <!--dark grey--> <color name= "Darkgrey" > #A9A9A9 </color > <!--dark grey--> <color name= "Brown" > #A52A2A </color> <!--Brown--> <color name= "Sienna" ># a0522d</color> <!--ochre--> <color name= "DarkOrchid" > #9932CC </color> <!--dark purple--> < Color name= "Palegreen" > #98FB98 </color> <!--pale green--> <color name= "Darkviolet" > #9400D3 </color > <!--dark violet--> <color name= "Mediumpurple" > #9370DB </color> <!--Violet--> <color name= " LightGreen "> #90EE90 </color> <!--bright green--> <color name=" Darkseagreen "> #8FBC8F </color> <! --Dark--> <color name= "SaddleBrown" > #8B4513 </color> <!--heavy Brown--&Gt <color name= "Darkmagenta" > #8B008B </color> <!--dark Magenta--> <color name= "darkred" > #8B0000 </ color> <!--dark red--> <color name= "Blueviolet" > #8A2BE2 </color> <!--Violet Blue--> <color name= " Lightskyblue "> #87CEFA </color> <!--bright sky-blue--> <color name=" Skyblue "> #87CEEB </color> <!-- sky-blue--> <color name= "Gray" > #808080 </color> <!--grey--> <color name= "Grey" > #808080 </color > <!--grey--> <color name= "Olive" > #808000 </color> <!--Olive--> <color name= "Purple" ># 800080</color> <!--purple--> <color name= "maroon" > #800000 </color> <!--millet--> <color Name = "Aquamarine" > #7FFFD4 </color> <!--green--> <color name= "Chartreuse" > #7FFF00 </color> <! --Yellow green--> <color name= "Lawngreen" > #7CFC00 </color> <!--green Grass--> <color name= "Mediumslateblue" > #7B68EE </color> <!--dark blue--> <color name= "LightslategrAy "> #778899 </color> <!--bright blue gray--> <color name=" Lightslategrey "> #778899 </color> <!--bright blue grey- -> <color name= "Slategray" > #708090 </color> <!--Gray stone color--> <color name= "Slategrey" > #708090 </color> <!--Gray stone color--> <color name= "Olivedrab" > #6B8E23 </color> <!--dark green Brown--> <color name = "Slateblue" > #6A5ACD </color> <!--stone Blue--> <color name= "Dimgray" > #696969 </color> <!-- Dark grey--> <color name= "Dimgrey" > #696969 </color> <!--dark grey--> <color name= "Mediumaquamarine" >#
66cdaa</color> <!--Green--> <color name= "Cornflowerblue" > #6495ED </color> <!--chrysanthemum Blue--> <color name= "Cadetblue" > #5F9EA0 </color> <!--military blue--> <color name= "Darkolivegreen" > #556B2F </color> <!--dark olive green--> <color name= "Indigo" > #4B0082 </color> <!--Indigo--> <color name= " Mediumturquoise "> #48D1CC </color> <!--Emerald--> <color name=" darksLateblue "> #483D8B </color> <!--dark blue--> <color name=" Steelblue "> #4682B4 </color> <!-- Steel Blue--> <color name= "Royalblue" > #4169E1 </color> <!--royal blue--> <color name= "Turquoise" >#
40e0d0</color> <!--Green--> <color name= "Mediumseagreen" > #3CB371 </color> <!--Aquamarine--> <color name= "Limegreen" > #32CD32 </color> <!--Orange Green--> <color name= "Darkslategray" > #2F4F4F < /color> <!--Dark Tile grey--> <color name= "Darkslategrey" > #2F4F4F </color> <!--dark Tile gray--> <color
Name= "Seagreen" > #2E8B57 </color> <!--Sea Green--> <color name= "Forestgreen" > #228B22 </color> <!--Forest Green--> <color name= "Lightseagreen" > #20B2AA </color> <!--bright Sea blue--> <color " DodgerBlue "> #1E90FF </color> <!--flashing blue--> <color name=" Midnightblue "> #191970 </color> <! --Gray Blue--> <color name= "Aqua" > #00FFFF </color> <!--light green--> <color name="Cyan" > #00FFFF </color> <!--cyan--> <color name= "Springgreen" > #00FF7F </color> <!--Spring Green-- > <color name= "Lime" > #00FF00 </color> <!--acid Orange--> <color name= "Mediumspringgreen" > #00FA9A </color> <!--Spring Green--> <color name= "darkturquoise" > #00CED1 </color> <!--dark Gem Green--> < Color name= "Deepskyblue" > #00BFFF </color> <!--deep Blue--> <color name= "Darkcyan" > #008B8B </color > <!--dark cyan--> <color name= "Teal" > #008080 </color> <!--duck color--> <color "Green" name= 008000</color> <!--Green--> <color name= "Darkgreen" > #006400 </color> <!--dark green--> <color Name= "Blue" > #0000FF </color> <!--blue--> <color name= "MediumBlue" > #0000CD </color> <!-- Medium Blue--> <color name= "Darkblue" > #00008B </color> <!--dark blue--> <color name= "Navy" > #000080 </ Color> <!--Navy--> <color name= "Black" > #000000 </color> <! --Black--> </resources>

As shown in figure:

So here we have the interface layout is basically completed!

Implementation class of corresponding fragment

Next we need to write four corresponding fragment implementation class, the same copy 4 copies, use inflate load fragment can. That is, contains four similar fragment, respectively named: Firstfragment.java, Secondfragment.java, Thirdfragment.java, Fourthfragment.java. The following is mainly to show the specific code of Firstfragment.java:

Package com.example.dm.myapplication;
Import Android.os.Bundle;
Import android.support.v4.app.Fragment;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;
/**
* Created by DM on 16-3-29.
* The first page
*
/public class Firstfragment extends Fragment {
@Override public
View Oncreateview ( Layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {
View view = Inflater.inflate ( R.layout.fg1, container, false);
return view;
}

As shown in figure:

The most important mainactivity

The small parts of each pieces are ready to order, and now it is only the main interface implementation class that blends them together to achieve the corresponding effect.

Mainactivity.java writing is also very simple, directly look at the code and comments on it, not much explanation: mainly contains several initialization methods, check processing, hide all fragment methods. See Mainactivity.java for details:

Package com.example.dm.myapplication;
Import android.content.Intent;
Import Android.os.Bundle; Import android.support.v4.app.FragmentActivity;
Note Here we import the V4 package, do not guide the app's package import Android.support.v4.app.FragmentManager;
Import android.support.v4.app.FragmentTransaction;
Import Android.view.View;
Import Android.widget.FrameLayout;
Import Android.widget.ImageView;
Import Android.widget.RelativeLayout;
Import Android.widget.TextView;
/** * Home Page content * Created by DM on 16-1-19. */public class Mainactivity extends Fragmentactivity implements View.onclicklistener {//Initialize top bar display private ImageView titl
ELEFTIMV;
Private TextView Titletv;
Define 4 fragment objects private firstfragment fg1;
Private Secondfragment Fg2;
Private Thirdfragment fg3;
Private Fourthfragment Fg4;
Frame layout object, used to store fragment object private Framelayout framelayout;
Define the related controls in each option private relativelayout firstlayout;
Private Relativelayout secondlayout;
Private Relativelayout thirdlayout;
Private Relativelayout fourthlayout; Private ImageView FirStimage;
Private ImageView Secondimage;
Private ImageView Thirdimage;
Private ImageView Fourthimage;
Private TextView Firsttext;
Private TextView Secondtext;
Private TextView Thirdtext;
Private TextView Fourthtext;
Define several colors private int whirt = 0xFFFFFFFF;
private int gray = 0XFF7597B3;
private int dark = 0xff000000;
Defines the Fragmentmanager object Manager private Fragmentmanager Fragmentmanager; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (
R.layout.show_main_lay);
Fragmentmanager = Getsupportfragmentmanager (); Initview (); Initialize interface control Setchioceitem (0); Initial page load displays the first tab}/** * Initialize page/private void Initview () {//Initialize page title bar TITLELEFTIMV = (ImageView) Findviewbyid (r.id.ti
TLE_IMV); Titleleftimv.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {startactivity (new
Intent (Mainactivity.this, Loginactivity.class));
}
});
Titletv = (TextView) Findviewbyid (R.ID.TITLE_TEXT_TV);
Titletv.settext ("home page"); // Initializes the control Firstimage = (ImageView) Findviewbyid (r.id.first_image) of the bottom navigation bar;
Secondimage = (ImageView) Findviewbyid (r.id.second_image);
Thirdimage = (ImageView) Findviewbyid (r.id.third_image);
Fourthimage = (ImageView) Findviewbyid (r.id.fourth_image);
Firsttext = (TextView) Findviewbyid (R.id.first_text);
Secondtext = (TextView) Findviewbyid (R.id.second_text);
Thirdtext = (TextView) Findviewbyid (R.id.third_text);
Fourthtext = (TextView) Findviewbyid (R.id.fourth_text);
Firstlayout = (relativelayout) Findviewbyid (r.id.first_layout);
Secondlayout = (relativelayout) Findviewbyid (r.id.second_layout);
Thirdlayout = (relativelayout) Findviewbyid (r.id.third_layout);
Fourthlayout = (relativelayout) Findviewbyid (r.id.fourth_layout);
Firstlayout.setonclicklistener (Mainactivity.this);
Secondlayout.setonclicklistener (Mainactivity.this);
Thirdlayout.setonclicklistener (Mainactivity.this);
Fourthlayout.setonclicklistener (Mainactivity.this); @Override public void OnClick (View v) {switch (V.getid ()) {case R. Id.first_layout:setChioceItem (0);
Break
Case R.id.second_layout:setchioceitem (1);
Break
Case R.id.third_layout:setchioceitem (2);
Break
Case R.id.fourth_layout:setchioceitem (3);
Break
Default:break; }/** * Settings Click Tab event Handling * @param index tab: 0, 1, 2, 3/private void Setchioceitem (int index) {fragmenttransaction F
Ragmenttransaction = Fragmentmanager.begintransaction (); Clearchioce ();
Empty, reset options, hide all fragment hidefragments (fragmenttransaction);
Switch (index) {case 0://Firstimage.setimageresource (r.drawable.xxxx); modify Firsttext.settextcolor (dark) if necessary;
Firstlayout.setbackgroundcolor (gray); 
If Fg1 is empty, create one and add to the interface if (FG1 = = null) {FG1 = new firstfragment (); Fragmenttransaction.add (R.id.content, FG1);} else {
If it is not empty, it is shown directly fragmenttransaction.show (FG1);
} break;
Case 1://Secondimage.setimageresource (R.DRAWABLE.XXXX);
Secondtext.settextcolor (Dark);
Secondlayout.setbackgroundcolor (gray); if (FG2 = = null) {FG2 = new secondfragment (); Fragmenttransaction.add (r.id. Content, FG2);
else {fragmenttransaction.show (FG2);} break;
Case 2://Thirdimage.setimageresource (R.DRAWABLE.XXXX);
Thirdtext.settextcolor (Dark);
Thirdlayout.setbackgroundcolor (gray); if (FG3 = = null) {FG3 = new thirdfragment (); Fragmenttransaction.add (R.id.content, FG3);} else {Fragmenttransaction.sho
W (FG3);
} break;
Case 3://Fourthimage.setimageresource (R.DRAWABLE.XXXX);
Fourthtext.settextcolor (Dark);
Fourthlayout.setbackgroundcolor (gray); if (FG4 = = null) {FG4 = new fourthfragment (); Fragmenttransaction.add (R.id.content, FG4);} else {fragmenttransaction.sh
ow (FG4);
} break; } fragmenttransaction.commit (); Submit}/** * When one of the tabs is selected, the other tabs are reset to the default */private void Clearchioce () {//Firstimage.setimageresource (R.DRAWABLE.XXX);
Text.settextcolor (gray);
Firstlayout.setbackgroundcolor (Whirt);
Secondimage.setimageresource (R.DRAWABLE.XXX);
Secondtext.settextcolor (gray);
Secondlayout.setbackgroundcolor (Whirt);
Thirdimage.setimageresource (R.DRAWABLE.XXX); Thirdtext.settextColor (gray);
Thirdlayout.setbackgroundcolor (Whirt);
Fourthimage.setimageresource (R.DRAWABLE.XXX);
Fourthtext.settextcolor (gray);
Fourthlayout.setbackgroundcolor (Whirt); 
/** * Hidden Fragment * * @param fragmenttransaction/private void hidefragments (Fragmenttransaction fragmenttransaction) { if (fg1!= null) {fragmenttransaction.hide (FG1);} if (Fg2!= null) {fragmenttransaction.hide (FG2);} if (Fg3!= null)
{fragmenttransaction.hide (FG3);}
if (fg4!= null) {fragmenttransaction.hide (FG4);}} }

See figure:

Here our function is basically realized, is not quite simple.

Attention

Fragment related class import is the V4 package or app bag! We are here to import the V4 package, in the comments section of the code, has been given instructions;

In the complete code package, we also added the app launch interface and animation, login interface, these two parts of the content, here do not make specific instructions, and then continue to improve.

The above content is small force to share the Android program development fragment implementation of the bottom navigation bar instance code, hope to help everyone!