Voglio cambiare CollapsingToolbarLayout
la dimensione del carattere e il suo carattere tipografico. Come posso ottenerlo?
Risposte:
Prima di immergerci nel codice, decidiamo prima il textSize
per nostro CollapsingToolbarLayout
. Google ha pubblicato un sito web chiamato material.io
, questo sito spiega anche il modo migliore su come affrontare la tipografia .
L'articolo menzionato sulla categoria "Titolo" che spiega anche la dimensione del carattere consigliata da utilizzare sp
.
Sebbene l'articolo non abbia mai menzionato la dimensione CollapsingToolbarLayout's
estesa consigliata, ma la libreria com.android.support:design
fornisce una TextAppearance
per il nostro caso. Con un po 'di scavo con la fonte si scopre che la dimensione è34sp
(non menzionata nell'articolo).
Allora che ne dici delle dimensioni ridotte? Per fortuna l'articolo menzionava qualcosa e lo è 20sp
.
E il migliore TextAppearance
finora che si adatta alla modalità collpasata è TextAppearance.AppCompat.Title
mentre la nostra modalità espansa loTextAppearance
è TextAppearance.Design.CollapsingToolbar.Expanded
.
Se osservi tutti i nostri esempi sopra tutti, utilizza la versione REGOLARE del carattere che è sicuro di dire che Roboto regular
farà il compito a meno che tu non abbia requisiti specifici.
Potrebbe essere troppo faticoso scaricare i font stessi, perché non utilizzare una libreria che abbia tutti i font Roboto necessari? Quindi presento una libreria di calligrafia per Roboto, ad esempio 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 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)
}
Questo è un aggiornamento del 2019 perché la libreria Typer è aggiornata! Sono anche l'autore della biblioteca.
È possibile utilizzare i nuovi metodi pubblici CollapsingToolbarLayout
per impostare il carattere tipografico per il titolo compresso ed espanso, in questo modo:
final Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/FrutigerLTStd-Light.otf");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);
Questo sembra essere stato aggiunto nella libreria di supporto alla progettazione 23.1.0 ed è un'aggiunta molto gradita.
setTitle(String)
metodo CollapsingToolbarLayout
sull'istanza.
Puoi fare qualcosa del genere:
mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
Lo stile di visualizzazione del testo corrispondente potrebbe essere:
<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>
vedere anche qui per riferimento.
Toolbar.setTitleTextColor()
o app:titleTextColor
del Toolbar
cambiamento doesnt il colore del titolo di barra degli strumenti quando racchiuso inCollapsingToolbarLayout
CollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
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>
Fare riferimento qui CollapsingToolbarLayout setTitle non funziona correttamente
Per aggiungere a tutte le risposte qui, non ha funzionato per me in xml, indipendentemente da dove ho provato ad applicare, in AppTheme, riferimenti negli stili. Attualmente sto utilizzando la libreria di supporto 27.1.1
Funzionava solo programmaticamente.
Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
Sembra che io abbia una soluzione:
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) {
}
}
Il codice è qui
<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">
Aggiungi queste righe di codice nel layout CollapsingToolbarLayout
app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
E il codice che viene fornito di seguito, in style.xml
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">16sp</item>
</style>
Cambia la dimensione del carattere o genitore.
<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>
Ora puoi definire i caratteri come risorsa https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html
res-> font->
cartella
<?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>
serie successiva
val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
htab_collapse_toolbar.setExpandedTitleTypeface(typeface)