Custom TextSize of BottomNavigationView es compatible con Android

bottom navigation android

Question

Estoy intentando cambiar el tamaño de texto de BottomNavigationView de la biblioteca de soporte de Android 25.0.0

<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/colorPrimaryDark"
android:foregroundTint="@color/colorAccent"
app:itemIconTint="@android:color/white"
app:itemTextColor="@android:color/white"
app:layout_anchor="@id/lyt_container"
app:layout_anchorGravity="bottom"
app:itemTextAppearance="@style/TextStyleBNV"
app:menu="@menu/nav_menu" />
<style name="TextStyleBNV">
<item name="android:textSize">@dimen/twelve_sp</item>
<item name="android:padding">0dp</item>
<item name="textAllCaps">false</item>
</style>

¿Hay algo que me esté perdiendo?

Answer 1

Agregue el código TabTextStyle dentro de UpdateBarTextColor (este vacío existe en BottomBarPageRenderer)

 void UpdateBarTextColor()
{
if (_disposed || _bottomBar == null)
{
return;
}
//This is linked to styles.xml to set size of text
_bottomBar.SetTextAppearance(Resource.Style.TabTextStyle);
//Set color of text and icon in BottomNavBar
_bottomBar.SetActiveTabColor(Element.BarTextColor.ToAndroid(Color.FromHex("#0094F0")));
// The problem SetActiveTabColor does only work in fiexed mode // haven''t found yet how to set text color for tab items on_bottomBar, doesn''t seem to have a direct way
}

Y luego agrega esto dentro del styles.xml:

<style name="TabTextStyle" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">8dp</item>
</style> 

Answer 2

Desafortunadamente, esta primera versión de BottomNavigationView vino con muchas limitaciones. Y por ahora no puede cambiar el tamaño de los títulos con solo usar la API de diseño de soporte. Entonces, para resolver esta limitación, mientras que Google no la implementa, puedes hacer:

En tu dimen.xml puedes poner:

 <dimen name="design_bottom_navigation_text_size" tools:override="true">30sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">30sp</dimen>

Al hacer esto, está anulando el valor predeterminado de dimen que utilizan las clases internas de BottomNavigationView. Así que ten cuidado.

Answer 3

Otra solución es usar Spannable para ajustar el tamaño del color, la fuente u otros atributos de texto ...

private static class MenuSpannable extends MetricAffectingSpan{
int color = Color.RED;
int size = 40;
public MenuSpannable() {
setSelected(false);
}
@Override
public void updateMeasureState(TextPaint p) {
p.setColor(color);
p.setTextSize(size);
/* p.setText --- whatever --- */
}
@Override
public void updateDrawState(TextPaint tp) {
tp.setColor(color);
tp.setTextSize(size);
/* tp.setText --- whatever --- */
}
private void setSelected(boolean selected){
if(selected){
color = Color.RED;
size = 40;
}else{
color = Color.BLUE;
size = 20;
}
}
}

Y luego establece el intervalo para cualquier elemento del menú ...

@Override
protected void onCreate(Bundle savedInstanceState) {
BottomNavigationView mBottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_menu);
final Menu menu = mBottomNavigationView.getMenu();
final Font font = Font.getFromContext(this);
for(int i = 0; i < menu.size(); i++) {
SpannableString spannableString = new SpannableString(menu.getItem(i).getTitle());
spannableString.setSpan(new MenuSpannable(),0,spannableString.length(),0);
menu.getItem(i).setTitle(spannableString);
}
}

En caso de que quiera que el texto cambie con el estado de selección.

mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Menu menu = mBottomNavigationView.getMenu();
for(int i = 0; i < menu.size(); i++) {
MenuSpannable menuSpannable = new MenuSpannable();
menuSpannable.setSelected(item.getItemId() == menu.getItem(i).getItemId());
SpannableString sString = new SpannableString(menu.getItem(i).getTitle());
sString.setSpan(menuSpannable,0,sString.length(),0);
menu.getItem(i).setTitle(sString);
}
return false;
}
});

Answer 4

Para hacer esto, decidí anular el diseño del elemento de navegación:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/design_bottom_navigation_margin"
android:layout_marginBottom="@dimen/design_bottom_navigation_margin"
android:duplicateParentState="true" />
<android.support.design.internal.BaselineLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:clipToPadding="false"
android:paddingBottom="10dp"
android:duplicateParentState="true">
<TextView
android:id="@+id/smallLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/design_bottom_navigation_text_size"
android:singleLine="true"
android:duplicateParentState="true" />
<TextView
android:id="@+id/largeLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:textSize="@dimen/design_bottom_navigation_active_text_size"
android:singleLine="true"
android:duplicateParentState="true" />
</android.support.design.internal.BaselineLayout>
</merge>

Solo asegúrate de nombrarlo design_bottom_navigation_item

Answer 5

Puedes cambiarlo así. Usted solo tiene que conocer la identificación de las etiquetas que Google admite.

BottomNavigationView bottomNavigationView = (BottomNavigationView) fragmentActivity.findViewById(R.id.bottom_navigation);
TextView textView = (TextView) bottomNavigationView.findViewById(R.id.menu_item_home).findViewById(R.id.largeLabel);
textView.setTextSize(8);

LargeLabel es el id de etiqueta que Google usó en su biblioteca