Implement Material design on Android

styles.xml

<resources>
    <!-- https://medium.com/over-engineering/setting-up-a-material-components-theme-for-android-fbf7774da739 -->
    <style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryVariant">@color/primaryLight</item>
        <item name="colorOnPrimary">@color/primaryText</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSecondaryVariant">@color/secondaryLight</item>
        <item name="colorOnSecondary">@color/secondaryText</item>
        <item name="colorError">@color/error</item>
        <item name="colorOnError">@color/secondaryText</item>
        <item name="colorSurface">@color/primaryLight</item>
        <item name="colorOnSurface">@color/primaryText</item>
        <item name="android:colorBackground">@color/primary</item>
        <item name="colorOnBackground">@color/primaryLight</item>
        <item name="android:statusBarColor">@color/primary</item>
        <item name="android:navigationBarColor">@color/primary</item>
        <item name="colorControlActivated">@color/controlActivated</item>

        <!-- Text Appearance -->
        <item name="textAppearanceHeadline1">@style/TextAppearance.App.Headline1</item>
        <item name="textAppearanceHeadline2">@style/TextAppearance.App.Headline2</item>
        <item name="textAppearanceHeadline3">@style/TextAppearance.App.Headline3</item>
        <item name="textAppearanceHeadline4">@style/TextAppearance.App.Headline4</item>
        <item name="textAppearanceHeadline5">@style/TextAppearance.App.Headline5</item>
        <item name="textAppearanceHeadline6">@style/TextAppearance.App.Headline6</item>
        <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
        <item name="textAppearanceSubtitle2">@style/TextAppearance.App.Subtitle2</item>
        <item name="textAppearanceBody1">@style/TextAppearance.App.Body1</item>
        <item name="textAppearanceBody2">@style/TextAppearance.App.Body2</item>
        <item name="textAppearanceButton">@style/TextAppearance.App.Button</item>
        <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>
        <item name="textAppearanceOverline">@style/TextAppearance.App.Overline</item>

        <item name="extendedFloatingActionButtonStyle">@style/Widget.App.ExtendedFloatingActionButton</item>
        <item name="floatingActionButtonStyle">@style/Widget.App.FloatingActionButton</item>
        <item name="materialCardViewStyle">@style/Widget.App.CardView</item>
        <item name="materialButtonStyle">@style/Widget.App.Button</item>
        <item name="switchStyle">@style/Widget.App.Switch</item>
        <item name="radioButtonStyle">@style/Widget.App.RadioButton</item>
        <item name="checkboxStyle">@style/Widget.App.CheckBox</item>
        <item name="progressIndicatorStyle">@style/Widget.App.ProgressIndicator</item>
        <item name="android:textViewStyle">@style/Widget.App.BodyText</item>
    </style>

    <style name="ThemeOverlay.App.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>

    <style name="ThemeOverlay.App.PopupOverlay" parent="ThemeOverlay.MaterialComponents"/>

    <style name="Widget.App.CardView" parent="Widget.MaterialComponents.CardView">
        <item name="cardCornerRadius">@dimen/card_corner_radius</item>
        <item name="checkedIconTint">?attr/colorSecondaryVariant</item>
    </style>

    <style name="Widget.App.ModalBottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/rounded_top_rectangle_background</item>
    </style>

    <style name="Theme.App.BaseBottomSheetDialog" parent="@style/Theme.Design.BottomSheetDialog">
        <item name="android:windowIsFloating">false</item>
        <item name="bottomSheetStyle">@style/Widget.App.ModalBottomSheet</item>
    </style>

    <style name="Widget.App.BottomSheetDialog" parent="Theme.App.BaseBottomSheetDialog">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@color/primary</item>
    </style>

    <style name="Widget.App.PrimaryActionButton" parent="Widget.MaterialComponents.ExtendedFloatingActionButton.Icon">
        <item name="backgroundTint">@color/secondary</item>
        <item name="android:textColor">@color/secondaryText</item>
        <item name="rippleColor">@color/secondary</item>
        <item name="iconTint">@color/secondaryText</item>
    </style>
    
    <style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
        <item name="backgroundTint">@color/secondary</item>
        <item name="android:textColor">@color/secondaryText</item>
    </style>

    <style name="Widget.App.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="android:textColor">@color/secondaryLight</item>
    </style>

    <style name="Widget.App.BodyText" parent="Widget.MaterialComponents.TextView">
        <item name="android:textAppearance">?attr/textAppearanceBody1</item>
    </style>

    <style name="Widget.App.Switch" parent="Widget.MaterialComponents.CompoundButton.Switch">
        <item name="android:textAppearance">?attr/textAppearanceBody1</item>
    </style>

    <style name="Widget.App.RadioButton" parent="Widget.MaterialComponents.CompoundButton.RadioButton">
        <item name="android:textAppearance">?attr/textAppearanceBody1</item>
    </style>

    <style name="Widget.App.CheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox">
        <item name="android:textAppearance">?attr/textAppearanceBody1</item>
    </style>

    <style name="Widget.App.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingActionButton</item>
    </style>

    <style name="Widget.App.ExtendedFloatingActionButton" parent="Widget.MaterialComponents.ExtendedFloatingActionButton.Icon">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingActionButton</item>
    </style>

    <style name="Widget.App.ProgressIndicator" parent="Widget.MaterialComponents.ProgressIndicator.Circular.Indeterminate">
        <item name="indicatorColor">?attr/colorSecondaryVariant</item>
    </style>

    <style name="ThemeOverlay.App.FloatingActionButton" parent="">
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorOnSecondary">@color/primaryText</item>
        <item name="colorOnSurface">@color/secondary</item>
    </style>

</resources>

text_appearance.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="TextAppearance.App.Headline1" parent="TextAppearance.MaterialComponents.Headline1">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">96sp</item>
    </style>

    <style name="TextAppearance.App.Headline2" parent="TextAppearance.MaterialComponents.Headline2">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">60sp</item>
    </style>

    <style name="TextAppearance.App.Headline3" parent="TextAppearance.MaterialComponents.Headline3">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">48sp</item>
    </style>

    <style name="TextAppearance.App.Headline4" parent="TextAppearance.MaterialComponents.Headline4">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">34sp</item>
    </style>

    <style name="TextAppearance.App.Headline5" parent="TextAppearance.MaterialComponents.Headline5">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">24sp</item>
    </style>

    <style name="TextAppearance.App.Headline6" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">16sp</item>
    </style>

    <style name="TextAppearance.App.Subtitle2" parent="TextAppearance.MaterialComponents.Subtitle2">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
        <item name="android:textSize">14sp</item>
    </style>

    <style name="TextAppearance.App.Body1" parent="TextAppearance.MaterialComponents.Body1">
        <item name="fontFamily">@font/open_sans</item>
        <item name="android:fontFamily">@font/open_sans</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/primaryText</item>
    </style>

    <style name="TextAppearance.App.Body2" parent="TextAppearance.MaterialComponents.Body2">
        <item name="fontFamily">@font/open_sans</item>
        <item name="android:fontFamily">@font/open_sans</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/primaryText</item>
    </style>

    <style name="TextAppearance.App.Button" parent="TextAppearance.MaterialComponents.Button">
        <item name="fontFamily">@font/open_sans</item>
        <item name="android:fontFamily">@font/open_sans</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
        <item name="fontFamily">@font/open_sans</item>
        <item name="android:fontFamily">@font/open_sans</item>
        <item name="android:textSize">12sp</item>
    </style>

    <style name="TextAppearance.App.Overline" parent="TextAppearance.MaterialComponents.Overline">
        <item name="fontFamily">@font/open_sans</item>
        <item name="android:fontFamily">@font/open_sans</item>
        <item name="android:textSize">10sp</item>
    </style>

    <style name="TextAppearance.App.ActionBar" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
    </style>

</resources>

Reference: https://medium.com/over-engineering/setting-up-a-material-components-theme-for-android-fbf7774da739