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

Material Design Buttons in Android with Example

Material Design is a design language developed by Google which provides guidelines for the visual, motion, and interaction design across platforms and devices. In Android, the Material Design principles are embodied in the Material Components library.

Let's dive into how to use Material Design buttons in Android:

1. Add Dependency

To use Material Design components, you need to add the Material Components library dependency to your app's build.gradle:

implementation 'com.google.android.material:material:1.4.0'

Sync your project after adding the dependency.

2. Set App Theme

To take full advantage of Material Components, you should use one of the Material Themes. In your res/values/styles.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

3. Use Material Button

There are different styles of buttons available:

3.1. Contained Button (filled button)

This is the default style and it elevates when pressed.

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Contained Button"
    android:layout_margin="16dp"/>

3.2. Outlined Button

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Outlined Button"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_margin="16dp"/>

3.3. Text Button (formerly known as flat button)

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text Button"
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_margin="16dp"/>

4. Customize the Button

Material buttons have various attributes you can set to customize their appearance and behavior:

  • app:cornerRadius: Set the corner radius of the button.
  • android:textColor: Set the text color.
  • app:backgroundTint: Set the background color.
  • android:elevation: Set the elevation (shadow) of the button.
  • app:icon: Set an icon next to the button text.
  • app:iconGravity: Set the position of the icon (start or end of the text).
  • app:iconPadding: Set padding between the icon and the text.
  • app:iconTint: Set the color of the icon.

Here's an example of a customized button:

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Custom Button"
    android:textColor="@color/white"
    app:backgroundTint="@color/purple_500"
    app:cornerRadius="8dp"
    app:icon="@drawable/ic_custom_icon"
    app:iconGravity="start"
    app:iconPadding="8dp"
    app:iconTint="@color/white"
    android:layout_margin="16dp"/>

Remember to always test the appearance of your buttons in both light and dark themes, as well as on different API levels, to ensure consistency and compatibility across different devices and settings.

  1. Creating raised buttons in Android with Material Design:

    • Raised buttons have elevation and a shadow effect. Use the MaterialButton widget with the app:backgroundTint attribute.
    <com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Raised Button"
    app:backgroundTint="@color/colorPrimary" />

  2. Flat buttons in Android with Material Design example:

    • Flat buttons have no elevation or shadow. Use the MaterialButton widget without specifying app:backgroundTint.
    <com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Flat Button" />

  3. Android Material Design button styles and attributes:

    • Material Design buttons have various styles and attributes. Customize buttons using attributes like app:cornerRadius, app:icon, and app:iconGravity.
    <com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Styled Button"
    app:cornerRadius="8dp"
    app:icon="@drawable/ic_android"
    app:iconGravity="textStart" />

  4. Customizing Material Design buttons in Android:

    • Customize buttons further by adjusting attributes such as text size, text color, and background color.
    <com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Customized Button"
    android:textSize="16sp"
    android:textColor="@android:color/white"
    app:backgroundTint="@color/customColor" />

  5. Using MaterialButton in Android app development:

    • The MaterialButton widget is part of the Material Components library. Include the library in your build.gradle file.
    implementation 'com.google.android.material:material:1.5.0'
    • Use MaterialButton in your layout XML.

  6. Floating Action Button (FAB) in Android Material Design:

    • FAB is a circular button used for a promoted action. Use the FloatingActionButton widget.
    <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/colorAccent" />

  7. Material Design outlined buttons in Android:

    • Outlined buttons have a transparent background with an outlined border. Use style="@style/Widget.MaterialComponents.Button.OutlinedButton".
    <com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Outlined Button" />

  8. Material Design button states and animations:

    • Material Design buttons have different states like pressed, focused, and disabled. The library handles animations for these states.
    <com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Animated Button"
    app:backgroundTint="@color/colorPrimary"
    android:stateListAnimator="@null" />
Copyright © devanddep.com | All Rights Reserved