Come modificare il carattere e le dimensioni di CollapsingToolbarLayout?

Risposte:

139

Aggiornare

Prima di immergerci nel codice, decidiamo prima il textSizeper nostro CollapsingToolbarLayout. Google ha pubblicato un sito web chiamato material.io, questo sito spiega anche il modo migliore su come affrontare la tipografia .

L'articolo menzionato sulla categoria "Titolo" che spiega anche la dimensione del carattere consigliata da utilizzare sp.

inserisci qui la descrizione dell'immagine

Sebbene l'articolo non abbia mai menzionato la dimensione CollapsingToolbarLayout's estesa consigliata, ma la libreria com.android.support:designfornisce una TextAppearanceper il nostro caso. Con un po 'di scavo con la fonte si scopre che la dimensione è34sp (non menzionata nell'articolo).

Allora che ne dici delle dimensioni ridotte? Per fortuna l'articolo menzionava qualcosa e lo è 20sp.

inserisci qui la descrizione dell'immagine

E il migliore TextAppearancefinora che si adatta alla modalità collpasata è TextAppearance.AppCompat.Titlementre la nostra modalità espansa loTextAppearance è TextAppearance.Design.CollapsingToolbar.Expanded.

Se osservi tutti i nostri esempi sopra tutti, utilizza la versione REGOLARE del carattere che è sicuro di dire che Roboto regularfarà il compito a meno che tu non abbia requisiti specifici.

Potrebbe essere troppo faticoso scaricare i font stessi, perché non utilizzare una libreria che abbia tutti i font Roboto necessari? Quindi presento una libreria di calligrafia per Roboto, ad esempio 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">

Giava

// 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)
}

Questo è un aggiornamento del 2019 perché la libreria Typer è aggiornata! Sono anche l'autore della biblioteca.

— Enzokie
fonte
1
c'è comunque da impostare il margine per
— chiudere il
@ Mr.G usa app: titleMargin = "" sulla barra degli strumenti.
— Emre Akcan
83

È possibile utilizzare i nuovi metodi pubblici CollapsingToolbarLayoutper impostare il carattere tipografico per il titolo compresso ed espanso, in questo modo:

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

Questo sembra essere stato aggiunto nella libreria di supporto alla progettazione 23.1.0 ed è un'aggiunta molto gradita.

— Neal Sanche
fonte
Come si cambia il titolo? Voglio impostare il titolo su un testo diverso a livello di codice.
— Equivoco
1
Probabilmente puoi usare il setTitle(String)metodo CollapsingToolbarLayoutsull'istanza.
— Neal Sanche
67

Puoi fare qualcosa del genere:

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

Lo stile di visualizzazione del testo corrispondente potrebbe essere:

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

vedere anche qui per riferimento.

— luochenhuan
fonte
1
Questo ha fatto il lavoro per me di cambiare il colore del testo del titolo, in quanto trovo che Toolbar.setTitleTextColor()o app:titleTextColordel Toolbarcambiamento doesnt il colore del titolo di barra degli strumenti quando racchiuso inCollapsingToolbarLayout
— patrickjason91
1
@ patrickjason91 devi usareCollapsingToolbarLayout 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>

Fare riferimento qui CollapsingToolbarLayout setTitle non funziona correttamente

— riccio
fonte
13

Per aggiungere a tutte le risposte qui, non ha funzionato per me in xml, indipendentemente da dove ho provato ad applicare, in AppTheme, riferimenti negli stili. Attualmente sto utilizzando la libreria di supporto 27.1.1

Funzionava solo programmaticamente. 

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
— seduto
fonte
Assicurati di impostare prima il titolo della barra degli strumenti Comprimi . Imposta setCollapsedTitleTypeFace dopo aver impostato il titolo ha funzionato per me.
— Pradip Tilala
sì, ha funzionato per me e dovrebbe funzionare per chi usa la cartella "font".
— VipiN Negi
10

Sembra che io abbia una soluzione:

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

Il codice è qui

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

Aggiungi queste righe di codice nel layout CollapsingToolbarLayout

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

E il codice che viene fornito di seguito, in style.xml

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>
— Ashish Saini
fonte
c'è comunque da impostare il margine per comprimere il titolo?
— Signor G,
4

Cambia la dimensione del carattere o genitore.

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

Android 8.0 (livello API 26) ha introdotto una nuova funzionalità, Font in XML

Ora puoi definire i caratteri come risorsa https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Metti i tuoi caratteri nella res-> font->cartella
  • Definisci 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>

serie successiva

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
— Hitesh Sahu
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.