Skip to content

Customise Styles

Lumiq Creative edited this page Jul 8, 2020 · 1 revision

app/src/main/res/values/styles.xml houses core styles.

Change Fonts

Across styles.xml, customFontNormal and customFontBold define interface fonts. Add custom fonts to /app/src/main/res/fonts, create a family for each, and overwrite customFontNormal and customFontBold with the family names.

<item name="customFontBold">@font/manrope_bold_fam</item>
<item name="customFontNormal">@font/manrope_normal_fam</item>

Set Bottom Navigation Label Visibility

You can change visibility settings for tab labels in the Bottom Navigation Bar via labelVisibilityMode in MyApp.BottomNavigationView. This accepts four values:

  • labeled shows labels for all tabs.
  • selected only shows a label for the selected tab.
  • unlabeled hides all labels.
  • auto behaves like labeled if there are 3 tabs or fewer, and like selected otherwise.
<style name="MyApp.BottomNavigationView" parent="Widget.Frames.BottomNavigationView">
    <item name="labelVisibilityMode">auto</item>
</style>

Customise Shape

You can set custom corner properties for four component groups via app/src/main/res/values/shape_styles.xml. cornerFamily accepts rounded and cut as values, and referenced dimensions can be changed in /app/src/main/res/values/dimens.xml.

<item name="cornerFamily">rounded</item>
<item name="cornerSize">@dimen/cards_corner_size</item>