Address: https://github.com/roughike/BottomBar
Usage: compile 'com.roughike:bottom-bar:2.0.2'
used in the layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.yanruifeng.myapplication.TestThirdBottomBarActivity">
<com.roughike.bottombar.BottomBar
android:id="@+id/bb_bar"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
app:bb_tabXmlResource="@xml/nav"
app:bb_activeTabAlpha="1"
app:bb_activeTabColor="@color/color_checked"
android:layout_height="56dp"></com.roughike.bottombar.BottomBar>
</RelativeLayout>
Create a new xml directory under res, and create a file named nav.xml in the xml directory
<?xml version="1.0" encoding="utf-8" ?>
<tabs>
<tab
id="@+id/home"
icon="@drawable/nav_homeicon_change"
title="首页" />
<tab
id="@+id/message"
icon="@drawable/nav_msgicon_change"
title="消息" />
<tab
id="@+id/my"
icon="@drawable/nav_myicon_change"
title="我的"/>
</tabs>
- The problem to be noted above is that your tab attribute cannot use andoroid:id android:icon android:title or you will be responsible for the consequences
- That is, xmlns:android=”http://schemas.android.com/apk/res/android” namespace cannot be introduced. Create each corresponding selected and unselected navigation menu
in the drawable directory. For example, I wrote three
nav_homeicon_change.xml
<?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/home_selected"></item>
<item android:state_selected="false" android:drawable="@drawable/home"></item>
</selector>
nav_msgicon_change.xml
<?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/msg_selected"></item>
<item android:state_selected="false" android:drawable="@drawable/msg"></item>
</selector>
nav_myicon_change.xml
<?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/my_selected"></item>
<item android:state_selected="false" android:drawable="@drawable/my"></item>
</selector>
Use the following code in the activity to dynamically switch the bottom navigation icon icon
public class TestThirdBottomBarActivity extends AppCompatActivity {
@BindView(R.id.bb_bar)
BottomBar bbbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test_third_bottom_bar);
ButterKnife.bind(this);
bbbar.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelected(int tabId) {
for(int i=0;i<bbbar.getTabCount();i++){
bbbar.getTabAtPosition(i).setSelected(false);
}
switch (tabId){
case R.id.home:
bbbar.getTabAtPosition(0).setSelected(true);
break;
case R.id.message:
bbbar.getTabAtPosition(1).setSelected(true);
break;
case R.id.my:
bbbar.getTabAtPosition(2).setSelected(true);
break;
}
}
});
}
}
Give me a thumbs up if you like it! Thank you