I want to change CollapsingToolbarLayout
font size and its typeface. How I can achieve that?
9 Answers
Update
Before we dive into the code let's first decide the textSize
for our CollapsingToolbarLayout
. Google published a website called material.io
, this website also explains the best way on how to deal with Typography.
The article mentioned about "Heading" category which also explains the recommended font size to use in sp
.
Although the article never mentioned the recommended CollapsingToolbarLayout's
expanded size but the library com.android.support:design
provides a TextAppearance
for our case. With some digging with the source it turns out that that the size is 34sp
(not mentioned in the article).
So how about the collapsed size? Luckily the article mentioned something and it is 20sp
.
And the best TextAppearance
so far that fits in collpased mode is TextAppearance.AppCompat.Title
while our expanded mode TextAppearance
is TextAppearance.Design.CollapsingToolbar.Expanded
.
If you observe all our examples above all of them uses the REGULAR version of the font which is safe to say that Roboto regular
will do the task unless you have specific requirements.
It might be too much work downloading the fonts itself why not use a library that has all the needed Roboto fonts? So I introduce a calligraphy library for Roboto e.g. 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)
}
This is a 2019 update because the Typer library is updated! I am also the author of the library.
-
1
-
You can use the new public methods, on CollapsingToolbarLayout
to set the typeface for the collapsed and expanded title, like so:
final Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/FrutigerLTStd-Light.otf");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);
This seems to have been added in the design support library 23.1.0, and is a very welcome addition.
-
How do you change the Title? I want to set the Title to a different text programmatically. Commented Jan 17, 2017 at 7:47
-
1You can probably use the
setTitle(String)
method on theCollapsingToolbarLayout
instance. Commented Feb 9, 2017 at 1:29
You can do something like this:
mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
Corresponding textview style could be:
<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>
also see here for reference.
-
1This did the work for me of changing the title text color, since I find that
Toolbar.setTitleTextColor()
orapp:titleTextColor
ofToolbar
doesnt change the color of title of toolbar when enclosed inCollapsingToolbarLayout
– pjl91Commented Jul 13, 2017 at 4:02 -
1@patrickjason91 u must use
CollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
Commented Dec 30, 2018 at 15:52
To add to all the answers here, It did not work for me in xml no matter where I tried to apply, in AppTheme, referencing in styles. I am currently using support library 27.1.1
It worked only programatically.
Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
-
Make sure to set the Collapsing toolbar title first. Set setCollapsedTitleTypeFace after setting the title worked for me. Commented Feb 8, 2019 at 9:00
-
yes it worked for me and should work for who uses 'font' folder. Commented May 24, 2019 at 11:41
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>
Reference here CollapsingToolbarLayout setTitle not work correctly
Code is here
<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">
Add these code lines in CollapsingToolbarLayout layout
app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
And the code which is given below, in style.xml
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">16sp</item>
</style>
Looks like I have solution:
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) {
}
}
Change the font size or parent.
<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>
Android 8.0 (API level 26) have introduces a new feature, Fonts in XML
Now you can define fonts as resource https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html
- Put your fonts in in
res-> font->
folder - Define 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>
next set
val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
htab_collapse_toolbar.setExpandedTitleTypeface(typeface)