Creating a blur effect for a bottom navigation bar involves using various techniques, including graphical effects and UI design principles. but I have used just 5 steps to achieve this cool blur effect on  simple bottom navigation

Here's a general guide on how to achieve a blur effect for the bottom navigation bar in an Android app like IOS 

DEMO GIF 




1. Attach the maven repo on build.gradle(Project) or settings.gradle



maven { url 'https://jitpack.io' }







2 . Add Dependency 

build.gradle ( Module )
implementation 'com.github.Dimezis:BlurView:version-2.0.3'




3 . Add color overlay

res > values > colors.xml 
<color name="colorOverlay">#94000000</color>





4 . Add Bottom Navigation view inside BlurView of XML

YourActivity.xml
<eightbitlab.com.blurview.BlurView
android:id="@+id/blurView"
android:paddingBottom="38dp"
android:layout_width="match_parent"
				android:layout_height="wrap_content"
				app:blurOverlayColor="@color/colorOverlay">
<!-- your bottom navigation here -->
				<com.google.android.material.bottomnavigation.BottomNavigationView
...........................
........
.... />

			</eightbitlab.com.blurview.BlurView>



XML Example code


5 . Initialize the BlurView

MainActivity.java 
public class MainActivity extends  AppCompatActivity  {
BlurView blurView;
 onCreate(Bundle _savedInstanceState) {
 blurView = findViewById(R.id.blurView);
// blur render code
float radius = 16f;
View decorView = getWindow().getDecorView();
ViewGroup rootView = (ViewGroup) decorView.findViewById(android.R.id.content);
Drawable windowBackground = decorView.getBackground();

blurView.setupWith(rootView, new RenderScriptBlur(this)) // or RenderEffectBlur
.setFrameClearDrawable(windowBackground) // Optional
.setBlurRadius(radius);

}
....................
....
} 


MainActivity Example code



After adding Blur render code on MainActivity Example code



_______NOW ALL DONE ________


Some additional customization for the bottom navigation


add these attributes to BottomNavigationView 

app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"
app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"
android:hapticFeedbackEnabled="true"
app:itemIconTint="@drawable/bottom_nav_icon_color_selector"
app:itemTextColor="@drawable/bottom_nav_icon_color_selector"

bottom_nav_icon_color_selector.xml > Ceate  it on the drawable 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:color="@color/bottom_nav_color_active"  />
    <item android:state_pressed="true"
        android:state_enabled="true"
        android:color="@color/bottom_nav_color_active" />
      <item android:color="#B3B0B0" />
</selector>

FONT style bottom navigation 

Add it on the res > values > styles.xml 

<resources>

   <style name="BottomNavigationViewTextStyle">
      <item name="fontFamily">@font/dmsansbold</item>
   </style>

</resources>

Add your fonts on res > font > yout_font.ttf file



if you want a transparent status bar and bottom navigation button bar then attach this code to your activity > onCreate

                                                                    
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      Window w = getWindow(); // in Activity's onCreate() for instance
      w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, 
      WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
   }

If you face any issues you can email me at ettech1840@gmail.com