Pay attention to

As each selected navigation button, the corresponding content of the navigation is displayed. This content area needs to be represented by a container. You must set the id of this container to Android: ID/tabContent

Project directory

The effect

steps

1. Modify main_activity. XML

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns: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=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_Host"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                />
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>


</LinearLayout>
Copy the code

2. Create four blank fragments: AudioFragment, VideoFragment, NetAudioFragment, and NetVideoFragment

3. Define the TAB title in strings. XML

<resources>
    <string name="app_name">MobilePlayer4</string>
    <string-array name="tab_title"> <item> Local video </item> <item> Local music </item> <item> Network video </item> <item> Network music </item> </string-array> </resources>Copy the code

4. Define the layout of the ICONS and text in the bottom navigation bar (I’ve named the layout item_title and the layout is used in the custom getEveryView method in MainActivity)

<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"> <! <ImageView Android :layout_width="25dp"
        android:layout_height="25dp"
        android:id="@+id/icon"
        android:layout_centerHorizontal="true"/ > <! Android :layout_width= <TextView Android :layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/title"
        android:layout_below="@id/icon"
        android:layout_centerHorizontal="true"
        android:text="abc"
        android:textSize="12sp"
        android:textColor="@color/tab_title_selector"
        />
</RelativeLayout>
Copy the code

4. Define the style of the title when an item is selected in the bottom navigation (I’ll create a new tab_title_select.xml in the color resource file here). When the bottom navigation bar is selected, the title turns blue

<? xml version="1.0" encoding="utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/holo_blue_dark"/>
    <item android:state_pressed="true" android:color="@android:color/holo_blue_dark"/>
    <item android:color="@android:color/darker_gray"/>
</selector>
Copy the code

5. Define the styles of each icon (the selected icon, the default icon), and create 4 style files in the Drawable resource file, respectively

Rb_audio_selector. XML Ic_tab_audio_press and IC_tab_audio_press are two different ICONS
<? xml version="1.0" encoding="utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/ic_tab_audio_press"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_audio_press"/>
    <item android:drawable="@drawable/ic_tab_audio"/>
</selector>
Copy the code
Rb_net_audio_selector. XML In this command, IC_tab_netaudio_press and IC_tab_netaudio_press are two different ICONS
<? xml version="1.0" encoding="utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/ic_tab_netaudio_press"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_netaudio_press"/>
    <item android:drawable="@drawable/ic_tab_netaudio"/>
</selector>
Copy the code
Rb_video_select. XML where IC_tab_video_press and IC_tab_video_press are two different ICONS
<? xml version="1.0" encoding="utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ic_tab_video_press"/>
    <item android:state_selected="true" android:drawable="@drawable/ic_tab_video_press"/>
    <item android:drawable="@drawable/ic_tab_video"/>
</selector>
Copy the code
Rb_net_video_select. XML In this command, IC_tab_netvideo_press and IC_tab_netvideo_press are two different ICONS
<? xml version="1.0" encoding="utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/ic_tab_netvideo_press"/>
    <item android:state_pressed="true" android:drawable="@drawable/ic_tab_netvideo_press"/>
    <item android:drawable="@drawable/ic_tab_netvideo"/>
</selector>
Copy the code

6. MainActivity code

public class MainActivity extends AppCompatActivity {

    FragmentTabHost tabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main); tabHost = (FragmentTabHost)findViewById(R.id.tab_Host); [] Titles = getResources().getStringArray(r.array.tab_title); Int [] ICONS = new int[]{R.drawable.rb_video_selector,R.drawable.rb_audio_selector,R.drawable.rb_net_video_selector,R.drawable.rb_net_audio _selector}; // These 4 fragments are the 4 fragment Class[] classes = new created in step 2 Class[]{VideoFragment.class,AudioFragment.class,NetVideoFragment.class,NetAudioFragment.class}; / / 1 binding shows fragments of container tabHost. Setup (this, getSupportFragmentManager (), R.i, dc ontent);for(int i=0; i<titles.length; I++){// 2 generate different tags, tag corresponds to the name of the tag tabhost. TabSpec TMP = tabhost. newTabSpec(""+i); tmp.setIndicator(getEveryView(this,titles,icons,i)); tabHost.addTab(tmp,classes[i],null); }} /** * This custom method uses the item_title layout and returns every view in the bottom navigation bar * the method is abovesetPublic View getEveryView(Context Context, String[] titles, int[] ICONS, int index){ LayoutInflater inflater = LayoutInflater.from(context); View title_view = inflater.inflate(R.layout.item_title,null); TextView title = (TextView) title_view.findViewById(R.id.title); ImageView icon = (ImageView)title_view.findViewById(R.id.icon); // Set tag content title.settext (titles[index]); icon.setImageResource(icons[index]);returntitle_view; }}Copy the code

While writing, I also found an article on implementing bottom navigation with FragmentTabHost.www.cnblogs.com/xqz0618/p/t…