Fabio/Auxio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: improve typography

Browse source 
Improve typography (again) by isolating my weird non-standard text
styles and moving all font usage to the text styles, which allows
me to eliminate a lot of excessive font usages.
This commit is contained in:
OxygenCobalt 2021-11-11 18:53:34 -07:00
parent 032fd2bd40
commit d732aea1d3
No known key found for this signature in database
GPG key ID: 37DBE3621FE9AD47
10 changed files with 56 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/src/main/res/layout/dialog_excluded.xml
View file

@ -24,11 +24,10 @@
android:id="@+id/excluded_empty"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/inter_semibold"
android:padding="@dimen/spacing_medium"
android:text="@string/lbl_no_dirs"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.Auxio.TitleMedium"
android:textAppearance="@style/TextAppearance.Auxio.TitleMidLarge"
android:textColor="?android:attr/textColorSecondary" />
</LinearLayout>

1
app/src/main/res/layout/fragment_about.xml
View file

@ -62,7 +62,6 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:fontFamily="@font/inter_semibold"
android:text="@string/info_app_name"
android:textAppearance="@style/TextAppearance.Auxio.HeadlineSmall"
app:layout_constraintBottom_toBottomOf="@+id/about_auxio_icon"

2
app/src/main/res/layout/fragment_home.xml
View file

@ -34,7 +34,7 @@
app:tabContentStart="@dimen/spacing_medium"
app:tabGravity="start"
app:tabMode="scrollable"
app:tabTextAppearance="@style/TextAppearance.Auxio.LabelLarge"
app:tabTextAppearance="@style/TextAppearance.Auxio.LabelLarger"
app:tabTextColor="@color/sel_accented_primary" />
</org.oxycblt.auxio.ui.EdgeAppBarLayout>

3
app/src/main/res/layout/item_album_song.xml
View file

@ -23,7 +23,8 @@
android:minWidth="@dimen/size_track_number"
android:text="@{String.valueOf(song.track)}"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.Auxio.TitleMedium"
android:textAppearance="@style/TextAppearance.Auxio.TitleMidLarge"
android:fontFamily="@font/inter"
android:textColor="@color/sel_accented_secondary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"

2
app/src/main/res/layout/view_seek_bar.xml
View file

@ -30,6 +30,7 @@
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_medium"
android:layout_marginBottom="@dimen/spacing_small"
android:textAppearance="@style/TextAppearance.Auxio.BodyMedium"
android:textColor="@color/sel_accented_secondary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
@ -41,6 +42,7 @@
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/spacing_medium"
android:layout_marginBottom="@dimen/spacing_small"
android:textAppearance="@style/TextAppearance.Auxio.BodyMedium"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:text="16:16" />

3
app/src/main/res/layout/widget_default.xml
View file

@ -20,11 +20,10 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="@font/inter"
android:gravity="center"
android:padding="@dimen/spacing_medium"
android:text="@string/def_playback"
android:textAppearance="@style/TextAppearance.Auxio.TitleMedium"
android:textAppearance="@style/TextAppearance.Auxio.TitleMidLarge"
android:textColor="?android:attr/textColorPrimary"
android:textStyle="bold" />

19
app/src/main/res/values/styles_android.xml
View file

@ -9,52 +9,43 @@
<style name="Theme.Auxio.Dialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:checkedTextViewStyle">@style/Widget.Auxio.Dialog.CheckedTextView</item>
<item name="materialAlertDialogTitleTextStyle">@style/Widget.Auxio.Dialog.TextView</item>
<item name="buttonBarPositiveButtonStyle">@style/Widget.Auxio.Dialog.Button</item>
<item name="buttonBarNegativeButtonStyle">@style/Widget.Auxio.Dialog.Button</item>
<item name="buttonBarNeutralButtonStyle">@style/Widget.Auxio.Dialog.Button.Flush</item>
</style>
<!-- Custom dialog title theme -->
<style name="Widget.Auxio.Dialog.TextView" parent="MaterialAlertDialog.Material3.Title.Text">
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMedium</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMidLarge</item>
</style>
<!-- The style for the checked text view in the custom dialog -->
<style name="Widget.Auxio.Dialog.CheckedTextView" parent="Widget.Material3.CheckedTextView">
<item name="android:textColor">?android:attr/textColorPrimary</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.BodyLarge</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMedium</item>
<item name="android:background">@null</item>
</style>
<!-- Style for dialog buttons -->
<style name="Widget.Auxio.Dialog.Button" parent="Widget.Material3.Button.TextButton.Dialog">
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarge</item>
</style>
<!-- Custom button style that eliminates the weird margin that the neutral button has -->
<style name="Widget.Auxio.Dialog.Button.Flush" parent="Widget.Auxio.Dialog.Button">
<style name="Widget.Auxio.Dialog.Button.Flush" parent="Widget.Material3.Button.TextButton.Dialog">
<item name="android:layout_marginStart">0dp</item>
</style>
<!-- Widget TextView that mimics the main Auxio Primary/Secondary TextViews. -->
<style name="Widget.Auxio.TextView.AppWidget" parent="Widget.Auxio.TextView.Base">
<item name="android:singleLine">true</item>
<item name="android:fontFamily">@font/inter</item>
<item name="android:ellipsize">end</item>
</style>
<!-- Widget TextView that mimics the main Auxio Primary TextView -->
<style name="Widget.Auxio.TextView.Primary.AppWidget" parent="Widget.Auxio.TextView.AppWidget">
<item name="android:textStyle">bold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMedium</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMidLarge</item>
</style>
<!-- Widget TextView that mimics the main Auxio Secondary TextView -->
<style name="Widget.Auxio.TextView.Secondary.AppWidget" parent="Widget.Auxio.TextView.AppWidget">
<item name="android:textColor">?android:attr/textColorSecondary</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.BodyLarge</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMedium</item>
</style>
<!-- Hack to make sure that ripples work the best that they can on all Android Versions -->

14
app/src/main/res/values/styles_core.xml
View file

@ -11,6 +11,7 @@
<!-- Make sure to apply more accent-friendly values on older versions -->
<item name="colorSurface">@color/surface</item>
<item name="colorSurfaceVariant">@color/surface_variant</item>
<item name="colorControlNormal">?attr/colorSurfaceVariant</item>
<item name="colorSecondary">?attr/colorPrimary</item>
<item name="colorOnSecondary">?attr/colorOnPrimary</item>
@ -29,19 +30,18 @@
<item name="colorAccent">?attr/colorSecondary</item>
<item name="colorOutline">@color/overlay_stroke</item>
<item name="indicatorColor">?attr/colorPrimary</item>
<item name="colorControlNormal">?attr/colorOnSurfaceVariant</item>
<item name="colorControlActivated">?attr/colorSecondary</item>
<!-- Android component magic -->
<!-- Fix dumb default android behavior -->
<item name="android:colorBackground">?attr/colorSurface</item>
<item name="android:windowBackground">?attr/colorSurface</item>
<item name="android:fontFamily">@font/inter</item>
<item name="android:scrollbars">none</item>
<!-- Work around hard-coded text highlight colors in the default Material3 theme -->
<item name="android:textColorHighlight">@color/overlay_text_highlight</item>
<item name="android:textColorHighlightInverse">@color/overlay_text_highlight_inverse</item>
<!-- Material configuration -->
<item name="materialAlertDialogTheme">@style/Theme.Auxio.Dialog</item>
<item name="textAppearanceHeadlineLarge">@style/TextAppearance.Auxio.HeadlineLarge</item>
@ -59,14 +59,6 @@
<item name="textAppearanceBodyLarge">@style/TextAppearance.Auxio.BodyLarge</item>
<item name="textAppearanceBodyMedium">@style/TextAppearance.Auxio.BodyMedium</item>
<item name="textAppearanceBodySmall">@style/TextAppearance.Auxio.BodySmall</item>
<!-- Work around other views actually using text appearances I modified -->
<item name="android:textAppearanceListItem">@style/TextAppearance.Material3.TitleMedium</item>
<item name="android:textAppearanceListItemSmall">@style/TextAppearance.Material3.TitleMedium</item>
<item name="android:textAppearanceListItemSecondary">@style/TextAppearance.Material3.BodyMedium</item>
<item name="textAppearanceListItem">@style/TextAppearance.Material3.TitleMedium</item>
<item name="textAppearanceListItemSmall">@style/TextAppearance.Material3.TitleMedium</item>
<item name="textAppearanceListItemSecondary">@style/TextAppearance.Material3.BodyMedium</item>
</style>
<!-- The basic black theme derived in all black accents. -->

24
app/src/main/res/values/styles_ui.xml
View file

@ -73,12 +73,12 @@
</style>
<style name="Widget.Auxio.TextView.Item.Primary" parent="Widget.Auxio.TextView.Item.Base">
<item name="android:textAppearance">@style/TextAppearance.Auxio.BodyLarge</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMedium</item>
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>
<style name="Widget.Auxio.TextView.Item.Secondary" parent="Widget.Auxio.TextView.Item.Base">
<item name="android:textAppearance">@style/TextAppearance.Auxio.BodyMedium</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleSmall</item>
<item name="android:textColor">?android:attr/textColorSecondary</item>
</style>
@ -86,29 +86,27 @@
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
<item name="android:marqueeRepeatLimit">marquee_forever</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMedium</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMidLarge</item>
</style>
<style name="Widget.Auxio.TextView.Secondary" parent="Widget.Auxio.TextView.Base">
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
<item name="android:textColor">?android:attr/textColorSecondary</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.BodyLarge</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleMedium</item>
</style>
<style name="Widget.Auxio.TextView.Primary.Compact" parent="Widget.Auxio.TextView.Base">
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textColor">?android:attr/textColorPrimary</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelMedium</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarge</item>
</style>
<style name="Widget.Auxio.TextView.Secondary.Compact" parent="Widget.Auxio.TextView.Base">
<item name="android:maxLines">1</item>
<item name="android:ellipsize">end</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelSmall</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelMedium</item>
</style>
<style name="Widget.Auxio.TextView.Header" parent="Widget.Auxio.TextView.Base">
@ -118,12 +116,10 @@
<item name="android:paddingEnd">@dimen/spacing_medium</item>
<item name="android:minHeight">@dimen/size_btn_small</item>
<item name="android:gravity">center_vertical</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleSmall</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.TitleSmallish</item>
</style>
<style name="Widget.Auxio.TextView.Detail" parent="Widget.Auxio.TextView.Base">
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.HeadlineSmall</item>
<item name="android:textAlignment">viewStart</item>
</style>
@ -151,13 +147,11 @@
</style>
<style name="Widget.Auxio.Button.Primary" parent="Widget.Material3.Button">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarge</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarger</item>
</style>
<style name="Widget.Auxio.Button.Secondary" parent="Widget.Material3.Button.OutlinedButton">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarge</item>
<item name="android:textAppearance">@style/TextAppearance.Auxio.LabelLarger</item>
</style>
<style name="Widget.Auxio.FloatingActionButton.MidLarge" parent="Widget.Material3.FloatingActionButton.Primary">

55
app/src/main/res/values/typography.xml
View file

@ -1,13 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--
Auxio's typography. We have to heavily modify these since Material3's default styles are insane
and not user-friendly in the slightest.
Also, can we talk about how god-awful applying fonts through a text appearance is? It's like
the value will be overridden if you look at the wrong way.
-->
<!-- Basic Material3 typography -->
<style name="TextAppearance.Auxio.HeadlineLarge" parent="TextAppearance.Material3.HeadlineLarge">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
@ -29,47 +22,63 @@
</style>
<style name="TextAppearance.Auxio.TitleMedium" parent="TextAppearance.Material3.TitleMedium">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textSize">20sp</item>
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.TitleSmall" parent="TextAppearance.Material3.TitleSmall">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:textSize">18sp</item>
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.LabelLarge" parent="TextAppearance.Material3.LabelLarge">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:letterSpacing">0</item>
<item name="android:textSize">16sp</item>
</style>
<style name="TextAppearance.Auxio.LabelMedium" parent="TextAppearance.Material3.LabelMedium">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:letterSpacing">0</item>
<item name="android:textSize">14sp</item>
</style>
<style name="TextAppearance.Auxio.LabelSmall" parent="TextAppearance.Material3.LabelSmall">
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
<item name="android:letterSpacing">0</item>
<item name="android:textSize">12sp</item>
</style>
<style name="TextAppearance.Auxio.BodyLarge" parent="TextAppearance.Material3.BodyLarge">
<item name="android:letterSpacing">0</item>
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.BodyMedium" parent="TextAppearance.Material3.BodyMedium">
<item name="android:letterSpacing">0</item>
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<style name="TextAppearance.Auxio.BodySmall" parent="TextAppearance.Material3.BodySmall">
<item name="android:letterSpacing">0</item>
<item name="fontFamily">@font/inter</item>
<item name="android:fontFamily">@font/inter</item>
</style>
<!--
Text extensions
Material3 TextAppearances are really inflexible, so these add some extra categories that
allow for better UX.
-->
<style name="TextAppearance.Auxio.TitleMidLarge" parent="TextAppearance.Auxio.TitleMedium">
<item name="android:textSize">20sp</item>
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
</style>
<style name="TextAppearance.Auxio.TitleSmallish" parent="TextAppearance.Auxio.TitleSmall">
<item name="android:textSize">18sp</item>
<item name="fontFamily">@font/inter_semibold</item>
<item name="android:fontFamily">@font/inter_semibold</item>
</style>
<style name="TextAppearance.Auxio.LabelLarger" parent="TextAppearance.Auxio.LabelLarge">
<item name="android:textSize">16sp</item>
</style>
</resources>