Google's officially updated Support25.0.0 includes the bottom Navigation view, which is the bottom navigation bar component, as shown in the following figure:
Let's take a look at how to use this component
Upgrade Support package
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:design:25.0.0'
}Add layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_bottom_nav"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="net.devwiki.devwiki.ui.BottomNavActivity">
<TextView
android:id="@+id/nav_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_centerInParent="true"/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="@menu/menu_bottom_nav"
app:itemIconTint="#FFFFFF"
app:itemTextColor="#FFFFFF"
app:itemBackground="@color/colorPrimary">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>explain:
1. App: itemicon = "ා ffffff" set the color of the icon
App: itemtextcolor = "ාffffff" set the color of text
app:itemBackground="@color/colorPrimary" set background color
If the icon is set to red, it is as follows: (note the SVG image used in the figure)
2. App: Menu = "@ Menu / Menu ﹣ bottom ﹣ NAV" the Menu layout corresponding to the navigation bar is in the directory / res/menu /
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/bottom_nav_ui"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/nav_ui"
android:icon="@drawable/ic_menu_ui"/>
<item android:id="@+id/bottom_nav_data"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/nav_data"
android:icon="@drawable/ic_menu_data"/>
<item android:id="@+id/bottom_nav_service"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/nav_service"
android:icon="@drawable/ic_menu_service"/>
<item android:id="@+id/bottom_nav_net"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/nav_network"
android:icon="@drawable/ic_menu_network"/>
<item android:id="@+id/bottom_nav_media"
android:enabled="true"
app:showAsAction="ifRoom"
android:title="@string/nav_media"
android:icon="@drawable/ic_menu_media"/>
</menu>Listening for click events in Java
public class BottomNavActivity extends AppCompatActivity {
@BindView(R.id.nav_tv)
TextView mNavTv;
@BindView(R.id.bottom_nav)
BottomNavigationView mBottomNav;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom_nav);
ButterKnife.bind(this);
mNavTv.setText(R.string.nav_ui);
mBottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.bottom_nav_ui:
mNavTv.setText(item.getTitle());
break;
case R.id.bottom_nav_data:
mNavTv.setText(item.getTitle());
break;
case R.id.bottom_nav_service:
mNavTv.setText(item.getTitle());
break;
case R.id.bottom_nav_net:
mNavTv.setText(item.getTitle());
break;
case R.id.bottom_nav_media:
mNavTv.setText(item.getTitle());
break;
}
return true;
}
});
}
}Run and Preview
Compile the project and run it. The effect is as follows:
Mobile phone is entity key
Mobile phone is a virtual key
matters needing attention
1. The default height of bottomnavigationview is 56dp
2. No more than 5 menu items are recommended
3. For the convenience of setting the color of icon, SVG picture is recommended