让我们先看效果图：
图一是默认效果图，图二是点击首页的效果图（图标和字体颜色会变化）
接下来是实现方法
1、先写布局。
我新建了一个ShoppingActivity，在activity_shopping.xml文件中，写整体布局，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="#fff"tools:context=".ShoppingActivity"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><RadioGroupandroid:id="@+id/rg_main"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:background="#FBFBFA"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_home"android:drawableTop="@drawable/home_button_selector"style="@style/MainButtonStyle"android:text="首页"/><RadioButtonandroid:id="@+id/rb_type"android:drawableTop="@drawable/type_button_selector"style="@style/MainButtonStyle"android:text="分类"/><RadioButtonandroid:id="@+id/rb_community"android:drawableTop="@drawable/community_button_selector"style="@style/MainButtonStyle"android:text="发现"/><RadioButtonandroid:id="@+id/rb_cart"android:drawableTop="@drawable/cart_button_selector"style="@style/MainButtonStyle"android:text="购物车"/><RadioButtonandroid:id="@+id/rb_user"android:drawableTop="@drawable/user_button_selector"style="@style/MainButtonStyle"android:text="个人中心"/></RadioGroup></LinearLayout>相信很多小伙伴写了上面代码后，有不少飘红，那是因为样式和图片没有添加。
2、接下来添加图片。我这里是在图标库找的一些图标，这里给大家分享一个网址，里面有很多图标，大家可以根据自己需要去下载。
iconfont-阿里巴巴矢量图标库
下面这些是我保存的一些图标，大家下载的时候，最好每个图标下载两个不一样颜色的，后面样式中会用到（灰色图标是默认效果，橙红色图标是点击的效果）
将下载好的图标保存在drawable文件夹中。
3、下面为RadioButton按钮添加样式。
首先在styles文件中，添加下面代码：
<style name="MainButtonStyle"><item name="android:layout_width">0dp</item><item name="android:layout_height">wrap_content</item><item name="android:layout_weight">1</item><item name="android:textColor">@drawable/bottom_button_text_selector</item><item name="android:button">@null</item><item name="android:textSize">10sp</item><item name="android:gravity">center</item><item name="android:padding">8dp</item>
</style>接着在drawable里面新建 bottom_button_text_selector.xml。为RadioButton按钮中的文本添加点击时的样式。
这是新建的文件的方法，截图如下：
这是具体代码：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置下方图标被选中时，文本颜色--><item android:color="#535353" android:state_checked="false"></item><item android:color="#ff4040" android:state_checked="true"></item>
</selector>在drawable里面新建home_button_selector.xml。为RadioButton按钮中的"首页"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时，图标颜色--><item android:drawable="@drawable/index" android:state_checked="false"></item><item android:drawable="@drawable/index1" android:state_checked="true"></item></selector>在drawable里面新建type_button_selector.xml。为RadioButton按钮中的"分类"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时，图标颜色--><item android:drawable="@drawable/type" android:state_checked="false"></item><item android:drawable="@drawable/type1" android:state_checked="true"></item></selector>在drawable里面新建community_button_selector.xml。为RadioButton按钮中的"发现"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时，图标颜色--><item android:drawable="@drawable/found" android:state_checked="false"></item><item android:drawable="@drawable/found1" android:state_checked="true"></item></selector>在drawable里面新建cart_button_selector.xml。为RadioButton按钮中的"购物车"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时，图标颜色--><item android:drawable="@drawable/shop" android:state_checked="false"></item><item android:drawable="@drawable/shop1" android:state_checked="true"></item></selector>在drawable里面新建user_button_selector.xml。为RadioButton按钮中的"个人中心"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时，图标颜色--><item android:drawable="@drawable/my" android:state_checked="false"></item><item android:drawable="@drawable/my1" android:state_checked="true"></item></selector>实现效果如下：
以上就是商城的底部导航的样式。运行后，点击首页，就是上图的样式，点击个人中心，个人中心的图标会变亮，其他的图标都是灰色。
想看商城的具体实现，可以去主页看看其他文章哦。
