Android Bottom Navigation Bar : Rounded Corners

By Arvind Rai, August 04, 2023
On this page we will learn to set corners rounded of a bottom navigation bar. To create a bottom navigation bar, we use 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); 
Find the print screen of the output.
Android Bottom Navigation Bar : Rounded Corners

ShapeAppearanceModel.Builder

The ShapeAppearanceModel 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) 
Now find some methods of 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) 
The values for 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) 
3. Methods to set the corner treatment for the bottom left corner.
setBottomLeftCorner(CornerTreatment bottomLeftCorner)
setBottomLeftCorner(int cornerFamily, float cornerSize)
setBottomLeftCorner(int cornerFamily, CornerSize cornerSize) 
4. Methods to set the corner treatment for the bottom left corner.
setBottomRightCorner(CornerTreatment bottomRightCorner)
setBottomRightCorner(int cornerFamily, float cornerSize)
setBottomRightCorner(int cornerFamily, CornerSize cornerSize) 
5. Methods to set all four corners.
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);
    }
} 
res/layout/activity_main.xml
<?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> 
res/values/dimens.xml
<resources>
    ------
    <dimen name="corner_radius">70</dimen>
</resources> 

Reference

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us