Migrate to Material 3 Theme

Hi Vasiliy, I have a suggestion to improve the app by migrating to Material 3 themes. This way, we can keep the styles consistent and easy to customize, following the Material 3 guidelines. It would also help fix any dark mode issues (https://github.com/techyourchance/TechYourChance-Android-Application/issues/1) and allow better support for multiple themes.

If you agree with this suggestion, I can create a pull request tomorrow.

Migrate to Theme.Material3.DayNight.NoActionBar and use https://m3.material.io/theme-builder#/custom to generate theme resources.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/md_theme_light_primary</item>
        <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
        <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
        <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
        <item name="colorSecondary">@color/md_theme_light_secondary</item>
        <item name="colorOnSecondary">@color/md_theme_light_onSecondary</item>
        <item name="colorSecondaryContainer">@color/md_theme_light_secondaryContainer</item>
        <item name="colorOnSecondaryContainer">@color/md_theme_light_onSecondaryContainer</item>
        <item name="colorTertiary">@color/md_theme_light_tertiary</item>
        <item name="colorOnTertiary">@color/md_theme_light_onTertiary</item>
        <item name="colorTertiaryContainer">@color/md_theme_light_tertiaryContainer</item>
        <item name="colorOnTertiaryContainer">@color/md_theme_light_onTertiaryContainer</item>
        <item name="colorError">@color/md_theme_light_error</item>
        <item name="colorOnError">@color/md_theme_light_onError</item>
        <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
        <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
        <item name="colorOutline">@color/md_theme_light_outline</item>
        <item name="android:colorBackground">@color/md_theme_light_background</item>
        <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
        <item name="colorSurface">@color/md_theme_light_surface</item>
        <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
        <item name="colorSurfaceVariant">@color/md_theme_light_surfaceVariant</item>
        <item name="colorOnSurfaceVariant">@color/md_theme_light_onSurfaceVariant</item>
        <item name="colorSurfaceInverse">@color/md_theme_light_inverseSurface</item>
        <item name="colorOnSurfaceInverse">@color/md_theme_light_inverseOnSurface</item>
        <item name="colorPrimaryInverse">@color/md_theme_light_inversePrimary</item>

        <!-- Default styles -->
        <item name="materialButtonStyle">@style/Button.Default</item>
        <item name="android:textViewStyle">@style/BodyLarge.TextViewStandard</item>
        <item name="editTextStyle">@style/EditText.Default</item>
        <item name="checkboxStyle">@style/CheckBox.Default</item>
        <item name="radioButtonStyle">@style/RadioButton.Default</item>
        <item name="switchStyle">@style/Switch.Default</item>
        <item name="progressBarStyle">@style/ProgressBar.Default</item>
    </style>

</resources>

User Material widgets

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/txtServiceState"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/btnToggleBenchmark"
    android:layout_marginTop="20dp"
    android:gravity="center"
    />

Set default styles

<!-- Default styles -->
    <item name="materialButtonStyle">@style/Button.Default</item>
    <item name="android:textViewStyle">@style/BodyLarge.TextViewStandard</item>
    <item name="editTextStyle">@style/EditText.Default</item>
    <item name="checkboxStyle">@style/CheckBox.Default</item>
    <item name="radioButtonStyle">@style/RadioButton.Default</item>
    <item name="switchStyle">@style/Switch.Default</item>
    <item name="progressBarStyle">@style/ProgressBar.Default</item>

Add common styles - Should not be used directly from xml layouts or app themes.


<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Mapping from Material3 styles for consistent and customizable UI elements. -->

<!-- TextInputEditText -->
<style name="EditText" parent="Widget.Material3.TextInputEditText.FilledBox"/>

<!-- Button -->
<style name="Button" parent="Widget.Material3.Button.OutlinedButton"/>

<!-- CheckBox -->
<style name="CheckBox" parent="Widget.Material3.CompoundButton.CheckBox"/>

<!-- RadioButton -->
<style name="RadioButton" parent="Widget.Material3.CompoundButton.RadioButton"/>

<!-- Switch -->
<style name="Switch" parent="Widget.Material3.CompoundButton.Switch"/>

<!-- ProgressBar -->
<style name="ProgressBar" parent="Widget.Material3.CircularProgressIndicator"/>

<!-- TextAppearances -->
<style name="TextAppearance.LabelSmall" parent="TextAppearance.Material3.LabelSmall"/>
<style name="TextAppearance.LabelMedium" parent="TextAppearance.Material3.LabelMedium"/>
<style name="TextAppearance.LabelLarge" parent="TextAppearance.Material3.LabelLarge"/>

<style name="TextAppearance.BodySmall" parent="TextAppearance.Material3.BodySmall"/>
<style name="TextAppearance.BodyMedium" parent="TextAppearance.Material3.BodyMedium"/>
<style name="TextAppearance.BodyLarge" parent="TextAppearance.Material3.BodyLarge"/>

<style name="TextAppearance.DisplaySmall" parent="TextAppearance.Material3.DisplaySmall"/>
<style name="TextAppearance.DisplayMedium" parent="TextAppearance.Material3.DisplayMedium"/>
<style name="TextAppearance.DisplayLarge" parent="TextAppearance.Material3.DisplayLarge"/>


- Styles appearance

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


- Styles dialog....
**We can create a new style for specific screens if we want to override default style**.

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


- Styles widget

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

techyourchance / TechYourChance-Android-Application

Migrate to Material 3 Theme #3