How to implement "BottomNavigationView" but with Icon next to the text rather than stacked?

Question

I'm developing an app, and I've implemented a BottomNavigationView in my "activity_main.xml" layout but after seeing the guidelines of Material.io I noticed that there is an image with icons next to the text rather than being stacked.

I wanted to know if it was possible to implement my bottom navigation like that.

I've tried to access BottomNavigationMenuView but I am still learning about Java classes.

This is my code for activity_main.xml layout

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<com.errorerrorerror.espledwifi.CurvedBottomNavigationView
    android:id="@+id/customBottomBar"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:theme="@style/Widget.BottomNavigationView"
    app:itemBackground="@drawable/image_icon_font_bottom_view"
    app:itemIconTint="@color/color_font_icon_bottom_nav"
    app:itemTextColor="@color/color_font_icon_bottom_nav"
    app:labelVisibilityMode="selected"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

This is my code in MainActivity.java. I created a custom class for my BottomNavigation.

package com.errorerrorerror.espledwifi;

import android.graphics.Color;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewOutlineProvider;

import com.errorerrorerror.espledwifi.R;
import 
com.google.android.material.bottomnavigation.BottomNavigationMenuView;


public class MainActivity extends AppCompatActivity
{
@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Allows transparent status bar//
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

    //calls menu func
    bottomNavMenu();


}



protected void bottomNavMenu()
{
    CurvedBottomNavigationView curvedBottomNavigationView = findViewById(R.id.customBottomBar);
    //curvedBottomNavigationView.getOutlineProvider();
    BottomNavigationMenuView menuView = (BottomNavigationMenuView)
            curvedBottomNavigationView.getChildAt(0);


    for (int i = 0; i < menuView.getChildCount(); i++ )
    {
        final View iconView = menuView.getChildAt(i).findViewById(com.google.android.material.R.id.icon);

        final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();

        final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();

        layoutParams.height = (int)
            TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,20, displayMetrics);

        // set your width here
        layoutParams.width = (int)
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, displayMetrics);

        iconView.setLayoutParams(layoutParams);
    }
    curvedBottomNavigationView.setPadding(200,20,200,0); // Need to set top padding to 20 so the menu with icons and text shift to the bottom a bit.
}
} 

I expect the bottomNavigation to have the icons next to the text rather than being stacked if it's possible. Thank you!

Answer 1

I found this library that implement's horizontal font and icon and it's awesome. Here is the link.