How to make a bottom toggle bar with RadioButton

The above effect is made with radio, generally we do the bottom of the switch bar when you need to let the button and text have a selected state, and then according to click on different buttons to trigger different pages, where the page is generally fragment do. Here we do not discuss complex things, just how to achieve such effects. The key point here is that the middle button and the buttons on both sides are not mutually exclusive, just a separate imageview, and the text of the button needs to be changed according to the selected state, the picture of the button needs to change according to the state.

First, define the picture and text effect of the button

We create a color directory in res to create a Main_bottombar_text_selector.xml file:

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <ItemAndroid:color= "#ff0000"android:state_pressed= "false"android:state_checked= "true" />    <ItemAndroid:color= "#555555"/></selector>

It is obvious here that all I use is the color value, which is different depending on the status of the color. The effect of creating a button picture starts below.

Create a main_bottombar_icon_home_selector.xml in drawable and write the following code:

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:drawable= "@drawable/tab_icon_home_highlight"android:state_checked= "true"android:state_pressed= "false" />    <Itemandroid:drawable= "@drawable/tab_icon_home" /></selector>

The difference between this and the above is that the pictures are selected according to the different states.

Two, ready to achieve the effect

The way to achieve the effect is super simple, exactly the same as the LinearLayout control.

<RadiogroupAndroid:id= "@+id/main_bottom_bar"Android:layout_width= "Match_parent"Android:layout_height= "50DP"Android:layout_alignparentbottom= "true"Android:layout_alignparentleft= "true"Android:layout_alignparentstart= "true"android:orientation= "Horizontal"Android:paddingtop= "5DP"        >        <RadioButtonAndroid:layout_width= "0DP"Android:layout_height= "Wrap_content"Android:layout_weight= "1"Android:button= "@null"android:drawablepadding= "1DP"Android:drawabletop= "@drawable/main_bottombar_icon_home_selector"android:gravity= "Center"Android:text= "Tab01"Android:textcolor= "@color/main_bottombar_text_selector"android:textsize= "11SP"            />        <RadioButtonAndroid:layout_width= "0DP"Android:layout_height= "Wrap_content"Android:layout_weight= "1"Android:button= "@null"android:drawablepadding= "1DP"Android:drawabletop= "@drawable/main_bottombar_icon_home_selector"android:gravity= "Center"Android:text= "TAB02"Android:textcolor= "@color/main_bottombar_text_selector"android:textsize= "11SP"            />        <ImageButtonAndroid:layout_width= "0DP"Android:layout_height= "Wrap_content"android:layout_gravity= "Center_vertical"Android:layout_margintop= " -3DP"Android:layout_weight= "1"android:src= "@mipmap/ic_launcher"            />        <RadioButtonAndroid:layout_width= "0DP"Android:layout_height= "Wrap_content"Android:layout_weight= "1"Android:button= "@null"android:drawablepadding= "1DP"Android:drawabletop= "@drawable/main_bottombar_icon_home_selector"android:gravity= "Center"Android:text= "TAB03"Android:textcolor= "@color/main_bottombar_text_selector"android:textsize= "11SP"            />        <RadioButtonAndroid:layout_width= "0DP"Android:layout_height= "Wrap_content"Android:layout_weight= "1"Android:button= "@null"android:drawablepadding= "1DP"Android:drawabletop= "@drawable/main_bottombar_icon_home_selector"android:gravity= "Center"Android:text= "Tab04"Android:textcolor= "@color/main_bottombar_text_selector"android:textsize= "11SP"            />    </Radiogroup>

Note that the Radiogroup default is vertical arrangement, you need to set the direction of the horizontal line Oh ~

If you need to toggle tab at the top, you can refer to:

Https://github.com/hoang8f/android-segmented-control

Http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0512/1615.html

If you still need a red dot, you can refer to one of my GitHub projects, which is controlled by a custom radiogroup for red dots:

Https://github.com/tianzhijiexian/BottomTabBar

Source Download: http://download.csdn.net/detail/shark0017/8801535

Reference from: http://www.tuicool.com/articles/7VBbu2m

How to make a bottom toggle bar with RadioButton