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