CollapsingToolbarLayoutの書体とサイズを変更するにはどうすればよいですか?


86

CollapsingToolbarLayoutフォントサイズと書体を変更したいのですが。どうすればそれを達成できますか?

ここに画像の説明を入力してください


3
setCollapsedTitleTextAppearance();を試しました。およびsetCollapsedTitleTextColor(); 関数 ?
Abhishek 2015

@abhishek、それは私が探しているものではありません。xmlで書体を変更できません。
AlexMomotov 2015

回答:


139

更新

私たちは、コードレットに飛び込む前に、最初に決めていますtextSize私たちのためにCollapsingToolbarLayout。グーグルはと呼ばれるウェブサイトを公開しましたmaterial.io、このウェブサイトはタイポグラフィに対処する方法の最良の方法も説明しています。

で使用する推奨フォントサイズについても説明している「見出し」カテゴリについての記事sp

ここに画像の説明を入力してください

記事では推奨CollapsingToolbarLayout's される拡張サイズについては言及されていませんが、ライブラリcom.android.support:designTextAppearance私たちのケースに対応しています。ソースを少し掘り下げてみると、サイズは34sp(記事には記載されていません)であることがわかります。

では、折りたたまれたサイズはどうですか?幸いなことに、記事は何かに言及しました、そしてそれは20spです。

ここに画像の説明を入力してください

そして、TextAppearanceこれまでのところ、折りたたみモードに適合するのは TextAppearance.AppCompat.Title拡張モードTextAppearanceがである間TextAppearance.Design.CollapsingToolbar.Expandedです。

上記のすべての例を観察すると、すべての例で通常バージョンのフォントが使用Roboto regularされています。これは、特定の要件がない限り、タスクを実行すると言っても過言ではありません。

フォント自体をダウンロードするのは大変な作業かもしれません。必要なすべてのRobotoフォントを備えたライブラリを使用してみませんか?そこで、Roboto用の書道ライブラリ(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)
}

Typerライブラリが更新されたため、これは2019年の更新です。私は図書館の著者でもあります。


1
とにかくタイトルを折りたたむためのマージンを設定することはありますか
Mr.G 2018

@ Mr.Gは、ツールバーでapp:titleMargin = ""を使用します。
EmreAkcan19年

82

次のように、新しいパブリックメソッドを使用してCollapsingToolbarLayout、折りたたまれて展開されたタイトルの書体を設定できます。

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

これはデザインサポートライブラリ23.1.0に追加されたようで、非常に歓迎すべき追加です。


タイトルをどのように変更しますか?プログラムでタイトルを別のテキストに設定したい。
あいまいな2017年

1
おそらくインスタンスでsetTitle(String)メソッドを使用できCollapsingToolbarLayoutます。
ニールサンチェ2017

67

あなたはこのようなことをすることができます:

mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbarLayout.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>

こちらも参考にてください。


1
私はそれを見つけるので、これは、タイトルのテキストの色を変更するのは私のために仕事をしたToolbar.setTitleTextColor()app:titleTextColorToolbardoesntの変更ツールバーのタイトルの色に囲まれたときCollapsingToolbarLayout
patrickjason91

1
@ patrickjason91 uは使用する必要がありますCollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
abbasalim 2018

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>

ここを参照してくださいCollapsingToolbarLayoutsetTitleが正しく機能しません


12

ここですべての答えに追加するために、AppThemeでスタイルを参照して、どこに適用しようとしても、xmlでは機能しませんでした。現在、サポートライブラリ27.1.1を使用しています

それはプログラム的にのみ機能しました。

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

必ず最初に折りたたみツールバーのタイトル設定してください。セットsetCollapsedTitleTypeFace私のために働いたタイトルを設定した後。
pradiptilala19年

はい、それは私にとってはうまくいき、「font」フォルダを使用する人にとってはうまくいくはずです。
VipiNNegi19年

10

私には解決策があるようです:

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

コードはこちら

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

タイトルを折りたたむマージンを設定する方法はありますか?
Mr.G 2018

4

フォントサイズまたは親を変更します。

<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

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)
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.