How to set full width for bottom navigation in Android

Question

I am working in an Android app,In this I want to make set full width for bottom navigation tabs when I rotate the screen to landscape mode.

activit_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/Conslayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"

        android:animateLayoutChanges="true"
        android:layoutMode="opticalBounds"
        android:background="?android:attr/windowBackground"

        app:itemBackground="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation"
        app:itemIconTint="@color/color_selector"
        app:itemTextColor="@color/color_selector" />

</android.support.constraint.ConstraintLayout>

In this view I want to set the bottom navigation tabs to take full with like the Tab layout in the screen.

Thanks.

Aggress

Answer 1

I have a BottomNavigationView that fits the whole screen in landscape mode, I believe the key is to set android:background and app:itemBackground to the same color.
Here is my BottomNavigationView that fits the whole screen in landscape mode:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/colorBottomBar"
    app:itemBackground="@color/colorBottomBar"
    app:itemIconTint="@drawable/bottom_navigation_toolbar"
    app:itemTextColor="@drawable/bottom_navigation_toolbar"
    app:menu="@menu/bottom_bar"/>

EDIT:
I misunderstood your question, so basically you want to stretch your buttons, I copied your layout exactly, and in the folderres in the subfolder values I created a file named dimens.xml, inside this file put this:

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
    <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>

And just run your project again, the buttons will stretch. This is a quick solution, make sure that you check out this answer, because you need to take care of other screen sizes, the answer in this link gives a full and detailed solution.

Charybdis

After setting the same color also returns the same result as not matching the width on landscape mode – Aggress

@Aggress did you also set the width to match_parent? Let me try it myself with the ConstraintLayout. – Charybdis

Yes ,I have add both – Aggress

@Aggress I have just tried with your values in a ConstraintLayout and it works, can you provide the whole activity_main.xml file? – Charybdis

@Aggress please refer to the edit in my answer, it should work. – Charybdis

Answer 2

Try this it works for me in mobile as well as tab. Just set your own colors.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:animateLayoutChanges="true"
    android:background="@color/light_blue_500"
    android:layoutMode="opticalBounds"
    android:theme="@style/BottomNavAppTheme"
    app:itemBackground="@color/light_blue_500"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

This is my nav_item_color_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_enabled="true" />
    <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
</selector>

Pericarditis

Answer 3

Need to set your width to

"match_parent"

Rue