Como alterar a fonte e o tamanho do CollapsingToolbarLayout?

86

Desejo alterar CollapsingToolbarLayouto tamanho da fonte e seu tipo de letra. Como posso conseguir isso?

insira a descrição da imagem aqui

AlexMomotov
fonte
3
tentou setCollapsedTitleTextAppearance (); e setCollapsedTitleTextColor (); função?
Abhishek
@abhishek, não é o que procuro. Não consigo mudar o tipo de letra via xml.
AlexMomotov

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.

Enzokie
fonte
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.

Neal Sanche
fonte
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.

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

ouriço
fonte
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);
Sentou
fonte
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) {
    }
}
AlexMomotov
fonte
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>
Ashish Saini
fonte
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>
Priya Rajan
fonte
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)
Hitesh Sahu
fonte