Android Material Themes Demo

To implement a consistent Material theme using AppCompat, you should define three distinct styles: an application theme, a dialog theme, and an alert dialog theme. The application theme sets the primary color palette (using colorPrimary, colorPrimaryDark, and colorAccent) and points to the specific dialog themes via the dialogTheme and alertDialogTheme attributes. This ensures that all components, including popups, inherit the correct color scheme.

<!-- Green App Theme -->
<style name="AppTheme.Green" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    
    <!-- AppCompat Attributes -->
    <item name="colorPrimary">@color/material_green_500</item>
    <item name="colorPrimaryDark">@color/material_green_700</item>
    <item name="colorAccent">@color/material_green_a700</item>

    <!-- AppCompat Dialog Attributes -->
    <item name="dialogTheme">@style/AppTheme.Dialog.Green</item>
    <item name="alertDialogTheme">@style/AppTheme.Dialog.Alert.Green</item>
</style>

<!-- Green Dialog Theme -->
<style name="AppTheme.Dialog.Green" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/material_green_500</item>
    <item name="colorPrimaryDark">@color/material_green_700</item>
    <item name="colorAccent">@color/material_green_a700</item>
</style>

<!-- Green Alert Dialog Theme -->
<style name="AppTheme.Dialog.Alert.Green" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorPrimary">@color/material_green_500</item>
    <item name="colorPrimaryDark">@color/material_green_700</item>
    <item name="colorAccent">@color/material_green_a700</item>
</style>

Attributes act like variables for UI properties. To create a flexible, dynamic theme, you should avoid hardcoding values in styles. Instead, define global colors in a theme and reference them in your styles using the ? prefix.

1. Define the global attribute in a theme: Set a theme-level attribute like android:textColorPrimary to a specific color.
2. Reference the attribute in a style: In your component style, set a view-specific attribute (like android:textColor) to the theme attribute (?android:textColorPrimary).

This allows the UI to update automatically when the theme changes at runtime.

<!-- 1. Define global color in the theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
	<item name="android:textColorPrimary">#00FF00</item>
</style>

<!-- 2. Reference that global color in a component style -->
<style name="TextStyle" parent="TextAppearance.AppCompat">
	<item name="android:textColor">?android:textColorPrimary</item>
</style>

You can create custom elements that use theme attributes to show pressed states on arbitrary layouts (like ViewGroup) by applying specific styles. This allows for backwards-compatible, theme-aware selection effects.

Available styles:

• @style/SelectableItemStyle.Rect: A standard rectangular pressed selection.
• @style/SelectableItemStyle.Rect.Colored: A colored rectangular pressed selection.
• @style/SelectableItemStyle.RoundedRect: A rounded rectangular pressed selection.
• @style/SelectableItemStyle.RoundedRect.Colored: A colored rounded rectangular pressed selection.

<LinearLayout
    style="@style/SelectableItemStyle.Rect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:adjustViewBounds="true"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Green Theme"/>
</LinearLayout>

AppCompat provides several button styles to control color behavior:

• Default: Use @style/Widget.AppCompat.Button. It uses colorButtonNormal for the background and colorControlHighlight as an overlay for pressed/focused states.
• Colored: Use @style/Widget.AppCompat.Button.Colored. It uses colorAccent for the background.
• Borderless: Use @style/Widget.AppCompat.Button.Borderless. It has no background and uses colorControlHighlight for interaction states.
• Borderless Colored: Use @style/Widget.AppCompat.Button.Borderless.Colored. It uses colorAccent for the text color.

<!-- Default Button -->
<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>

<!-- Colored Button -->
<Button
	style="@style/Widget.AppCompat.Button.Colored"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>

<!-- Borderless Button -->
<Button
	style="@style/Widget.AppCompat.Button.Borderless"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>

<!-- Borderless Colored Button -->
<Button
	style="@style/Widget.AppCompat.Button.Borderless.Colored"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>

Standard controls for selection and progress:

• Spinner: Use @style/Widget.AppCompat.Spinner or @style/Widget.AppCompat.Spinner.Underlined. The underline color is set to colorAccent when activated.
• SeekBar: Uses @style/Widget.AppCompat.SeekBar (default). It uses colorAccent for the active track, colorControlNormal for the unset area, and colorControlHighlight for interaction.
• ProgressBar: Uses @style/Widget.AppCompat.ProgressBar (default) or @style/Widget.AppCompat.ProgressBar.Horizontal. The progress color is set to colorAccent.

<!-- Underlined Spinner -->
<Spinner
    style="@style/Widget.AppCompat.Spinner.Underlined"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:spinnerMode="dropdown"/>

<!-- SeekBar -->
<SeekBar
	android:layout_width="match_parent"
	android:layout_height="wrap_content"/>

<!-- Horizontal ProgressBar -->
<ProgressBar
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"/>