Demo: Todo List

Some more practice with components and states!

In this demo, we'll build a simple todo list app with functionality to add new todos and display them in a scrolling list using components.

You'll start with an Empty Activity Project in Android Studio (see last week's demo for a refresher on how to do this)

Let's break this screen down into its individual components to help you get started:

---

Step 1: Set Up Your TodoScreen.kt File

Like the past couple of demos, you'll want to start by creating a file for your your screen. Let's call this one TodoScreen.kt

We'll also be using a custom component within our screen called TodoCard, which we'll go ahead and define in this file along with the TodoScreen composable.

@Composable
fun TodoScreen(){
    //...
}

@Composable
fun TodoCard(){
    //...
}

The TodoScreen is made up of multiple components that are visually "stacked" on top of each other, so we want to wrap everything in a Column component

To achieve the correct alignment of the contents of the Column, make use of the the modifier, horizontalAlignment, and verticalArrangement arguments.

---

Step 2: "My Todo List"

To start, make the title of the screen with font size 36.dp

Add a Spacer component with height 30.dp after this to make the screen more visually appealing

---

Step 3: TextField

This is where you'll be able to enter a new todo to be added to the list below.

To start, TextFields are valuable since they allow users to input some data that can then be stored, manipulated, and/or displayed later. Since the TextField value can be manipulated, let's use a MutableState to represent it.

var newTodo by remember{ mutableStateOf("") }

Like most components, TextField has a lot of different arguments possible. You'll usually only need to use four of them: modifier, placeholder, value, and onValueChange.

• If you roll over TextField to look at all of the arguments, you'll notice that there's some arguments with a type that looks like some variant of this () -> Unit. This means that you'll need to pass in a function.

  • Functions passed into arguments can either be defined elsewhere and called inline, or they can be defined inline within {}.

• This can be a little tricky, so give it a try yourself and check the answer when you need to!

TextField Arguments

TextField(
    modifier = Modifier.fillMaxWidth(),
    placeholder = { Text("new todo") },
    value = newTodo,
    onValueChange = { newText ->
        newTodo = newText
    }
)

Please ask if you have any questions about this!

Now when you build your code, you should be able to type in the TextField in the emulator!

---

Step 4: Button

When the Add Todo button is pressed, we want the current value of the TextField to be stored somewhere. For that we'll use the following:

val todoList by remember{ mutableStateListOf<String>() }

Here we use a val rather than a var since the List itself is mutable. When we update the list, we aren't defining a new one, just updating the existing one.

Button Syntax

Button(
    modifier,
    onClick = { }//what happens when the button is clicked 
){
    //the visual contents of your button
    //typically a Text component with the label that you want to use for the button.
}

• In the onClick argument of your Button, add the current value of the TextField to the todoList.

  • hint: if you want to see the possible functions on todoList, type todoList dot and look over the list that comes up.

• We also want to clear the TextField after the current value is stored in the list. To do this, we can also set newTodo = "" in the onClick argument.

  • hint: functions within the argument's curly braces need to be separated using a semicolon.

• Label the Button using a Text composable within the Button component's curly braces.

Now when you build the app, the TextField should reset to display the placeholder when you press the button.

• Behind the scenes, the TextField value is being stored in todoList before it's cleared, but we aren't making any UI updates when that happens so we can't see it just yet!

Add another Spacer with height 30.dp here!

---

Step 5: TodoCard

Todos will be displayed as a LazyColumn of TodoCards. Let's build that now!

Each card is going to be a stylized Row component. We'll want to use the modifier, padding, and background arguments.

• Note that the order in which you call Modifiers affects the appearance of the card. Pay attention to the order of the .padding() and .background() modifiers and see if you can figure out what's happening there.

Additional Specs:

• Add padding so that when the TodoCards are eventually displayed in a LazyColumn there's some vertical space between each card.

• The example card is LightGray, one of the Color class's default colors

• The TodoCard has corners with "roundness" of 12.dp

• Use 20.dp of padding between the Text and the edges of the card.

Write an @Preview composable for TodoCard and check that it matches the sample above!

Step 6: LazyColumn

Now that we have our TodoCard, let's use them to display our todoList with a LazyColumn.

Make a LazyColumn component in the TodoScreen that:

• Displays TodoCards with data from todoList

• Has height 200.dp

LazyColumn Syntax

LazyColumn(){
    items(some-list){
        some-composable(it) 
    }
}
//'it' is an implicitly declared name for a single-parameter lambda expression.
//it pretty much acts as each element of some-list so you don't need to iterate through some-list manually

You might need to do two imports on the items() code. Hover over any red lines to see if you missed an import!

hint: Use the verticalAlignment argument with Alignment.spacedBy() in the LazyColumn to make space between each TodoCard when they're displayed.

Run your app again. Now, when you type in a todo and hit the Add Todo button, you should see it appear below in order below the Button.

When you add enough todos, you'll be able to scroll through the LazyColumn!

Congrats, you've completed the demo! :)