Using Material Design 3 TextFields, Buttons, and Cards with Jetpack Compose

In this comprehensive guide, we will explore the vast possibilities of using Material Design 3 TextFields, Buttons, and Cards in Jetpack Compose. Material Design 3 components offer developers a powerful toolkit to create visually appealing and interactive user interfaces that adhere to Google’s latest design principles.

1. Creating a Basic TextField:

The BasicTextField composable in Jetpack Compose provides a simple text input field that allows users to type in text. You can customize the appearance and behavior of the TextField based on your app's requirements.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.BasicTextField
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun BasicMaterialDesign3TextField() {
    var text by remember { mutableStateOf("") }

    BasicTextField(
        value = text,
        onValueChange = { newText -> text = newText },
        singleLine = true,
        textStyle = MaterialTheme.typography.body1,
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .height(56.dp)
    )
}

2. Customizing the TextField with OutlinedTextField:

If you prefer a TextField with an outlined border, you can use the OutlinedTextField composable. Outlined TextFields have become a popular choice for modern app designs, providing a clear visual distinction between the input field and the surrounding content.

import androidx.compose.material3.OutlinedTextField
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.VisualTransformation

@Composable
fun CustomOutlinedMaterialDesign3TextField() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { newText -> text = newText },
        singleLine = true,
        label = { Text("Enter your name") },
        textStyle = MaterialTheme.typography.body1,
        visualTransformation = VisualTransformation.None,
        colors = TextFieldDefaults.outlinedTextFieldColors(
            textColor = Color.Black,
            focusedBorderColor = Color.Blue, // Custom focused border color
            unfocusedBorderColor = Color.Gray // Custom unfocused border color
        ),
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .height(56.dp)
    )
}

3. Creating a Basic Button:

Buttons are essential elements of any app, allowing users to trigger actions or navigate to different screens. The Button composable is a straightforward way to implement a clickable button with text.

import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme

@Composable
fun BasicMaterialDesign3Button(onClick: () -> Unit) {
    Button(
        onClick = onClick,
        content = { Text("Click Me") },
        modifier = Modifier.padding(16.dp)
    )
}

4. Customizing the Button with ElevatedButton:

For a button with an elevated appearance, you can use the ElevatedButton composable. Elevated buttons add depth to the user interface and stand out more, making them suitable for primary actions.

import androidx.compose.material3.ElevatedButton

@Composable
fun CustomElevatedMaterialDesign3Button(onClick: () -> Unit) {
    ElevatedButton(
        onClick = onClick,
        content = { Text("Submit") },
        colors = ButtonDefaults.elevatedButtonColors(
            backgroundColor = Color.Blue, // Custom background color
            contentColor = Color.White // Custom text color
        ),
        modifier = Modifier.padding(16.dp)
    )
}

5. Icon Buttons:

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.icons.Filled.Check
import androidx.compose.material3.icons.Filled.Close
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector

@Composable
fun IconButtonsExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        IconButton(
            onClick = { /* Handle positive action */ },
            content = { Icon(imageVector = ImageVector.vectorResource(id = R.drawable.ic_check), contentDescription = "Accept") },
            tint = Color.Green
        )

        IconButton(
            onClick = { /* Handle negative action */ },
            content = { Icon(imageVector = ImageVector.vectorResource(id = R.drawable.ic_close), contentDescription = "Close") },
            tint = Color.Red
        )
    }
}

6. Utilizing Material Design 3 Cards:

Material Design 3 Cards are versatile components that can hold various types of content, providing a clean and organized presentation. Cards are commonly used to group related information together, making it easier for users to consume data.

import androidx.compose.material3.Card
import androidx.compose.foundation.layout.*

@Composable
fun MaterialDesign3CardExample() {
    Card(
        elevation = 4.dp,
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
    ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text("Card Title", style = MaterialTheme.typography.h6)
            Spacer(modifier = Modifier.height(8.dp))
            Text("This is the content of the card.", style = MaterialTheme.typography.body1)
        }
    }
}

Material Design 3 Guidelines:

While using Material Design 3 components in your app, it’s essential to adhere to Google’s guidelines to provide a consistent and familiar user experience:

1. Depth and Elevation: Material Design 3 emphasizes the use of shadows and elevation to create a sense of depth and hierarchy among different elements. Higher elevation indicates higher importance. Elevate prominent UI elements like buttons to guide users’ attention.
2. Color System: Utilize the Material Design color system to maintain visual consistency throughout the app. Material Design 3 introduces color tokens, making it easier to manage colors. Choose colors that align with your app’s branding, but ensure there’s sufficient contrast for readability.
3. Responsive Interaction: Implement interactive elements that respond to user actions in a fluid and intuitive manner. Use animations, gestures, and touch responses to provide immediate feedback. For instance, add ripples to buttons when they are pressed to indicate the user’s action has been recognized.
4. Adaptive Components: Create adaptive UI components that adjust their appearance based on user preferences, device characteristics, and context. This ensures a consistent experience across different devices. For example, make sure your buttons and cards resize gracefully on various screen sizes.
5. Consistent Typography: Choose appropriate typography that aligns with your app’s design language. Use font weights and styles to create visual hierarchy and prioritize content. Material Design 3 provides a range of text styles, from heading to body text, that you can use to maintain consistency.
6. Accessibility: Ensure your app is accessible to all users, including those with disabilities. Follow Material Design 3’s accessibility guidelines, such as providing proper content descriptions for images and icons, and allowing users to navigate using keyboard shortcuts.

Conclusion

In this article, we’ve explored how to use Material Design 3 TextFields, Buttons, and Cards in Jetpack Compose. Material Design 3 components offer a wide range of options for building modern and visually appealing user interfaces. By following Google’s guidelines, you can create a seamless and delightful user experience that aligns with the latest design principles.

Material Design 3 is designed to elevate your Android app’s design, making it more dynamic, interactive, and visually stunning. Jetpack Compose simplifies the development process further, allowing you to create engaging UIs with less code and a more intuitive approach.

As you continue your app development journey, don’t hesitate to explore other Material Design 3 components and combine them in creative ways to design a user experience that truly stands out. With Material Design 3 and Jetpack Compose, you have the power to create stunning and user-friendly Android apps that engage your audience and leave a lasting impression. Happy coding!

LinkedIn — Github