Comment changer la police et la taille de CollapsingToolbarLayout?

Réponses:

139

Mise à jour

Avant de plonger dans le code, décidons d'abord du textSizepour notre CollapsingToolbarLayout. Google a publié un site Web appelé material.io, ce site Web explique également la meilleure façon de traiter la typographie .

L'article mentionne la catégorie "Titre" qui explique également la taille de police recommandée à utiliser dans sp.

entrez la description de l'image ici

Bien que l'article n'ait jamais mentionné la taille CollapsingToolbarLayout's étendue recommandée, la bibliothèque en com.android.support:designfournit un TextAppearancepour notre cas. Avec quelques fouilles avec la source, il s'avère que la taille est 34sp(non mentionnée dans l'article).

Alors qu'en est-il de la taille réduite? Heureusement, l'article mentionnait quelque chose et ça l'est 20sp.

entrez la description de l'image ici

Et le meilleur à TextAppearancece jour qui s'adapte au mode réduit est TextAppearance.AppCompat.Titlependant que notre mode étenduTextAppearance est TextAppearance.Design.CollapsingToolbar.Expanded.

Si vous observez tous nos exemples ci-dessus, tous utilisent la version REGULAR de la police, ce qui est sûr de dire qu'elle Roboto regularfera la tâche sauf si vous avez des exigences spécifiques.

Le téléchargement des polices lui-même pourrait demander trop de travail, pourquoi ne pas utiliser une bibliothèque contenant toutes les polices Roboto nécessaires? Je présente donc une bibliothèque de calligraphie pour Roboto, par exemple Typer .

dependencies {
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.rhexgomez.typer:typer-roboto:2.0.0'
}

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

Java

// Java example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());

Kotlin

// Kotlin example
collapsing_toolbar.apply {
    setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
    setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
}

Il s'agit d'une mise à jour 2019 car la bibliothèque Typer est mise à jour! Je suis également l'auteur de la bibliothèque.

— Enzokie
source
1
est-il quand même possible de définir une marge pour
— réduire le
@ Mr.G utilise l'application: titleMargin = "" sur votre barre d'outils.
— Emre Akcan
82

Vous pouvez utiliser les nouvelles méthodes publiques, sur CollapsingToolbarLayoutpour définir la police du titre réduit et développé, comme ceci:

final Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/FrutigerLTStd-Light.otf");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);

Cela semble avoir été ajouté dans la bibliothèque de support de conception 23.1.0, et c'est un ajout très bienvenu.

— Neal Sanche
source
Comment changez-vous le titre? Je souhaite définir le titre sur un texte différent par programmation.
— Equivoque
1
Vous pouvez probablement utiliser la setTitle(String)méthode sur l' CollapsingToolbarLayoutinstance.
— Neal Sanche
67

Vous pouvez faire quelque chose comme ceci:

mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);

Le style d'affichage de texte correspondant peut être:

<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

voir également ici pour référence.

— luochenhuan
source
1
Cela a fait le travail pour moi de changer la couleur du texte du titre, car je trouve que Toolbar.setTitleTextColor()ou app:titleTextColorde ne Toolbarchange pas la couleur du titre de la barre d'outils lorsqu'elle est incluse dansCollapsingToolbarLayout
— patrickjason91
1
@ patrickjason91 vous devez utiliserCollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
— abbasalim
14 
    mCollapsingToolbar.setTitle(getTitle());
    mCollapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
    mCollapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);

<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="ExpandedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28.5sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24.5sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

Référence ici CollapsingToolbarLayout setTitle ne fonctionne pas correctement

— hérisson
source
12

Pour ajouter à toutes les réponses ici, cela n'a pas fonctionné pour moi en xml, peu importe où j'ai essayé d'appliquer, dans AppTheme, le référencement dans les styles. J'utilise actuellement la bibliothèque de support 27.1.1

Cela ne fonctionnait que par programme. 

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
— Sam
source
Assurez-vous de définir d'abord le titre de la barre d'outils Réduire . Définir setCollapsedTitleTypeFace après avoir défini le titre a fonctionné pour moi.
— pradip tilala du
oui cela a fonctionné pour moi et devrait fonctionner pour qui utilise le dossier «font».
— VipiN Negi
10

On dirait que j'ai une solution:

private void makeCollapsingToolbarLayoutLooksGood(CollapsingToolbarLayout collapsingToolbarLayout) {
    try {
        final Field field = collapsingToolbarLayout.getClass().getDeclaredField("mCollapsingTextHelper");
        field.setAccessible(true);

        final Object object = field.get(collapsingToolbarLayout);
        final Field tpf = object.getClass().getDeclaredField("mTextPaint");
        tpf.setAccessible(true);

        ((TextPaint) tpf.get(object)).setTypeface(Typeface.createFromAsset(getAssets(), "Roboto-Bold.ttf"));
        ((TextPaint) tpf.get(object)).setColor(getResources().getColor(R.color.ice));
    } catch (Exception ignored) {
    }
}
— AlexMomotov
source
10

Le code est ici

 <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
            app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="@dimen/expanded_toolbar_title_margin_start"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

Ajouter ces lignes de code dans la disposition CollapsingToolbarLayout

 app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
 app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"

Et le code qui est donné ci-dessous, dans style.xml

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>
— Ashish Saini
source
est-il possible de définir une marge pour réduire le titre?
— Mr.G du
4

Modifiez la taille de la police ou le parent.

<style name="expandedappbar" parent="@android:style/TextAppearance.Medium"> //Change Medium to Small
    <item name="android:textSize">28sp</item>  <!--Or Change the font size -->
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="collapsedappbar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/white</item>
</style>
— Priya Rajan
source
1

Android 8.0 (niveau d'API 26) a introduit une nouvelle fonctionnalité, les polices en XML

Vous pouvez désormais définir les polices comme ressource https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Mettez vos polices dans un res-> font->dossier
  • Définir font.xml
   <?xml version="1.0" encoding="utf-8"?>
      <font-family xmlns:android="http://schemas.android.com/apk/res/android">
        <font
            android:fontStyle="normal"
            android:fontWeight="400"
            android:font="@font/lobster_regular" />
        <font
            android:fontStyle="italic"
            android:fontWeight="400"
            android:font="@font/lobster_italic" />
    </font-family>

ensemble suivant

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
— Hitesh Sahu
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.