Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

Theming Material Design Buttons in Android with Examples

Theming Material Design buttons involves altering various attributes, including background color, text color, shape, and elevation. Here's a guide on how to theme Material Design buttons in Android:

Prerequisites:

Ensure you have the Material Components library in your build.gradle:

implementation 'com.google.android.material:material:<version>'

Replace <version> with the appropriate library version.

Also, make sure your app's theme inherits from a Material Components theme, such as Theme.MaterialComponents.Light.DarkActionBar.

1. Theming Material Button in XML:

XML Layout:

Declare your Material Button:

<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    app:backgroundTint="@color/yourButtonColor"
    android:textColor="@color/yourTextColor"
    app:cornerRadius="8dp"
    app:strokeWidth="2dp"
    app:strokeColor="@color/yourStrokeColor"/>

Replace yourButtonColor, yourTextColor, and yourStrokeColor with your desired colors.

2. Theming Material Button Programmatically:

In your activity or fragment, you can set the theme attributes programmatically:

import android.graphics.Color;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.button.MaterialButton;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MaterialButton materialButton = findViewById(R.id.materialButton);

        materialButton.setBackgroundColor(Color.BLUE);
        materialButton.setTextColor(Color.WHITE);
        materialButton.setStrokeWidth(2);
        materialButton.setStrokeColorResource(R.color.yourStrokeColor);
    }
}

3. Creating Custom Styles:

You can define custom styles for buttons to reuse them across your app:

res/values/styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        ...
    </style>

    <style name="CustomMaterialButton" parent="Widget.MaterialComponents.Button">
        <item name="backgroundTint">@color/yourButtonColor</item>
        <item name="android:textColor">@color/yourTextColor</item>
        <item name="cornerRadius">8dp</item>
        <item name="strokeWidth">2dp</item>
        <item name="strokeColor">@color/yourStrokeColor</item>
    </style>

</resources>

Apply the custom style in XML:

<com.google.android.material.button.MaterialButton
    style="@style/CustomMaterialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"/>

These are basic theming techniques for the Material Button. Remember, there are many other attributes you can customize, including ripple color, elevation, icon, and icon gravity. Check the official Material Components documentation for more detailed theming guidance.

  1. Customizing Material Design Button appearance in Android:

    • Description: Demonstrates basic customization of a Material Design Button.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    app:cornerRadius="8dp"
    app:strokeColor="@color/colorAccent"
    app:strokeWidth="2dp" />

  2. Changing color and style of Material Design Button in Android:

    • Description: Illustrates changing the color and style of a Material Design Button.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    app:backgroundTint="@color/customButtonColor"
    app:strokeColor="@color/customButtonStrokeColor"
    app:cornerRadius="12dp"
    app:strokeWidth="3dp" />

  3. Material Design theming for Buttons in Android:

    • Description: Integrates Material Design theming for Material Design Buttons.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    style="@style/Widget.MaterialComponents.Button"
    ... />

  4. Using styles and themes with Material Design Button Android:

    • Description: Demonstrates using styles and themes for Material Design Buttons.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    style="@style/MyMaterialButton"
    ... />

      <!-- styles.xml -->
<style name="MyMaterialButton" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/customButtonColor</item>
    <item name="strokeColor">@color/customButtonStrokeColor</item>
    <!-- Add other style attributes as needed -->
</style>

  5. Adding icon and text to Material Design Button with theming:

    • Description: Adds an icon and text to a themed Material Design Button.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    app:icon="@drawable/ic_add"
    app:iconGravity="textStart"
    app:iconPadding="8dp"
    app:backgroundTint="@color/customButtonColor"
    app:strokeColor="@color/customButtonStrokeColor"
    ... />

  6. Material Design Button animations and theming in Android:

    • Description: Introduces animations and theming for Material Design Buttons.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    android:layout_margin="16dp"
    android:translationZ="2dp"
    android:stateListAnimator="@anim/button_state_animator" />

  7. Themed Material Design Button with XML layout in Android:

    • Description: Demonstrates theming a Material Design Button directly in XML layout.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    style="@style/Widget.MaterialComponents.Button"
    ... />

  8. Applying custom colors to Material Design Button Android:

    • Description: Applies custom colors to a Material Design Button in Android.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me"
    app:backgroundTint="@color/customButtonColor"
    app:strokeColor="@color/customButtonStrokeColor"
    ... />

  9. Material Design Button theming in XML layout in Android:

    • Description: Specifies Material Design Button theming directly in XML layout.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    style="@style/Widget.MaterialComponents.Button"
    ... />

  10. Changing size and elevation of Material Design Button with theming:

    • Description: Adjusts the size and elevation of a themed Material Design Button.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="200dp"
    android:layout_height="60dp"
    android:text="Click me"
    android:elevation="8dp"
    ... />

  11. Material Design Button states and theming in Android:

    • Description: Addresses different states and theming of a Material Design Button.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    style="@style/Widget.MaterialComponents.Button"
    app:backgroundTint="@color/customButtonColorStateList"
    ... />

  12. Custom drawable for Material Design Button in Android theming:

    • Description: Utilizes a custom drawable for theming a Material Design Button.
    • Example Code (XML):
      <com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/custom_button_icon"
    ... />

  13. Creating themed Material Design Button with Kotlin in Android:

    • Description: Creates a themed Material Design Button using Kotlin.
    • Example Code (Kotlin):
      val materialButton: MaterialButton = findViewById(R.id.materialButton)
materialButton.backgroundTintList = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.customButtonColor))
materialButton.text = "Click me"
Copyright © devanddep.com | All Rights Reserved