Material Shape Theming with XML Views in Kotlin for Android UI

Material Design provides a visually consistent and user-friendly experience across Android applications. Shape Theming is a feature of Material Design that allows developers to customize the shapes of UI elements, enhancing the app’s overall aesthetic and brand identity. This blog post explores how to implement Material Shape Theming in Kotlin XML-based Android development.

What is Material Shape Theming?

Material Shape Theming enables developers to define a consistent shape style across UI components like buttons, cards, and dialogs. It utilizes the ShapeAppearanceModel to define different corner styles for various sizes of components. This customization brings a unified and recognizable look to the application, aligning it with branding guidelines.

Why Use Material Shape Theming?

• Consistent Design: Ensures a unified look across all UI elements.
• Brand Alignment: Allows the shapes to match branding guidelines.
• Improved Aesthetics: Enhances the visual appeal of the application.
• Customization: Offers flexibility in defining custom shapes.

Implementation Steps

Here’s how to implement Material Shape Theming using XML and Kotlin in Android development:

Step 1: Add Material Design Dependency

Include the Material Components for Android dependency in your app’s build.gradle file:

dependencies {
    implementation 'com.google.android.material:material:1.6.0' // Use the latest version
}

Step 2: Define ShapeAppearance Styles in styles.xml

Create custom shape styles in your res/values/styles.xml. These styles will define the shape appearance for small, medium, and large components.

<resources>

    <style name="ShapeAppearance.MyApp.SmallComponent" parent="ShapeAppearance.Material3.SmallComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">4dp</item>
    </style>

    <style name="ShapeAppearance.MyApp.MediumComponent" parent="ShapeAppearance.Material3.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

    <style name="ShapeAppearance.MyApp.LargeComponent" parent="ShapeAppearance.Material3.LargeComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

</resources>

Here, we’ve defined three shape appearance styles: ShapeAppearance.MyApp.SmallComponent, ShapeAppearance.MyApp.MediumComponent, and ShapeAppearance.MyApp.LargeComponent. Each style customizes the cornerFamily (rounded or cut) and cornerSize.

Step 3: Apply ShapeAppearance Styles to Components in themes.xml

Now, apply these shape appearance styles to your theme. Edit your res/values/themes.xml (or themes.xml (night) for dark theme) to include the shape theming attributes.

<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.Light.NoActionBar">
        <!-- Customize the shape appearance -->
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.MyApp.SmallComponent</item>
        <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.MyApp.MediumComponent</item>
        <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.MyApp.LargeComponent</item>
    </style>
</resources>

These lines assign the custom shape styles to the corresponding components.

Step 4: Apply the Theme in AndroidManifest.xml

Ensure that your application is using the custom theme defined in the previous step. This is typically done in your AndroidManifest.xml file.

<application
    android:theme="@style/Theme.MyApp">
    <!-- Other attributes -->
</application>

Step 5: Usage in Layout XML Files

You can also directly specify shape appearance styles for specific components in your layout XML files.

<com.google.android.material.button.MaterialButton
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    app:shapeAppearanceOverlay="@style/ShapeAppearance.MyApp.MediumComponent"/>

In this example, the shapeAppearanceOverlay attribute applies the specified shape appearance to the button.

Step 6: Customizing Shapes in Kotlin

You can also customize shapes programmatically using Kotlin. For example, to apply a custom shape to a MaterialButton:

import com.google.android.material.button.MaterialButton
import com.google.android.material.shape.ShapeAppearanceModel
import com.google.android.material.shape.CornerFamily
import com.google.android.material.shape.CornerSize
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val button: MaterialButton = findViewById(R.id.my_button)
        val shapeAppearanceModel = ShapeAppearanceModel()
            .toBuilder()
            .setAllCorners(CornerFamily.ROUNDED, CornerSize(20f))
            .build()
        
        button.shapeAppearanceModel = shapeAppearanceModel
    }
}

Example: Material CardView with Shape Theming

Here is an example of how to apply shape theming to a MaterialCardView.

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearance.MyApp.MediumComponent">

    <!-- Card Content -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Material CardView"
            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="This is a Material CardView with custom shape theming." />

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

Conclusion

Material Shape Theming provides a robust way to customize the appearance of your Android application, making it visually consistent and aligned with your brand. By defining shape styles and applying them via themes or directly in XML, developers can create appealing and cohesive user interfaces using Kotlin and XML views.