¿Cómo cambiar el tipo de letra y el tamaño de CollapsingToolbarLayout?

Respuestas:

139

Actualizar

Antes de sumergirnos en el código, primero decidamos el textSizepara nuestro CollapsingToolbarLayout. Google publicó un sitio web llamado material.io, este sitio web también explica la mejor manera de lidiar con la tipografía .

El artículo menciona la categoría "Encabezado", que también explica el tamaño de fuente recomendado para usar sp.

ingrese la descripción de la imagen aquí

Aunque el artículo nunca mencionó el tamaño CollapsingToolbarLayout's expandido recomendado, la biblioteca com.android.support:designproporciona una TextAppearancepara nuestro caso. Con un poco de investigación con la fuente, resulta que el tamaño es 34sp(no mencionado en el artículo).

Entonces, ¿qué tal el tamaño colapsado? Por suerte el artículo mencionó algo y lo es 20sp.

ingrese la descripción de la imagen aquí

Y lo mejor TextAppearancehasta ahora que encaja en el modo collpased es TextAppearance.AppCompat.Titlemientras que nuestro modo expandidoTextAppearance es TextAppearance.Design.CollapsingToolbar.Expanded.

Si observa todos nuestros ejemplos anteriores, todos ellos usan la versión REGULAR de la fuente, lo cual es seguro decir que Roboto regularhará la tarea a menos que tenga requisitos específicos.

Puede ser demasiado trabajo descargar las fuentes en sí, ¿por qué no usar una biblioteca que tenga todas las fuentes Roboto necesarias? Así que presento una biblioteca de caligrafía para Roboto, por ejemplo, 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 es una actualización de 2019 porque la biblioteca Typer está actualizada! También soy el autor de la biblioteca.

— Enzokie
fuente
1
¿Hay alguna forma de establecer el margen para colapsar el título?
— Mr.G
@ Mr.G usa la aplicación: titleMargin = "" en tu barra de herramientas.
— Emre Akcan
82

Puede usar los nuevos métodos públicos, en CollapsingToolbarLayoutpara establecer el tipo de letra para el título contraído y expandido, así:

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

Esto parece haber sido agregado en la biblioteca de soporte de diseño 23.1.0, y es una adición muy bienvenida.

— Neal Sanche
fuente
¿Cómo se cambia el título? Quiero establecer el título en un texto diferente mediante programación.
— Equivocado
1
Probablemente puedas usar el setTitle(String)método en la CollapsingToolbarLayoutinstancia.
— Neal Sanche
67

Puedes hacer algo como esto:

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

El estilo de vista de texto correspondiente podría 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>

también vea aquí como referencia.

— luochenhuan
fuente
1
Esto hizo el trabajo para mí de cambiar el color del texto del título, ya que me parece que Toolbar.setTitleTextColor()o app:titleTextColorde Toolbarcambio duerma el color del título de la barra de herramientas cuando encerrado enCollapsingToolbarLayout
— patrickjason91
1
@ patrickjason91 debes usarCollapsingToolbarLayout 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>

Referencia aquí CollapsingToolbarLayout setTitle no funciona correctamente

— erizo
fuente
12

Para agregar a todas las respuestas aquí, no funcionó para mí en xml sin importar dónde intenté aplicar, en AppTheme, referencias en estilos. Actualmente estoy usando la biblioteca de soporte 27.1.1

Funcionó solo programáticamente. 

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
— se sentó
fuente
Asegúrese de establecer primero el título de la barra de herramientas Colapsar . Establecer setCollapsedTitleTypeFace después de configurar el título funcionó para mí.
— Pradip Tilala
sí, funcionó para mí y debería funcionar para quien usa la carpeta 'fuente'.
— VipiN Negi
10

Parece que tengo una solución:

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

El código está aquí

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

Agregue estas líneas de código en el diseño CollapsingToolbarLayout

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

Y el código que se proporciona a continuación, en style.xml

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>
— Ashish Saini
fuente
¿Hay alguna forma de establecer un margen para contraer el título?
— Mr.G
4

Cambie el tamaño de fuente o el padre.

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

Android 8.0 (API nivel 26) ha introducido una nueva función, Fuentes en XML

Ahora puede definir fuentes como recurso https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Pon tus fuentes en la res-> font->carpeta
  • Definir 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>

siguiente conjunto

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
— Hitesh Sahu
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.