Wie ändere ich die Schriftart und Größe von CollapsingToolbarLayout?

Antworten:

138

Aktualisieren

Bevor wir uns mit dem Code befassen, entscheiden wir uns zunächst textSizefür unseren CollapsingToolbarLayout. Google hat eine Website mit dem Namen material.ioveröffentlicht. Auf dieser Website wird auch der beste Umgang mit Typografie erläutert .

Der Artikel erwähnte die Kategorie "Überschrift", in der auch die empfohlene Schriftgröße erläutert wird sp.

Geben Sie hier die Bildbeschreibung ein

Der Artikel erwähnte zwar nie die empfohlene CollapsingToolbarLayout's erweiterte Größe, aber die Bibliothek com.android.support:designbietet eine TextAppearancefür unseren Fall. Beim Graben mit der Quelle stellt sich heraus, dass die Größe ist 34sp(im Artikel nicht erwähnt).

Wie wäre es also mit der zusammengeklappten Größe? Zum Glück hat der Artikel etwas erwähnt und es ist 20sp.

Geben Sie hier die Bildbeschreibung ein

Und das Beste TextAppearance, was bisher in den Collpased- Modus passt, ist, TextAppearance.AppCompat.Titlewährend unser erweiterter Modus TextAppearanceist TextAppearance.Design.CollapsingToolbar.Expanded.

Wenn Sie alle unsere Beispiele beachten, verwenden vor allem die REGELMÄSSIGE Version der Schriftart, die mit Sicherheit Roboto regulardie Aufgabe erledigt , es sei denn, Sie haben spezielle Anforderungen.

Das Herunterladen der Schriftarten selbst ist möglicherweise zu aufwändig. Verwenden Sie eine Bibliothek mit allen erforderlichen Roboto-Schriftarten. Also stelle ich eine Kalligraphiebibliothek für Roboto vor, zB 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)
}

Dies ist ein Update für 2019, da die Typer-Bibliothek aktualisiert wurde! Ich bin auch der Autor der Bibliothek.

— Enzokie
quelle
1
— Gibt
@ Mr.G benutze App: titleMargin = "" in deiner Symbolleiste.
— Emre Akcan
82

Mit den neuen öffentlichen Methoden können Sie CollapsingToolbarLayoutdie Schriftart für den reduzierten und erweiterten Titel wie folgt festlegen:

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

Dies scheint in der Design Support Library 23.1.0 hinzugefügt worden zu sein und ist eine sehr willkommene Ergänzung.

— Neal Sanche
quelle
Wie änderst du den Titel? Ich möchte den Titel programmgesteuert auf einen anderen Text setzen.
— Zweideutig
1
Sie können die setTitle(String)Methode wahrscheinlich für die CollapsingToolbarLayoutInstanz verwenden.
— Neal Sanche
65

Sie können so etwas tun:

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

Der entsprechende Textansichtsstil könnte sein: 28sp # 000 fett 

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

siehe auch hier als Referenz.

— luochenhuan
quelle
1
Das hat die Arbeit für mich über die Titel Textfarbe zu ändern, da ich das finden Toolbar.setTitleTextColor()oder app:titleTextColorvon Toolbardoesnt ändert die Farbe des Titels der Symbolleiste , wenn eingeschlossen inCollapsingToolbarLayout
— patrickjason91
1
@ patrickjason91 u muss verwendenCollapsingToolbarLayout 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>

Referenz hier CollapsingToolbarLayout setTitle funktioniert nicht richtig

— Igel
quelle
12

Um alle Antworten hier hinzuzufügen, hat es in XML nicht funktioniert, egal wo ich versucht habe, in AppTheme auf Stile zu verweisen. Ich verwende derzeit die Support-Bibliothek 27.1.1

Es hat nur programmatisch funktioniert. 

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
— saß
quelle
Stellen Sie sicher, dass Sie zuerst den Titel der reduzierenden Symbolleiste festlegen . Setzen Sie setCollapsedTitleTypeFace, nachdem Sie den Titel festgelegt haben, der für mich funktioniert hat.
— Pradip Tilala
Ja, es hat bei mir funktioniert und sollte für diejenigen funktionieren, die den Ordner 'font' verwenden.
— VipiN Negi
10

Sieht so aus, als hätte ich eine Lösung:

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

Code ist hier

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

Fügen Sie diese Codezeilen in das Layout CollapsingToolbarLayout ein

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

Und der Code, der unten in style.xml angegeben ist

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>
— Ashish Saini
quelle
Gibt es überhaupt einen Spielraum, um den Titel zu reduzieren?
— Mr.G
4

Ändern Sie die Schriftgröße oder das übergeordnete Element.

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

Android 8.0 (API Level 26) hat eine neue Funktion eingeführt, Schriftarten in XML

Jetzt können Sie Schriftarten als Ressource https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html definieren

  • Legen Sie Ihre Schriftarten in einem res-> font->Ordner ab
  • Definieren Sie 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>

nächster Satz

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
— Hitesh Sahu
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.