Как изменить шрифт и размер CollapsingToolbarLayout?

Я хочу изменить размер шрифта CollapsingToolbarLayout и его гарнитуру. Как я могу этого добиться?

введите описание изображения здесь


person AlexMomotov    schedule 31.07.2015    source источник
comment
попробовал setCollapsedTitleTextAppearance(); и setCollapsedTitleTextColor(); функция?   -  person Abhishek    schedule 31.07.2015
comment
@abhishek, это не то, что я ищу. Я не могу изменить шрифт через xml.   -  person AlexMomotov    schedule 31.07.2015


Ответы (9)


Обновлять

Прежде чем мы углубимся в код, давайте сначала определим textSize для нашего CollapsingToolbarLayout. Google опубликовал веб-сайт под названием material.io, на этом веб-сайте также объясняется, как лучше всего обращаться с Типографика.

В статье упоминается категория «Заголовок», в которой также объясняется рекомендуемый размер шрифта для использования в sp.

введите здесь описание изображения

Хотя в статье никогда не упоминался рекомендуемый CollapsingToolbarLayout's расширенный размер, библиотека com.android.support:design предоставляет TextAppearance для нашего случая. При некотором копании с исходником выясняется, что размер 34sp (в статье не упоминается).

Так как насчет свернутого размера? К счастью, в статье что-то упоминалось, и это 20sp.

введите здесь описание изображения

На данный момент лучшим TextAppearance, который подходит для свернутого режима, является TextAppearance.AppCompat.Title, а для нашего расширенного режима TextAppearance – TextAppearance.Design.CollapsingToolbar.Expanded.

Если вы посмотрите на все наши примеры выше, все они используют REGULAR версию шрифта, и можно с уверенностью сказать, что Roboto regular выполнит эту задачу, если у вас нет особых требований.

Загрузка самих шрифтов может оказаться слишком сложной задачей, почему бы не использовать библиотеку со всеми необходимыми шрифтами Roboto? Поэтому я представляю библиотеку каллиграфии для Roboto, например. Тайпер.

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 example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());

Котлин

// Kotlin example
collapsing_toolbar.apply {
    setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
    setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
}

Это обновление 2019 года, потому что обновлена ​​библиотека Typer! Я также являюсь автором библиотеки.

person Enzokie    schedule 20.09.2015
comment
есть ли способ установить поле, чтобы свернуть заголовок, - person Mr.G; 26.09.2018
comment
@Mr.G используйте app:titleMargin= на панели инструментов. - person Emre Akcan; 15.03.2019

Вы можете использовать новые общедоступные методы на CollapsingToolbarLayout, чтобы установить шрифт для свернутого и расширенного заголовка, например:

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

Кажется, это было добавлено в библиотеку поддержки дизайна 23.1.0, и это очень долгожданное дополнение.

person Neal Sanche    schedule 16.10.2015
comment
Как изменить Заголовок? Я хочу программно установить для заголовка другой текст. - person Equivocal; 17.01.2017
comment
Вероятно, вы можете использовать метод setTitle(String) для экземпляра CollapsingToolbarLayout. - person Neal Sanche; 09.02.2017

Вы можете сделать что-то вроде этого:

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

Соответствующий стиль textview может быть:

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

также см. здесь для справки.

person luochenhuan    schedule 10.09.2015
comment
Это помогло мне изменить цвет текста заголовка, так как я обнаружил, что Toolbar.setTitleTextColor() или app:titleTextColor из Toolbar не меняет цвет заголовка панели инструментов, когда он заключен в CollapsingToolbarLayout - person patrickjason91; 13.07.2017
comment
@patrickjason91 ты должен использовать CollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK); - person abbasalim; 30.12.2018

    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>

Ссылка здесь CollapsingToolbarLayout setTitle работает неправильно

person hedgehog    schedule 25.08.2016

Чтобы добавить ко всем ответам здесь, у меня не сработало в xml, где бы я ни пытался применить, в AppTheme, ссылаясь на стили. В настоящее время я использую библиотеку поддержки 27.1.1.

Работало только программно.

Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
person sat    schedule 14.06.2018
comment
Не забудьте сначала задать заголовок панели инструментов "Сворачивание". Установите setCollapsedTitleTypeFace после установки заголовка, который у меня сработал. - person Pradip Tilala; 08.02.2019
comment
да, это сработало для меня и должно сработать для тех, кто использует папку «шрифт». - person VipiN Negi; 24.05.2019

Код здесь

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

Добавьте эти строки кода в макет CollapsingToolbarLayout.

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

И код, который приведен ниже, в style.xml

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>
person Ashish Saini    schedule 15.01.2018
comment
Есть ли способ установить поле, чтобы свернуть заголовок? - person Mr.G; 26.09.2018

Похоже, у меня есть решение:

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) {
    }
}
person AlexMomotov    schedule 31.07.2015

Измените размер шрифта или родителя.

<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>
person Priya Rajan    schedule 08.01.2017

В Android 8.0 (уровень API 26) появилась новая функция «Шрифты в XML».

Теперь вы можете определять шрифты как ресурс https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

  • Поместите свои шрифты в папку res-> font->
  • Определить файл 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>

следующий набор

    val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
    htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
    htab_collapse_toolbar.setExpandedTitleTypeface(typeface)
person Hitesh Sahu    schedule 21.07.2019