MessageFragment

public class MessageFragment extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View messageLayout = inflater.inflate(R.layout.message_layout,
                container, false);
        return messageLayout;
    }

}

ContactsFragment

public class ContactsFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View contactsLayout = inflater.inflate(R.layout.contacts_layout,
                container, false);
        return contactsLayout;
    }

}

More fragment s

Activity

/**
 * The main Activity of the project. All fragments are embedded here.
 *
 * Using add and hide
 *
 * @author zq
 *
 *
 */
public class TabFragmentActivityTest extends BaseActivity implements OnClickListener {

    /**
     * Fragment used to present messages
     */
    private MessageFragment messageFragment;

    /**
     * Fragment to show contacts
     */
    private ContactsFragment contactsFragment;

    /**
     * Fragment for dynamic presentation
     */
    private NewsFragment newsFragment;

    /**
     * Fragment for presentation settings
     */
    private SettingFragment settingFragment;

    /**
     * Message interface layout
     */
    private View messageLayout;

    /**
     * Contact interface layout
     */
    private View contactsLayout;

    /**
     * Dynamic interface layout
     */
    private View newsLayout;

    /**
     * Set interface layout
     */
    private View settingLayout;

    /**
     * Controls to display message icons on a Tab layout
     */
    private ImageView messageImage;

    /**
     * Control to display contact icon on Tab layout
     */
    private ImageView contactsImage;

    /**
     * Controls to display dynamic icons on a Tab layout
     */
    private ImageView newsImage;

    /**
     * Show settings Icon controls on Tab layout
     */
    private ImageView settingImage;

    /**
     * Control to display the message title on the Tab layout
     */
    private TextView messageText;

    /**
     * Control to display contact Title On Tab layout
     */
    private TextView contactsText;

    /**
     * Controls to display dynamic titles on a Tab layout
     */
    private TextView newsText;

    /**
     * Show the controls that set the title on the Tab layout
     */
    private TextView settingText;

    /**
     * For Fragment management
     */
    private FragmentManager fragmentManager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_tab_fragment);
        // Initialize layout elements
        initViews();
        fragmentManager = getFragmentManager();
        // Select the 0 th tab on the first startup
        setTabSelection(0);
    }

    /**
     * Here we get the instances of each control we need, and set the necessary click events for them.
     */
    private void initViews() {
        messageLayout = findViewById(R.id.message_layout);
        contactsLayout = findViewById(R.id.contacts_layout);
        newsLayout = findViewById(R.id.news_layout);
        settingLayout = findViewById(R.id.setting_layout);
        messageImage = (ImageView) findViewById(R.id.message_image);
        contactsImage = (ImageView) findViewById(R.id.contacts_image);
        newsImage = (ImageView) findViewById(R.id.news_image);
        settingImage = (ImageView) findViewById(R.id.setting_image);
        messageText = (TextView) findViewById(R.id.message_text);
        contactsText = (TextView) findViewById(R.id.contacts_text);
        newsText = (TextView) findViewById(R.id.news_text);
        settingText = (TextView) findViewById(R.id.setting_text);
        messageLayout.setOnClickListener(this);
        contactsLayout.setOnClickListener(this);
        newsLayout.setOnClickListener(this);
        settingLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.message_layout:
            // When the message tab is clicked, select the first tab
            setTabSelection(0);
            break;
        case R.id.contacts_layout:
            // When the contact tab is clicked, select the second tab
            setTabSelection(1);
            break;
        case R.id.news_layout:
            // When dynamic tab is clicked, select the third tab
            setTabSelection(2);
            break;
        case R.id.setting_layout:
            // When the Settings tab is clicked, select the 4th tab
            setTabSelection(3);
            break;
        default:
            break;
        }
    }

    /**
     * Set the selected tab page according to the index parameter passed in.
     * 
     * @param index
     *  The subscript corresponding to each tab page. 0 for message, 1 for contact, 2 for dynamic, and 3 for settings.
     */
    private void setTabSelection(int index) {
        // Clear the last selection status before each selection
        clearSelection();
        // Open a Fragment transaction
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        // First, hide all fragments to prevent multiple fragments from being displayed on the interface
        hideFragments(transaction);
        switch (index) {
        case 0:
            // When the message tab is clicked, change the color of the control's picture and text
            messageImage.setImageResource(R.drawable.message_selected);
            messageText.setTextColor(Color.WHITE);
            if (messageFragment == null) {
                // If the MessageFragment is empty, create one and add it to the interface
                messageFragment = new MessageFragment();
                transaction.add(R.id.content, messageFragment);
            } else {
                // If the MessageFragment is not empty, it will be displayed directly
                transaction.show(messageFragment);
            }
            break;
        case 1:
            // When the contact tab is clicked, change the color of the control's picture and text
            contactsImage.setImageResource(R.drawable.contacts_selected);
            contactsText.setTextColor(Color.WHITE);
            if (contactsFragment == null) {
                // If ContactsFragment is empty, create one and add it to the interface
                contactsFragment = new ContactsFragment();
                transaction.add(R.id.content, contactsFragment);
            } else {
                // If ContactsFragment is not empty, display it directly
                transaction.show(contactsFragment);
            }
            break;
        case 2:
            // When clicking the dynamic tab, change the color of the control's picture and text
            newsImage.setImageResource(R.drawable.news_selected);
            newsText.setTextColor(Color.WHITE);
            if (newsFragment == null) {
                // If NewsFragment is empty, create one and add it to the interface
                newsFragment = new NewsFragment();
                transaction.add(R.id.content, newsFragment);
            } else {
                // If NewsFragment is not empty, display it directly
                transaction.show(newsFragment);
            }
            break;
        case 3:
        default:
            // When you click the Settings tab, change the color of the control's picture and text
            settingImage.setImageResource(R.drawable.setting_selected);
            settingText.setTextColor(Color.WHITE);
            if (settingFragment == null) {
                // If SettingFragment is empty, create one and add it to the interface
                settingFragment = new SettingFragment();
                transaction.add(R.id.content, settingFragment);
            } else {
                // If SettingFragment is not empty, it will be displayed directly
                transaction.show(settingFragment);
            }
            break;
        }
        transaction.commit();
    }

    /**
     * Clear all selected states.
     */
    private void clearSelection() {
        messageImage.setImageResource(R.drawable.message_unselected);
        messageText.setTextColor(Color.parseColor("#82858b"));
        contactsImage.setImageResource(R.drawable.contacts_unselected);
        contactsText.setTextColor(Color.parseColor("#82858b"));
        newsImage.setImageResource(R.drawable.news_unselected);
        newsText.setTextColor(Color.parseColor("#82858b"));
        settingImage.setImageResource(R.drawable.setting_unselected);
        settingText.setTextColor(Color.parseColor("#82858b"));
    }

    /**
     * Hide all fragments.
     * 
     * @param transaction
     *            Transactions used to perform operations on fragments
     */
    private void hideFragments(FragmentTransaction transaction) {
        if (messageFragment != null) {
            transaction.hide(messageFragment);
        }
        if (contactsFragment != null) {
            transaction.hide(contactsFragment);
        }
        if (newsFragment != null) {
            transaction.hide(newsFragment);
        }
        if (settingFragment != null) {
            transaction.hide(settingFragment);
        }
    }
}

Knowledge points to be emphasized

1.

Or programmatically add clips to an existing ViewGroup
You can add clips to the Activity layout at any time during the Activity run. You just need to specify which ViewGroup to place the clip in.

To perform fragment transactions in your Activity, such as adding, removing, or replacing fragments, you must use the API in the fragment transaction. You can get a FragmentTransaction instance from Activity as follows:

FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
You can then use the add() method to add a fragment that specifies which fragment to add and which view to insert it into. For example:

ExampleFragment fragment = new ExampleFragment();
fragmentTransaction.add(R.id.fragment_container, fragment);
fragmentTransaction.commit();
The first parameter passed to add() is ViewGroup, that is, the location where the fragment should be placed, specified by the resource ID, and the second parameter is the fragment to be added.

Once you make changes through FragmentTransaction, you must call commit() for the changes to take effect.

fragmentTransaction must be declared as a local variable, not a global variable, because it can only be committed once, fragmentTransaction.commit();
The code above also uses this cleverly

// Open a Fragment transaction
        FragmentTransaction transaction = fragmentManager.beginTransaction();

2.

The bottom layout is easier to write like this

   <RadioGroup
            android:id="@+id/rg_title"
            android:layout_width="match_parent"
            android:layout_height="42dp"
            android:gravity="center"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_news_list"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/bg_login_type_left"
                android:button="@null"
                android:checked="true"
                android:gravity="center"
                android:text="@string/news_list"
                android:textColor="@color/bg_color_login_type" />

            <RadioButton
                android:id="@+id/rb_announcements"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/bg_login_type_right"
                android:button="@null"
                android:gravity="center"
                android:text="@string/notices_management"
                android:textColor="@color/bg_color_login_type" />
...
        </RadioGroup>

  /**
     *  When the fragment is removed and replaced with replace, the messageInfos object in the fragment is empty, which will cause the object here to be empty
     *  Replace with add
     */

    private RadioGroup.OnCheckedChangeListener onCheckedListener = new RadioGroup.OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(RadioGroup radioGroup, int i) {

            switch (i) {
                case R.id.rb_news_list:

                    setTabSelection(0);
                    break;

                case R.id.rb_announcements:

                    setTabSelection(1);
                    break;

            }


        }
    };

Original bottom layout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <include layout="@layout/include_toolbar" />

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        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"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@drawable/tab_bg">

            <RelativeLayout
                android:id="@+id/message_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/message_image"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/message_unselected" />

                    <TextView
                        android:id="@+id/message_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="news"
                        android:textColor="#82858b" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/contacts_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/contacts_image"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/contacts_unselected" />

                    <TextView
                        android:id="@+id/contacts_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="Contacts"
                        android:textColor="#82858b" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/news_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/news_image"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/news_unselected" />

                    <TextView
                        android:id="@+id/news_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="dynamic"
                        android:textColor="#82858b" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/setting_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/setting_image"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/setting_unselected" />

                    <TextView
                        android:id="@+id/setting_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="Set up"
                        android:textColor="#82858b" />
                </LinearLayout>
            </RelativeLayout>
        </LinearLayout>

    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

state

The background and font colors are:

android:state_checked

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:state_checked="true">
        <shape android:shape="rectangle">

            <solid android:color="#4db6f4"/>
            <corners android:bottomLeftRadius="@dimen/_5dp" android:topLeftRadius="@dimen/_5dp"/>

        </shape>

    </item>

    <item  android:state_checked="false">
        <shape android:shape="rectangle">

            <solid android:color="#cfcfcf"/>
            <corners android:bottomLeftRadius="@dimen/_5dp" android:topLeftRadius="@dimen/_5dp"/>
        </shape>

    </item>

</selector>

Reference resources
https://blog.csdn.net/guolin_blog/article/details/13171191?locationNum=2