Android Material Themes Demo

https://github.com/stevenbyle/android-material-themes-demo
Admin
A demo Android application demonstrating how to create dynamically colorized Material Design...
Tokens:2,454
Snippets:18
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Define AppCompat Material Themes (App, Dialog, Alert)

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This XML code defines a set of AppCompat-compatible themes for an Android application, including a main app theme, a dialog theme, and an alert dialog theme. Each theme extends from `Theme.AppCompat.Light` parents and customizes the color palette using AppCompat attributes like `colorPrimary`, `colorPrimaryDark`, and `colorAccent` to apply a consistent green scheme. The main app theme also references the custom dialog themes.

```XML
<!-- 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 Control Attributes -->
    <!-- Other control states (not in this example)
    <item name="colorButtonNormal">@color/material_green_500</item>
    <item name="colorControlNormal">@color/material_green_500</item>
    <item name="colorControlActivated">@color/material_green_500</item>
    <item name="colorControlHighlight">@color/selector_green_pressed</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>
```

--------------------------------

### Setting a View Property Directly in Android

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This section demonstrates how to directly set a property, such as text color, on a UI element. It shows the conceptual Java equivalent of assigning a color value to a variable and the actual Android XML style definition for applying a specific color to a `TextView`.

```Java
int textColor = 0x00FF00;
```

```XML
<style name="TextStyle" parent="TextAppearance.AppCompat">
	<item name="android:textColor">#00FF00</item>
</style>
```

--------------------------------

### Android Progress Bar XML Styling

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This XML snippet illustrates how to implement Android progress indicators, including both default and horizontal `ProgressBar` styles. It demonstrates how to set the progress color to `colorAccent` using `Widget.AppCompat.ProgressBar` or `Widget.AppCompat.ProgressBar.Horizontal`.

```xml
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"/>

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

--------------------------------

### Referencing Android Attributes for Flexible Styling

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This section illustrates a more advanced use of attributes where one attribute references another, enabling global theme properties to influence specific view properties. This allows for centralized control over styling, where changes to a theme attribute propagate to all referencing styles and views, as shown in both conceptual Java and actual Android XML theme and style definitions.

```Java
int textColorPrimary = 0x00FF00;
int textColor = textColorPrimary;
```

```XML
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
	<item name="android:textColorPrimary">#00FF00</item>
</style>

<style name="TextStyle" parent="TextAppearance.AppCompat">
	<item name="android:textColor">?android:textColorPrimary</item>
</style>
```

--------------------------------

### Android ImageView XML Tinting

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This XML snippet demonstrates how to apply a solid color tint to `ImageView` elements using the `android:tint` attribute, leveraging `?colorAccent` for theme-based coloring. More advanced tinting can be achieved programmatically with `DrawableCompat.setTint()`.

```xml
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:adjustViewBounds="true"
        android:src="@mipmap/ic_launcher"
        android:tint="?colorAccent"/>

    <ImageView
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_palette"
        android:tint="?colorAccent"/>
</LinearLayout>
```

--------------------------------

### Android Custom Selectable Item XML Styling

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This XML snippet demonstrates how to create custom selectable items with pressed states using predefined styles like `@style/SelectableItemStyle.Rect`. It shows how to apply a rectangular pressed selection to a `ViewGroup`.

```xml
<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>
```

--------------------------------

### Implement Android Material Switch (SwitchCompat)

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Illustrates using android.support.v7.widget.SwitchCompat for a Material Design switch, defaulting to @style/Widget.AppCompat.CompoundButton.Switch. This style sets the switch color to colorAccent when activated and uses colorControlHighlight for focused and pressed states. Note that SwitchCompat must be used explicitly for pre-Android 5.0 devices.

```XML
<android.support.v7.widget.SwitchCompat
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>
```

--------------------------------

### Apply AppCompat Theme to an Individual Android View

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This XML snippet demonstrates how to apply a custom AppCompat theme to a specific `View` or `ViewGroup` within an Android layout using the `android:theme` attribute. This allows for overriding the application or activity-level theme for individual UI components, enabling fine-grained control over their visual appearance and dynamic colorization.

```XML
<View
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:theme="@style/AppTheme.Green"/>
```

--------------------------------

### Implement Default Android Material Button

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Demonstrates the use of a standard Android Button, which defaults to @style/Widget.AppCompat.Button. This style sets the button color to colorButtonNormal and uses colorControlHighlight for focused and pressed states.

```XML
<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>
```

--------------------------------

### Implement Android Material Floating Action Button (FAB)

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Shows how to use FloatingActionButton from the design support library, which defaults to @style/Widget.Design.FloatingActionButton. This style sets the button color to colorAccent and uses colorControlHighlight for focused and pressed states, ideal for primary actions.

```XML
<android.support.design.widget.FloatingActionButton
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/ic_palette"/>
```

--------------------------------

### Implement Android Material Text Field with TextInputLayout

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Illustrates creating a Material Design text field using TextInputLayout and TextInputEditText from the design support library. TextInputLayout sets the label text color to colorAccent, while TextInputEditText sets control colors to colorAccent when activated, providing a modern input experience.

```XML
<android.support.design.widget.TextInputLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:hint="Green Theme">
	
	<android.support.design.widget.TextInputEditText
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
```

--------------------------------

### Implement Colored Android Material Button

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Shows how to create a colored Android Button using @style/Widget.AppCompat.Button.Colored. This style sets the button color to colorAccent and uses colorControlHighlight for focused and pressed states, providing a distinct visual appearance.

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

--------------------------------

### Implement Default Android Material Borderless Button

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Illustrates the use of a borderless Android Button with @style/Widget.AppCompat.Button.Borderless. This style removes the button's border and uses colorControlHighlight as an overlay for focused and pressed states, suitable for subtle interactions.

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

--------------------------------

### Implement Android Material Checkbox

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Shows how to use an Android CheckBox, which defaults to @style/Widget.AppCompat.CompoundButton.CheckBox. This style sets the checkbox color to colorAccent when activated and uses colorControlHighlight for focused and pressed states.

```XML
<CheckBox
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>
```

--------------------------------

### Implement Android Material Radio Button

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Demonstrates the use of an Android RadioButton, which defaults to @style/Widget.AppCompat.CompoundButton.RadioButton. This style sets the radio button color to colorAccent when activated and uses colorControlHighlight for focused and pressed states.

```XML
<RadioButton
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Green Theme"/>
```

--------------------------------

### Android Dropdown Spinner XML Styling

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This XML snippet demonstrates how to style an Android `Spinner` using `@style/Widget.AppCompat.Spinner.Underlined`. It sets the underline color to `colorAccent` when activated, with `colorControlHighlight` for focused and pressed states.

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

--------------------------------

### Implement Colored Android Material Borderless Button

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

Demonstrates a colored borderless Android Button using @style/Widget.AppCompat.Button.Borderless.Colored. This style sets the text color to colorAccent and uses colorControlHighlight for focused and pressed states, offering a colored text button without a border.

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

--------------------------------

### Android SeekBar XML Styling

Source: https://github.com/stevenbyle/android-material-themes-demo/blob/master/README.md

This XML snippet shows how to style an Android `SeekBar` using the default `@style/Widget.AppCompat.SeekBar`. It automatically sets the slider color to `colorAccent` when activated, using `colorControlNormal` for the unset area and `colorControlHighlight` for focused and pressed states.

```xml
<SeekBar
	android:layout_width="match_parent"
	android:layout_height="wrap_content"/>
```
Tokens:
Raw