web-dev-qa-db-fra.com

Comment modifier la taille du texte de l'élément de navigation?

Google récemment publié le widget Android.support.design.widget.NavigationView faisant partie de la bibliothèque com.Android.support:design:22.2.0, ce qui simplifie grandement (et normalise) le processus de création d'un NavigationDrawer.

Toutefois, conformément aux spécifications de conception }, l'élément de la liste doit être Roboto Medium, 14sp, 87% # 000000. La NavigationView n'expose ni textSize ni textStyle à cette personnalisation.

Material design specsFont style info

Quelles sont mes options si je suis pédant pour maintenir les spécifications de conception correctes en utilisant la NavigationView fournie par Google (ou en la personnalisant de toute autre manière)?

androidnavigation-drawermaterial-designandroiddesignsupport
54
jay

Depuis la bibliothèque de support Android 22.2.1, Google a modifié la taille du texte textuel par défaut des éléments NavigationView de 16 à 14 ps, ce qui convient parfaitement aux directives de Material Design. Toutefois, dans certains cas (par exemple, lorsque vous souhaitez prendre en charge la langue chinoise), il semble que plus grand est le format de texte plus grand. La solution est simple:

  1. ajoutez app:theme="@style/yourStyle.Drawer" à votre NavigationView dans votre layout.xml
  2. dans styles.xml, ajoutez Android:textSize="16sp" dans le style yourStyle.Drawer
51
ywwynm

créer du style

<style name="NavigationDrawerStyle">

        <item name="Android:textSize">20sp</item><!-- text size in menu-->

        <!-- item size in menu-->
        <item name="Android:listPreferredItemHeightSmall">40dp</item>
        <item name="listPreferredItemHeightSmall">40dp</item>

        <!-- item padding left in menu-->
        <item name="Android:listPreferredItemPaddingLeft">8dp</item>
        <item name="listPreferredItemPaddingLeft">8dp</item>

        <!-- item padding right in menu-->
        <item name="Android:listPreferredItemPaddingRight">8dp</item>
        <item name="listPreferredItemPaddingRight">8dp</item>
    </style>

ajoutez-le à votre main_layout.xml

  <Android.support.design.widget.NavigationView
       ...
        app:theme="@style/NavigationDrawerStyle"
       ....>


    </Android.support.design.widget.NavigationView>

tous les paramètres (que vous pouvez modifier) ​​se trouvent ici modifie les éléments de navigation. 

Vous pouvez également remplacer le fichier *.xml (copier le fichier à partir de ...\sdk\extras\Android\support\design\res\layout\design_navigation_item.xml), il suffit de créer dans votre dossier app/src/main/res/layout un modèle nommé 

design_navigation_item.xml 

<Android.support.design.internal.NavigationMenuItemView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/listPreferredItemHeightSmall"
    Android:paddingLeft="?attr/listPreferredItemPaddingLeft"
    Android:paddingRight="?attr/listPreferredItemPaddingRight"
    Android:drawablePadding="@dimen/navigation_icon_padding"
    Android:gravity="center_vertical|start"
    Android:maxLines="1"
    Android:fontFamily="sans-serif-thin"
    Android:textSize="22sp"
    Android:textAppearance="?attr/textAppearanceListItem" />

toutes les dispositions qui peuvent être Overriden se trouvent ici ...\sdk\extras\Android\support\design\res\layout\

design_layout_snackbar.xml
design_layout_snackbar_include.xml
design_layout_tab_icon.xml
design_layout_tab_text.xml
design_navigation_item.xml
design_navigation_item_header.xml
design_navigation_item_separator.xml
design_navigation_item_subheader.xml
design_navigation_menu.xml

[UPDATE] Chaque version de com.Android.support:design-{version} lib a différents éléments à remplacer. Cochez tout ce dont vous avez besoin 

 enter image description here

95
NickUnuchek

Vous pouvez tout personnaliser, de la couleur du texte à la taille et à la police dans votre style.xml

<style name="NavDrawerTextStyle" parent="Base.TextAppearance.AppCompat">
    <item name="Android:textColor">@color/colorPrimaryDark</item>
    <item name="Android:textSize">16sp</item>
    <item name="Android:textStyle">bold</item>
</style>

puis dans votre NavigationView:

<Android.support.v4.widget.DrawerLayout 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/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:openDrawer="start">

<Android.support.design.widget.NavigationView
    ...
    Android:itemTextAppearance="@style/NavDrawerTextStyle"
     />

48
ojonugwa ochalifu

vous pouvez utiliser ces attributs dans un fichier xml

app:itemTextAppearance="?android:attr/textAppearanceMedium"

ou pour petit texte

app:itemTextAppearance="?android:attr/textAppearance"

ou pour le gros texte

app:itemTextAppearance="?android:attr/textAppearanceLarge"
13
Mostafa Anter

Cela a fonctionné pour moi:

activity_main.xml

<Android.support.design.widget.NavigationView
    Android:id="@+id/navigation_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:theme="@style/NavigationDrawerStyle"
    app:headerLayout="@layout/navdrawer_header"
    app:menu="@menu/navdrawer_menu" />

styles.xml

<style name="NavigationDrawerStyle">
    <item name="Android:textSize">16sp</item>
</style>
6
Philip Belgrave-Herbert

Parcourir le code source J'ai trouvé ce fichier de mise en page

/platform/frameworks/support/.../design/res/layout/design_drawer_item.xml

avec l'attribut suivant

<Android.support.design.internal.NavigationMenuItemView
    ...
    Android:textAppearance="?attr/textAppearanceListItem"

Ce qui voulait dire que tout ce que nous avions à faire était de remplacer le style textAppearanceListItem dans notre projet.

res/values ​​/ styles.xml

<style name="AppTheme" ... >
    ...
    <item name="textAppearanceListItem">@style/list_item_appearance</item>
</style>

<style name="list_item_appearance">
    <item name="Android:textSize">14sp</item>
    <item name="Android:fontFamily">sans-serif-medium</item>
</style>

Je ne suis pas tout à fait sûr de ce que cela va affecter, mais si quelqu'un a une meilleure réponse, je serais heureux de l'accepter à la place!

6
jay

Peut-être que cela pourrait aider. Récemment, je devais le faire par programme… .. J'ai utilisé cette classe:

public class CustomTypefaceSpan extends TypefaceSpan {

private final Typeface newType;
private final float newSp;

public CustomTypefaceSpan(String family, Typeface type, float sp) {
    super(family);
    newType = type;
    newSp = sp;
}

@Override
public void updateDrawState(TextPaint ds) {
    applyCustomTypeFace(ds, newType, newSp);
}

@Override
public void updateMeasureState(TextPaint Paint) {
    applyCustomTypeFace(Paint, newType, newSp);
}

private static void applyCustomTypeFace(Paint paint, Typeface tf, float sp) {
    int oldStyle;
    Typeface old = Paint.getTypeface();
    if (old == null) {
        oldStyle = 0;
    } else {
        oldStyle = old.getStyle();
    }

    int fake = oldStyle & ~tf.getStyle();
    if ((fake & Typeface.BOLD) != 0) {
        Paint.setFakeBoldText(true);
    }

    if ((fake & Typeface.ITALIC) != 0) {
        Paint.setTextSkewX(-0.25f);
    }

    Paint.setTextSize(sp);
    Paint.setTypeface(tf);
}

@SuppressWarnings("unused")
public static final Parcelable.Creator<CustomTypefaceSpan> CREATOR = new Parcelable.Creator<CustomTypefaceSpan>() {
    @Override
    public CustomTypefaceSpan createFromParcel(Parcel in) {
        return null;
    }

    @Override
    public CustomTypefaceSpan[] newArray(int size) {
        return new CustomTypefaceSpan[size];
    }
};
}

Puis j'ai utilisé comme ça:

// This is for color
SpannableString s = new SpannableString(item.getTitle().toString());
                    s.setSpan(new ForegroundColorSpan(Color.RED), 0, s.length(), 0);

// This is for typeface and size
Typeface typeFace = Functions.getTypeface(this, "Avenir");

if (typeFace != null) {
    int size = 19;
    float scaledSizeInPixels = size * getResources().getDisplayMetrics().scaledDensity;
    CustomTypefaceSpan spanTypeFace = new CustomTypefaceSpan(item.getTitle().toString(), typeFace, scaledSizeInPixels);
    s.setSpan(spanTypeFace, 0, s.length(), 0);
}
item.setTitle(s);

J'espère que cela t'aides.

2
Dario Pellegrini

Liste des adaptateurs de votre barre de navigation:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">

<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" 
    Android:padding="10dp"
    Android:orientation="horizontal"
    Android:background="@drawable/pressed_state">

    <TextView
        Android:id="@+id/textView_list_item"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerVertical="true"
        Android:layout_toRightOf="@+id/imageView_icons"
        Android:textStyle="bold"
        Android:layout_marginLeft="10dp"
        Android:textColor="@color/white"
        Android:textSize="17sp" />


    <ImageView 
        Android:id="@+id/list_adapter_image"
        Android:layout_width="10dp"
        Android:layout_height="10dp"
        Android:layout_centerVertical="true"
        Android:layout_alignParentRight="true"
        Android:visibility="visible"
        Android:layout_marginRight="50dp"
        Android:background="@drawable/circle_orange"/>

</RelativeLayout>

<LinearLayout 
    Android:layout_height="1dp"
    Android:layout_width="match_parent"
    Android:background="#EC1294"></LinearLayout>

</LinearLayout>

Ce paramètre dans RelativeLayout définit la couleur d'arrière-plan -> Android: background = "@ drawable/colored_state"

Faites ce "colored_state.xml" dans un dossier pouvant être dessiné.

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

 <item Android:drawable="@color/light_blue" Android:state_pressed="true"/>

Excuse moi pour mon anglais.

0
Chaudhary Amar
  1. Ouvrir ou créer des valeurs\dimens.xml

  2. Ajoutez ce code:

    <dimen name = "design_bottom_navigation_text_size" outils: override = "true"> 11sp </ dimen > <dimen name = "design_bottom_navigation_active_text_size" outils: override = "true"> 12sp </ dimen>

Ça devrait marcher

P.S supprimer l'espace après <avant dimen

0
Elvira Minnullina

Allez à activity_main.xml et sélectionnez nav_view dans la conception. Vous pouvez modifier la taille du texte des éléments de menu en mettant à jour itemTextAppearance et itemTextColor comme suit  navigation_view_item_style 

0
poornima