Gray Light Blog

Creating Visual Structure: A Deep Dive into "Card" and "Surface" You know how to lay out components and make them interactive. Now, let's focus on making them look good. "Card" and "Surface" are two fundamental Material Design composables that help you group content, create visual hierarchy, and give your app a clean, modern feel.

Bringing Your Compose UI to Life: An Introduction to State So far, all the UIs we've built have been static. They look nice, but they don't do anything. How do we make a number change when a button is clicked? How do we remember what a user has typed? The answer is State . This is the most crucial concept in declarative UI, and this guide will make it simple.

Mastering Layouts in Jetpack Compose: The "Box" Composable Welcome back to our Jetpack Compose series! You've learned how to arrange items vertically with Column and horizontally with Row . Now, it's time to learn the third fundamental layout composable: "Box" . This powerful tool allows you to stack components on top of each other and align them with precision.

Displaying Lists Efficiently: "LazyColumn" and "LazyRow" What if you need to display 1,000 items? If you put them all in a Column , your app will crash from trying to render everything at once. The solution is to be "lazy." LazyColumn and LazyRow are Compose's powerful tools for displaying long lists of content efficiently.

Building a Modern Screen: Using "Scaffold" in Jetpack Compose Your apps are becoming more interactive, but they still feel like a blank canvas. Real-world apps have common structural elements like top bars, floating action buttons, and navigation drawers. In Compose, you don't have to build these from scratch. Instead, you use "Scaffold" .

Essential Interactive Components: "Button", "TextField", and "Image" Now that you understand the magic of state, you can unlock the full potential of Compose's interactive components. In this post, we'll cover three of the most common elements you'll use in every single app: "Button" , "TextField" (for user input), and "Image" . 1. "Button": Handling User Clicks A Button is a simple composable that detects clicks. Its most important parameter is onClick , a lambda that executes when the button is pressed. We use this to trigger state changes. @Composable fun ButtonExample() { var message by remember { mutableStateOf("Click the button!") } Column(horizontalAlignment = Alignment.CenterHorizontally) { Text(message) Button( onClick = { message = "Button was clicked!" }, modifier = Modifier.padding(top = 8.dp) ) { ...

Understanding Layouts in Jetpack Compose: The "Row" In this guide, we'll explore the Row composable, the essential tool for placing UI elements side-by-side in Jetpack Compose.