The selection effect of the bottom layout of Jingdong Mall seems very complex, but it is actually very simple. This is mainly thanks to the selector selector. This article will explain how to achieve the selector selector by imitating the bottom layout of Jingdong Mall and setting different background for view in different states.
The selection effect of the bottom layout of Jingdong Shop is as follows.

View's main states

There are eight main states, and the code for setting them and their corresponding meanings are as follows.

1. android:state_pressed = "true/false" //trueRepresents a pressed state,falseRepresents a non-pressed state.
2. android:state_focused = "true/false" //trueRepresents a focused state.falseRepresents a non-focused state.
3. android:state_selected = "true/false" //trueRepresents the selected state,falseRepresents an unchecked state.
4. android:state_activated = "true/false" //trueIndicates the active state,falseRepresents an inactive state.
5. android:state_checkable = "true/false" //trueIndicates that the status can be checked,falseIndicates that the check is not allowed.
6. android:state_checked = "true/false" //trueIndicates the checked state,falseIndicates that the state is not checked.
7. android:state_enabled = "true/false" //trueRepresents the available state, fasle Indicates an unavailable state.
8. android:state_window_focused = "true/false" //trueRepresents the application window getting focus state,falseRepresents a non-focused state of the application window.

Setting icon backgrounds in different states

First prepare two icons of the same type in different states, copy them to the mipmap file, and then create a new Drawable resource file named selector_icon_home.xml under the drawable file

The background images in different states are then written under selector, where is the source code for the Selector settings of the homepage module.Selector icon settings for other modules are consistent with the home page module.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
    <!-- Pressed -->
    <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />
    <item android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />
 </selector>

After adding the Selector picture files under all modules, set the background of ImageView to R.drawable.selector_icon_home with the following code.

imageView.setBackgroundResource(R.drawable.selector_icon_home);

The following results are obtained after running.

Set text color in different states

Create a new color file, then create a new Color resource file named selector_tab_text.xml.

Here, the color change of the text is the same under the selection effect of each module, just need to write the color of the text in different states in the file, its source code is as follows.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Selected -->
    <item android:state_selected="true" android:color="#eb4f38" />
    <!-- Active -->
    <item android:state_active="true" android:color="#eb4f38"/>
    <item android:state_selected="false" android:color="#a9b7b7" />
    <item android:state_active="false" android:color="#a9b7b7"/>
</selector>

Then set the text color of TextView to R.color. selector_tab_text in the layout file layout.

android:textColor="@color/selector_tab_text"

The following results are obtained after running.

Final results

Selector selector selector is essentially used when clicking on changes in event state, which is both easy to develop and interactive and is already essential. More uses and usages can be found in the official Android developer documentation.