Como alterar a fonte e o tamanho do CollapsingToolbarLayout?


Respostas:


139

Atualizar

Antes de mergulharmos no código, vamos primeiro decidir o textSizepara nosso CollapsingToolbarLayout. O Google publicou um site chamado material.io, este site também explica a melhor maneira de lidar com a tipografia .

O artigo mencionado sobre a categoria "Título", que também explica o tamanho de fonte recomendado para uso sp.

insira a descrição da imagem aqui

Embora o artigo nunca tenha mencionado o tamanho CollapsingToolbarLayout's expandido recomendado, a biblioteca com.android.support:designfornece um TextAppearancepara o nosso caso. Com algumas pesquisas com a fonte, descobriu-se que o tamanho é 34sp(não mencionado no artigo).

Então, que tal o tamanho reduzido? Felizmente, o artigo mencionou algo e é 20sp.

insira a descrição da imagem aqui

E o melhor TextAppearanceaté agora que se encaixa no modo reduzido é TextAppearance.AppCompat.Titleenquanto o modo expandidoTextAppearance está TextAppearance.Design.CollapsingToolbar.Expanded.

Se você observar todos os nossos exemplos, acima de todos eles usa a versão REGULAR da fonte que é seguro dizer que Roboto regularfará a tarefa a menos que você tenha requisitos específicos.

Pode ser muito trabalhoso baixar as fontes em si, por que não usar uma biblioteca que tem todas as fontes Roboto necessárias? Então, apresento uma biblioteca de caligrafia para Roboto, por exemplo, 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)
}

Esta é uma atualização de 2019 porque a biblioteca Typer foi atualizada! Eu também sou o autor da biblioteca.


1
alguma

@ Mr.G use app: titleMargin = "" em sua barra de ferramentas.
Emre Akcan

82

Você pode usar os novos métodos públicos, em CollapsingToolbarLayoutpara definir a fonte para o título recolhido e expandido, assim:

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

Parece ter sido adicionado à biblioteca de suporte de design 23.1.0 e é uma adição muito bem-vinda.


Como você muda o título? Quero definir o título para um texto diferente programaticamente.
Equivocal

1
Você provavelmente pode usar o setTitle(String)método na CollapsingToolbarLayoutinstância.
Neal Sanche

67

Você pode fazer algo assim:

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

O estilo de visualização de texto correspondente pode ser:

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

também veja aqui para referência.


1
Este fez o trabalho para mim de mudar a cor do texto de título, desde que eu achar que Toolbar.setTitleTextColor()ou app:titleTextColorde Toolbarmudança doesnt a cor do título da barra de ferramentas quando fechado emCollapsingToolbarLayout
patrickjason91

1
@ patrickjason91 u must useCollapsingToolbarLayout 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>

Consulte aqui CollapsingToolbarLayout setTitle não funciona corretamente


12

Para adicionar a todas as respostas aqui, não funcionou para mim em xml, não importa onde eu tentei aplicar, em AppTheme, referenciar em estilos. Atualmente, estou usando a biblioteca de suporte 27.1.1

Funcionou apenas programaticamente.

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);

Certifique-se de definir primeiro o título da barra de ferramentas de recolhimento . Defina setCollapsedTitleTypeFace depois de definir o título que funcionou para mim.
pradip tilala de

sim funcionou para mim e deve funcionar para quem usa a pasta 'font'.
VipiN Negi

10

Parece que tenho solução:

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

10

O código está aqui

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

Adicione essas linhas de código no layout CollapsingToolbarLayout

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

E o código que é dado abaixo, em style.xml

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>

existe alguma maneira de definir a margem para reduzir o título?
Sr.G

4

Altere o tamanho da fonte ou pai.

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

1

O Android 8.0 (API de nível 26) introduziu um novo recurso, Fontes em XML

Agora você pode definir fontes como recurso https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Coloque suas fontes na res-> font->pasta
  • Defina 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>

próximo set

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.