Material Design in Android: CardView & BottomNavigationView with Kotlin XML

Material Design, introduced by Google, is a design language that emphasizes a grid-based layout, responsive animations and transitions, padding, and depth effects such as lighting and shadows. It provides a consistent visual experience across all platforms and devices. Implementing Material Design Components in your Android app not only makes your app visually appealing but also enhances the user experience by providing familiar and intuitive interfaces.

What are Material Design Components?

Material Design Components (MDC) are reusable UI elements based on the Material Design guidelines. These components include, but are not limited to: CardView, BottomNavigationView, TextView, Button, FloatingActionButton, and more. Utilizing these components helps developers create applications that align with Material Design standards seamlessly.

Why Use Material Design Components?

• Consistency: Ensures a consistent and familiar look and feel across different Android apps.
• User Experience: Improves user experience with intuitive and well-designed UI elements.
• Efficiency: Reduces development time by providing pre-built and customizable components.
• Accessibility: Helps in building more accessible applications, following accessibility guidelines.

Implementing Material Design Components: CardView and BottomNavigationView

In this blog post, we’ll explore how to implement two essential Material Design components—CardView and BottomNavigationView—using XML layouts in a Kotlin-based Android project.

1. Setting up the Project

First, make sure you have an Android project set up with Kotlin support. Create a new project in Android Studio, or open an existing one.

2. Adding Material Design Dependency

Add the Material Design dependency to your build.gradle file. This dependency provides access to the Material Design Components.

dependencies {
    implementation("com.google.android.material:material:1.6.0") // or newer
}

Sync your Gradle files after adding the dependency.

3. Implementing CardView

CardView is a UI component that provides a rounded corner layout with shadow, giving a card-like appearance. It’s useful for displaying content in a structured and visually appealing way.

Step 1: Add CardView to XML Layout

Open your XML layout file (e.g., activity_main.xml) and add the CardView:

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

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

        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Card Title"
            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6" />

        <TextView
            android:id="@+id/descriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Card Description"
            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2" />

    </LinearLayout>

</androidx.cardview.widget.CardView>

In this XML code:

• app:cardCornerRadius sets the corner radius of the card.
• app:cardElevation sets the shadow elevation of the card.
• The LinearLayout inside the CardView arranges the title and description text views vertically.

Step 2: Access CardView in Kotlin Activity

In your Kotlin Activity (e.g., MainActivity.kt), access the CardView and modify its properties:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.cardview.widget.CardView
import android.widget.TextView

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

        val cardView: CardView = findViewById(R.id.cardView)
        val titleTextView: TextView = findViewById(R.id.titleTextView)
        val descriptionTextView: TextView = findViewById(R.id.descriptionTextView)

        titleTextView.text = "Updated Card Title"
        descriptionTextView.text = "Updated card description using Kotlin!"

        cardView.radius = 12f // Example of changing corner radius
        cardView.cardElevation = 8f // Example of changing elevation
    }
}

This Kotlin code retrieves the CardView and its child TextViews from the layout and updates their properties programmatically.

4. Implementing BottomNavigationView

BottomNavigationView is a UI component that displays a bottom navigation bar, allowing users to switch between different sections of the app easily.

Step 1: Create a Menu Resource File

Create a menu resource file (e.g., bottom_navigation_menu.xml) in the res/menu directory:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menu_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search"
        android:title="Search" />

    <item
        android:id="@+id/menu_profile"
        android:icon="@drawable/ic_profile"
        android:title="Profile" />

</menu>

Ensure you have the required icons (ic_home, ic_search, ic_profile) in your res/drawable directory. These can be placeholder vector assets you create for the demonstration, or suitable .png files

Step 2: Add BottomNavigationView to XML Layout

Add the BottomNavigationView to your XML layout file:

<com.google.android.material.bottomnavigation.BottomNavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/bottom_navigation_menu" />

In this XML code:

• app:menu specifies the menu resource file to be used for the navigation items.

Step 3: Handle BottomNavigationView Item Selection in Kotlin Activity

In your Kotlin Activity, handle the item selection events for the BottomNavigationView:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import android.widget.Toast

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

        val bottomNavigationView: BottomNavigationView = findViewById(R.id.bottomNavigationView)

        bottomNavigationView.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.menu_home -> {
                    Toast.makeText(this, "Home Selected", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.menu_search -> {
                    Toast.makeText(this, "Search Selected", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.menu_profile -> {
                    Toast.makeText(this, "Profile Selected", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> false
            }
        }
    }
}

This Kotlin code retrieves the BottomNavigationView and sets a listener to handle item selection events, displaying a Toast message for each selected item.

Conclusion

Implementing Material Design Components, such as CardView and BottomNavigationView, using XML layouts in your Kotlin Android applications can significantly enhance the user interface and overall user experience. By following the steps outlined in this guide, you can create visually appealing and intuitive applications that adhere to Material Design principles. Incorporate these components to create consistent, accessible, and efficient user interfaces.