Trying to understand Theme.MaterialComponents

Question

I moved recently from Theme.AppCompat to Theme.MaterialComponents but I can't understand how to orgnaize colors.

<style name="Theme.Test" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/orange</item>
        <item name="colorPrimaryVariant">@color/red</item>
        <item name="colorOnPrimary">@color/yellow</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/green</item>
        <item name="colorSecondaryVariant">@color/black</item>
        <item name="colorOnSecondary">@color/white</item>
    </style>

For example why buttons take orange background color but background of cardview not take orange color?

Can someone explain to me more about these variables colorPrimary , colorPrimaryVariant , colorOnPrimary , colorSecondary , colorSecondaryVariant and colorOnSecondary

Is there any offical documentation?

David Lee · Accepted Answer · 2021-06-28T11:40:03.620

You can refer to the following documentation: https://material.io/develop/android/theming/color

colorPrimary: The color displayed most frequently across your app’s screens and components. This color should pass accessibilty guidelines for text / iconography when drawn on top of the surface or background color.
colorPrimaryVariant: A tonal variation of the primary color.
colorOnPrimary: A color that passes accessibility guidelines for text/iconography when drawn on top of the primary color.
colorSecondary: The secondary branding color for the app, usually an accented complement to the primary branding color.
colorSecondaryVariant: A tonal variation of the secondary color.
colorOnSecondary: A color that passes accessibility guidelines for text/iconography when drawn on top of the secondary color.

You can also refer to this SO: https://stackoverflow.com/a/45879575/9246764

score 1 · Answer 2 · answered Jun 28 '21 at 11:42

If you're looking for specifics about each component, the material.io documentation usually provides information about the default values for various attributes.

For example, the documentation for MaterialCardView specifies that the default app:cardBackgroundColor is ?attr/colorSurface.

score 0 · Answer 3 · answered Jun 28 '21 at 10:42

0

Take a look at the material sites official docs on using these themes in Android

https://material.io/develop/android/docs/getting-started

answered Jun 28 '21 at 10:42

DevWithZachary

3,545
11
49
101

But I still don't know what the variables above does – Taha Sami Jun 28 '21 at 11:05

score 0 · Answer 4 · answered Jun 28 '21 at 11:38

Okay so you should now use components from the Material theme. For example if you just want to Use a textview and apply the material theme on it You should be using it the way they suggest. For example for the textview you should use it

 <com.google.android.material.textfield.TextInputLayout

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="First Name"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:hintTextColor="@color/black">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/fName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</com.google.android.material.textfield.TextInputLayout>

I think you are not using the card view from the material theme. Just check the official doc. https://material.io/components/cards

Trying to understand Theme.MaterialComponents

4 Answers4