0

I created a BottomNav with 3 normal elements and one "custom" point for a "More Menu":

enter image description here

But I don't understand why it would place it so differently than the others? The only difference is that the more menu is not a part of the bottom_nav_graph.xml, because it is a custom added item. Other than that it's just like the other items.


EDIT: With the suggestion in the comments, it really seems to work. But still, is there no way for me to distribute the items evenly, or make them all equally wide to also accomodate for long names?

enter image description here


bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home_screen"
        android:icon="@drawable/ic_add_white_24dp"
        android:title="@string/title_activity_journey" />

    <item
        android:id="@+id/navigation_sas"
        android:icon="@drawable/ic_check_white_24dp"
        android:title="@string/title_activity_sa" />

    <item
        android:id="@+id/navigation_profile"
        android:icon="@drawable/ic_close_white_24dp"
        android:title="@string/title_profile" />

    <item
        android:id="@+id/navigation_more_menu"
        android:icon="@drawable/ic_more_horiz_24"
        android:title="@string/title_more_menu" />
</menu>

bottom_nav_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
    app:startDestination="@id/navigation_home_screen">

    <fragment
        android:id="@+id/navigation_home_screen"
        android:name="com.dev.solidmind.ui.HomeScreenFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home_screen" />

    <fragment
        android:id="@+id/navigation_sas"
        android:name="com.dev.solidmind.ui.SA_Fragment"
        android:label="@string/title_activity_sa"
        tools:layout="@layout/fragment_sa" />

    <fragment
        android:id="@+id/navigation_profile"
        android:name="com.dev.solidmind.ui.ProfileFragment"
        android:label="@string/title_profile"
        tools:layout="@layout/fragment_profile" />
</navigation>

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:id="@+id/main_root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/bottom_nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="?android:attr/windowBackground"
        app:itemIconTint="@color/bottom_nav_color_selector"
        app:itemTextColor="@color/bottom_nav_color_selector"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

Code to set up BottomNav

private void setUpBottomNavigation() {
        BottomNavigationView bottomNavView = findViewById(R.id.nav_view);
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home_screen, R.id.navigation_sas, R.id.navigation_profile, R.id.navigation_more_menu)
                .build();

        NavHostFragment navHostFragment = (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.nav_host_fragment);
        NavController navController = Objects.requireNonNull(navHostFragment).getNavController();

        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
        NavigationUI.setupWithNavController(bottomNavView, navController);

        navController.addOnDestinationChangedListener((controller, destination, arguments) -> {
            if (destination.getId() == R.id.navigation_home_screen) {
                Objects.requireNonNull(getSupportActionBar()).hide();
            } else {
                Objects.requireNonNull(getSupportActionBar()).show();
            }
        });

        bottomNavView.setOnNavigationItemSelectedListener(menuItem -> {
            if (menuItem.getItemId() == R.id.navigation_more_menu) {
                openBottomSheet();
                return true;
            } else if (menuItem.getItemId() == R.id.navigation_home_screen) {
                navController.navigate(R.id.navigation_home_screen);
                return true;
            } else if (menuItem.getItemId() == R.id.navigation_sas) {
                navController.navigate(R.id.navigation_sas);
                return true;
            } else if (menuItem.getItemId() == R.id.navigation_profile) {
                navController.navigate(R.id.navigation_profile);
                return true;
            } else return false;
        });
    }
Big_Chair
  • 2,781
  • 3
  • 31
  • 58
  • 1
    Give same name to each menu item for testing purpose. The second item 'self-affirmation' is disturbing the width ratio I guess. – Hamza Israr Oct 30 '20 at 00:03
  • @HamzaIsrar Wow, you were right, see my edit. But still, why can I not distribute the space evenly somehow? Or make all items equally big? – Big_Chair Oct 30 '20 at 18:30
  • It distribute the Menu evenly or let's say according to the size of the largest item. So you should you concise words and it will take care of the rest. – Hamza Israr Oct 30 '20 at 20:08

0 Answers0