Android Bottom Navigation Bar : Rounded Corners
August 04, 2023
BottomNavigationView which is a material shape. To create a rounded corner of a material shape, we use MaterialShapeDrawable.1. BottomNavigationView : Represents a standard bottom navigation bar for application.
2. MaterialShapeDrawable : Base class to handle shadows, elevation, scale and color for Material Shapes.
3. ShapeAppearanceModel : This class is used by
MaterialShapeDrawable to generate and render the shape for a view's background. The ShapeAppearanceModel is set to MaterialShapeDrawable using its setShapeAppearanceModel() method.
4. ShapeAppearanceModel.Builder : Contains the methods to model the edges and corners of a shape.
Find the code to create rounded corner for bottom navigation bar.
BottomNavigationView bottomNavView = findViewById(R.id.bottom_nav_view);
float cornerRadius = getResources().getFloat(R.dimen.corner_radius);
MaterialShapeDrawable materialShapeDrawable = (MaterialShapeDrawable)bottomNavView.getBackground();
ShapeAppearanceModel shapeAppearanceModel = materialShapeDrawable.getShapeAppearanceModel().toBuilder()
.setTopRightCorner(CornerFamily.ROUNDED, cornerRadius)
.setTopLeftCorner(CornerFamily.ROUNDED, cornerRadius)
.setBottomRightCorner(CornerFamily.ROUNDED, cornerRadius)
.setBottomLeftCorner(CornerFamily.ROUNDED, cornerRadius)
.build();
materialShapeDrawable.setShapeAppearanceModel(shapeAppearanceModel);
ShapeAppearanceModel.Builder
TheShapeAppearanceModel class models the edges and corners of a shape. It is used by MaterialShapeDrawable to generate and render the shape for a view's background. To create the instances of ShapeAppearanceModel, it has nested Builder class.
Find the constructors of
Builder class.
Builder() Builder(ShapeAppearanceModel other)
Builder class to set corner.
1. Methods to set the corner treatment for the top left corner.
setTopLeftCorner(CornerTreatment topLeftCorner) setTopLeftCorner(int cornerFamily, float cornerSize) setTopLeftCorner(int cornerFamily, CornerSize cornerSize)
cornerFamily can be CornerFamily.ROUNDED or CornerFamily.CUT.
2. Methods to set the corner treatment for the top right corner.
setTopRightCorner(CornerTreatment topRightCorner) setTopRightCorner(int cornerFamily, float cornerSize) setTopRightCorner(int cornerFamily, CornerSize cornerSize)
setBottomLeftCorner(CornerTreatment bottomLeftCorner) setBottomLeftCorner(int cornerFamily, float cornerSize) setBottomLeftCorner(int cornerFamily, CornerSize cornerSize)
setBottomRightCorner(CornerTreatment bottomRightCorner) setBottomRightCorner(int cornerFamily, float cornerSize) setBottomRightCorner(int cornerFamily, CornerSize cornerSize)
setAllCorners(CornerTreatment cornerTreatment) setAllCorners(int cornerFamily, float cornerSize)
All the above methods return
Builder instnace.
Example
MainActivity.java
package com.cp.app;
import android.content.res.ColorStateList;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import com.cp.app.databinding.ActivityMainBinding;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.shape.CornerFamily;
import com.google.android.material.shape.MaterialShapeDrawable;
import com.google.android.material.shape.ShapeAppearanceModel;
public class MainActivity extends AppCompatActivity {
private ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
// Start setting ShapeAppearanceModel
BottomNavigationView bottomNavView = findViewById(R.id.bottom_nav_view);
float cornerRadius = getResources().getFloat(R.dimen.corner_radius);
MaterialShapeDrawable materialShapeDrawable = (MaterialShapeDrawable)bottomNavView.getBackground();
ShapeAppearanceModel shapeAppearanceModel = materialShapeDrawable.getShapeAppearanceModel().toBuilder()
.setTopRightCorner(CornerFamily.ROUNDED, cornerRadius)
.setTopLeftCorner(CornerFamily.ROUNDED, cornerRadius)
.setBottomRightCorner(CornerFamily.ROUNDED, cornerRadius)
.setBottomLeftCorner(CornerFamily.ROUNDED, cornerRadius)
.build();
materialShapeDrawable.setShapeAppearanceModel(shapeAppearanceModel);
// setting color
materialShapeDrawable.setFillColor(ColorStateList.valueOf(
ContextCompat.getColor(binding.getRoot().getContext(), R.color.green)));
// end
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
R.id.navigation_home, R.id.navigation_chat, R.id.navigation_settings, R.id.navigation_account)
.build();
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
NavigationUI.setupWithNavController(binding.bottomNavView, navController);
}
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
---------
</androidx.constraintlayout.widget.ConstraintLayout>
<resources>
------
<dimen name="corner_radius">70</dimen>
</resources>
