than more four bottom android material-design bottom-sheet

android - more - bottomnavigationview max items



BottomNavigationView no es de ancho completo (3)

El BottomNavigationView no se muestra como ancho completo.

No se supone que lo haga.

De acuerdo con las pautas de diseño, el ancho de una acción puede variar entre 80dp y 168dp. Las dos acciones que ha definido no son suficientes para llenar toda el área horizontalmente.
(Como nota al margen, también de acuerdo con las pautas, la vista debe contener entre tres y cinco acciones).

Si desea llenar el espacio detrás de BottomNavigationView , puede configurar el color de fondo de la vista para que sea del mismo color que el fondo de los elementos:

<android.support.design.widget.BottomNavigationView android:background="@color/bottom_view_color" app:itemBackground="@color/bottom_view_color" // .... />

Estoy trabajando en una aplicación de Android e implementando BottomNavigationView desde la biblioteca de diseño. He visto muchos ejemplos y no puedo entender qué está mal con mi diseño. El BottomNavigationView no se muestra como ancho completo.

Otro problema es que el color de la barra de estado no se está aplicando.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Include the toolbar --> <include layout="@layout/toolbar"/> <RelativeLayout android:id="@+id/fragment_container" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_gravity="bottom" app:itemBackground="@color/colorPrimary" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white" app:menu="@menu/bottom_navigation_main"/> </android.support.design.widget.CoordinatorLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"/> </android.support.design.widget.AppBarLayout>

Edición : Solución agregada para el Color de estado que no se está configurando

android:fitsSystemWindows="true"

¿El color de la barra de estado (colorPrimaryDark) no funciona en Android v21?


Eso es factible. Pero volverá a cumplir con las especificaciones de diseño predeterminadas y le sugeriré que vaya con las especificaciones de diseño predeterminadas .

Ahora llegando a mi solución ...

Defina las dimensiones inferiores en dimens.xml . Estas dimensiones deben estar en values , values-large , values-large-land . Y 600dp se puede aumentar a 1000dp o más en values-large , values-large-land , si en la tableta no está viendo este cambio.

<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>

¡¡¡Y eso es!!! El resultado será como

No es un mazico.

¿Por qué las dimensiones se han agregado con tal nombre y valor es 600dp?

BottomNavigationMenuView.java está utilizando ambas dimensiones (que es la clase que se usa para representar el menú en BottomNavigationView ). A continuación se muestra el código

public BottomNavigationMenuView(Context context, AttributeSet attrs) { super(context, attrs); ... mInactiveItemMaxWidth = res.getDimensionPixelSize( R.dimen.design_bottom_navigation_item_max_width); .... mActiveItemMaxWidth = res.getDimensionPixelSize( R.dimen.design_bottom_navigation_active_item_max_width); ..... }

Ahora estos valores se están utilizando para crear vistas con ancho fijo, como se muestra a continuación

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { .... if (mShiftingMode) { final int inactiveCount = count - 1; final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth; final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth); final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount; final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth); ... } else { final int maxAvailable = width / count; final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth); ..... } .... }

Para usar el valor de activeMaxAvailable siempre, establezco un valor ficticio en mActiveItemMaxWidth (en las dimensiones anteriores). Así que activeWidth tendrá el valor de activeMaxAvailable . La misma regla aplica para inactiveWidth .

Entonces, cuando compile el proyecto, design_bottom_navigation_item_max_width y design_bottom_navigation_active_item_max_width definidos en design-support-lib , serán reemplazados por dimensiones definidas por nosotros.

Código verificado en el máximo de opciones admitidas (5 máximo) también.


Sugiero usar solo

android:background="@color/bottom_view_color"

Mostrará la barra como ancho completo y mantendrá el efecto de onda cuando el usuario haga clic en los elementos.

Si también agrega la app:itemBackground , perderá el efecto de onda.

En tu caso

<android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_gravity="bottom" android:background="@color/colorPrimary" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white" app:menu="@menu/bottom_navigation_main"/>