Navigating Jetpack Compose

Jetpack Compose — Chapter 9: Simple Guide to Adding a TextField

A straightforward guide to seamlessly integrating TextFields into your Jetpack Compose UI

Table of contents

1. Introduction The opening chapter, setting the stage for our exploration of TextFields.
2. Our Enchanted Journey Through Jetpack Compose Explore the series roadmap, from UI basics to advanced layouts and state management.
3. Let’s start with TextField Introducing the TextField, a fundamental UI component.
4. Let’s make some Code Step-by-step coding exercise to integrate a TextField.

Introduction

We’ve got a fantastic journey ahead!

We’re about to embark on a deep dive into one of the most fundamental tools in our toolkit — the TextField. TextFields hold the power to capture a user’s mind — be it their name, favorite quotes, memorable dates, or their most-searched food!

I will say it’s the most critical component, like a Button because it gives you a way to make some inputs from the user, and that’s a crucial part of building the UI —giving the user the possibility to communicate with the app.

Our Enchanted Journey Through Jetpack Compose

Before we start, please take a look at where we are in our chapter list so you can explore what more that collection of articles will give you.

• Chapter 01: Diving Into Declarative UIs: The Jetpack Compose Revolution
• Chapter 02: Your First Spell: Conjuring Up a Composable Function
• Chapter 03: Stacking Blocks: Crafting Simple Layouts with Magic
• Chapter 04: The Power of Modifiers: Tailoring Your UI’s Style and Behavior
• Chapter 05: The Mighty Button: Triggering Actions with a Tap
• Chapter 06: Text Quest: Adding Words to Your World
• Chapter 07: Creating Space: The Art of Using Spacers
• Chapter 08: The Flexibility of Columns & Rows: Building Fluid Layouts
• Chapter 09: TextField Challenge: Summoning Input Fields from the Ether (YOU ARE HERE)
• Chapter 10: TextField Alchemy: Customizing Your Input Fields
• Chapter 11: A Picture’s Worth: Displaying Images with Jetpack Compose
• Chapter 12: Tick and Pick: Mastering Checkboxes & Radio Buttons
• Chapter 13: The Scaffold Tower: Constructing Complex Layouts with Ease
• Chapter 14 The Lazy River: Displaying Lists with Lazy Layouts
• Chapter 15: The State of Code Magic: Managing UI State in Jetpack Compose
• Chapter 16: The Magic Behind the Curtain: Understanding Recomposition

Let’s start with TextField

Our adventure commences with the TextField Composable. There are two mandatory, non-negotiable parameters to this composable:

• value: Think of it as the soul of the TextField. It carries the string value and always needs to be specified.
• onValueChange: Just as a good listener responds when you talk, this function responds when the TextField value changes. An absolute necessity, my friends!

That’s not where our adventure stops, though! The TextField Composable is kind enough to offer optional parameters to fashion the TextField to our liking. Some of these style companions include:

• label: If you ever want to give a nickname to TextField, this is your tool. It comes with a default value of null.
• placeholder: It's like a friendly reminder of what the TextField is awaiting from the user. It also defaults to null.
• modifier: An all-around magic tool, ready to modify our TextField in any way we want, with Modifier as default.
• enabled: It gives us the power to enable or disable our TextField. Comes set to true, because why wouldn't we want it enabled, right?

You might wonder:

“Where does TextField Composable belong?”

Well, you find it in the magnificent library, material 3. To join this exclusive club, use the @ExperimentalMaterial3Api annotation.

Let’s make some Code

For now, let’s illuminate our app by adding our very own TextField in the DemoPage Composable:

@ExperimentalMaterial3Api
@Composable
fun DemoPage() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        TextField(
            value = "",
            onValueChange = { },
            placeholder = {
                Text(text = "Tell me your favorite color")
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
        )
    }
}

Congratulations, wizards and code makers!

You’ve added a TextField to your app. Now it’s your time to perform the code magic.

• Spin a new file named MagicSearch.kt in your main folder . You can name it a component if you want.
• Conjure a new Composable named MagicSearch.
• Add a mystifying Box Composable into the MagicSearch.
• Ensure the Box Composable charms the entire width of the screen with a height of 72.dp.
• Now, summon a TextField Composable in your Box.
• Give a hint to your visitors by setting a placeholder — “Searching for code spells…”.
• Load the charm! Let it fill the entire width of the screen.

@ExperimentalMaterial3Api
@Composable
fun MagicSearch() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(75.dp)
            .padding(16.dp)
    ) {
        TextField(
            modifier = Modifier
                .fillMaxWidth(),
            value = "",
            onValueChange = {  },
            placeholder = {
                Text(
                    text = "Searching for code spells...",
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                )
            }
        )
    }
}

Terrific job, my fellow enchanters!

You’ve not only added a TextField, but also learned to tailor its appearance to fit your magical code skills to make a great UI style. Of course, this is just the beginning, but we must start from that so far.

Step by step you start to realize that you have a nice collection of skills to be able to make a UI for an Android app :D

In our next gathering, we’ll add fascinating icons and enchanting colors to our TextField. Until then, keep practicing the code!