Kotlin

using Andriod Studio

TODO List kotlin

$$ To add a new todo item, the application will display what is called a $$Bottom Sheet$$

which will have a text field where the new todo item can be added.

$$ The Bottom Sheet is shown when the floating action button $($the button in the

bottom right of the screen with the $+$ icon$)$ is tapped.

$$ The user will be able to type the new todo into the text field.

o If the x icon is tapped, the contents of the field will be cleared.

o If the save button is clicked the todo item will be saved and the bottom sheet

will be dismissed.

o If the cancel button is clicked, the todo item will NOT be saved the bottom

sheet will be dismissed.

$$ The main screen will have a top bar which will have the name of the application.

$$ The main screen will have a list of todo items.

o Each todo item row will have a text which will be the todo item name.

o Each todo item will have a check box which can be toggled. This indicates

whether the item was completed. If it is checked the item is completed, if

unchecked the item is not completed.

Requirements

$$ Implement the UI in Jetpack Compose as shown above.

o You may use whichever colors for the components you wish provided you

adhere to the following:

$$ The save button must be filled

$$ The cancel button must be unfilled but have an outline

$$ The text field must be an outlined text field

$$ The todo items list must have the correct horizontal padding $(12$dp$).$

$$ The UI must be functional.

o Tapping on a todo item check box must toggle the check box state.

o Tapping on the floating action button must bring up the bottom sheet.

o Typing text into the text field must update the contents of the text field.

o Tapping on the save button must add the todo and update the list with the

new todo in an uncompleted state. And it must close the bottom sheet.

$$ If there is no text entered when the save button is tapped, the UI must

show an error.

o Tapping on the cancel button must close the bottom sheet without adding

the todo item.

o Tapping on the x icon in the text field must clear the text in the text field.

Here is picture what it looks like