If you want to use the default navigation button of Android in such a way that you have the icon and the text side by side, you can use the following code. This code is not fundamental and get static value, but it starts the work
main.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:paddingTop="@dimen/_2sdp"
android:paddingBottom="@dimen/_2sdp"
android:paddingLeft="@dimen/_6sdp"
android:paddingRight="@dimen/_6sdp"
android:background="@color/background"
android:layout_height="@dimen/_40sdp"
app:labelVisibilityMode="selected"
android:theme="@style/Widget.BottomNavigationView"
app:menu="@menu/main_menu"/>
@style/Widget.BottomNavigationView
<style name="Widget.BottomNavigationView" parent="Widget.Design.BottomNavigationView">
<item name="android:textSize">@dimen/_10sdp</item>
<item name="android:minHeight">32dp</item>
<item name="android:minWidth">90dp</item>
<item name="android:layout_marginLeft">10dp</item>
</style>
main_menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/levels_navigation"
android:contentDescription="@string/menu_levels"
android:icon="@drawable/ic_menu_levels"
android:title="@string/menu_levels"/>
<item
android:id="@+id/progress_navigation"
android:contentDescription="@string/menu_progress"
android:icon="@drawable/ic_menu_progress"
android:title="@string/menu_progress"/>
<item
android:id="@+id/profile_navigation"
android:contentDescription="@string/menu_profile"
android:icon="@drawable/ic_menu_profile"
android:title="@string/menu_profile"/>
<item
android:id="@+id/notification_navigation"
android:contentDescription="@string/menu_profile"
android:icon="@drawable/ic_menu_notifications"
android:title="@string/menu_notification"/>
</menu>
