Android Day 20 Let's create a more complex layout logic ! A contact App Mock!

Let's make a contact app mock. It will have the functionality of adding contact info to your app and later modify it. But we won't use database in this project, at least for now.

package com.williamjiamin.contactappdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.williamjiamin.contactappdemo.ui.theme.ContactAppDemoTheme

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ContactAppDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    var contactPersons by remember { mutableStateOf(listOf<Contact>()) }
                    var showPopUpWindow by remember { mutableStateOf(false) }
                    var nameTextInput by remember { mutableStateOf("") }

                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center
                    ) {
                        LazyColumn(
                            modifier = Modifier
                                .fillMaxWidth()
                                .align(Alignment.CenterHorizontally)
                                .padding(16.dp)
                        ) {
                            items(contactPersons) {
                                // Display each contact here
                            }
                        }

                        Button(
                            onClick = { showPopUpWindow = true },
                            modifier = Modifier
                                .fillMaxWidth()
                                .align(Alignment.CenterHorizontally)
                                .padding(16.dp)
                        ) {
                            Text("Add Contact")
                        }

                        if (showPopUpWindow) {
                            AlertDialog(
                                onDismissRequest = { showPopUpWindow = false },
                                title = { Text("Input Contact Name:") },
                                text = {
                                    Column {
                                        OutlinedTextField(
                                            value = nameTextInput,
                                            onValueChange = { nameTextInput = it },
                                            label = { Text("Please Enter your Contact Name") }
                                        )
                                        Spacer(modifier = Modifier.height(16.dp))
                                        Row(
                                            horizontalArrangement = Arrangement.Start,
                                            modifier = Modifier.fillMaxWidth()
                                        ) {
                                            Button(
                                                onClick = {
                                                    // Logic for adding contact
                                                    showPopUpWindow = false
                                                }
                                            ) {
                                                Text("Add Contact")
                                            }
                                            Spacer(modifier = Modifier.width(8.dp))
                                            Button(
                                                onClick = {
                                                    showPopUpWindow = false
                                                }
                                            ) {
                                                Text("Cancel")
                                            }
                                        }
                                    }
                                },
                                confirmButton = {},
                                dismissButton = {}
                            )
                        }
                    }
                }
            }
        }
    }
}

data class Contact(
    val id: Int,
    var name: String,
    var phone: String,
    var email: String,
    var address: String,
    var isChanging: Boolean = false
)

In this demo, I didn't use the confirmButton = {}, dismissButton = {} , but we can also overwrite it :

package com.williamjiamin.contactappdemo

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.williamjiamin.contactappdemo.ui.theme.ContactAppDemoTheme

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ContactAppDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    var contactPersons by remember { mutableStateOf(listOf<Contact>()) }
                    var showPopUpWindow by remember { mutableStateOf(false) }
                    var nameTextInput by remember { mutableStateOf("") }
                    var phoneTextInput by remember { mutableStateOf("") }
                    var emailTextInput by remember { mutableStateOf("") }
                    var addressTextInput by remember { mutableStateOf("") }
                    var isChanging by remember { mutableStateOf(false) }

                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center
                    ) {
                        LazyColumn(
                            modifier = Modifier
                                .fillMaxWidth()
                                .align(Alignment.CenterHorizontally)
                                .padding(16.dp)
                        ) {
                            items(contactPersons) {
                                // Display each contact here
                            }
                        }

                        Button(
                            onClick = { showPopUpWindow = true },
                            modifier = Modifier
                                .fillMaxWidth()
                                .align(Alignment.CenterHorizontally)
                                .padding(16.dp)
                        ) {
                            Text("Add Contact")
                        }

                        if (showPopUpWindow) {
                            AlertDialog(
                                onDismissRequest = { showPopUpWindow = false },
                                title = { Text("Input Contact Name:") },
                                text = {
                                    Column {
                                        OutlinedTextField(
                                            value = nameTextInput,
                                            onValueChange = { nameTextInput = it },
                                            label = { Text("Please Enter your Contact Name") }
                                        )
                                        Spacer(modifier = Modifier.height(8.dp))
                                        OutlinedTextField(
                                            value = phoneTextInput,
                                            onValueChange = { phoneTextInput = it },
                                            label = { Text("Please Enter your Contact Phone Number") }
                                        )
                                        Spacer(modifier = Modifier.height(8.dp))
                                        OutlinedTextField(
                                            value = emailTextInput,
                                            onValueChange = { emailTextInput = it },
                                            label = { Text("Please Enter your Contact Email") }
                                        )
                                        Spacer(modifier = Modifier.height(8.dp))
                                        OutlinedTextField(
                                            value = addressTextInput,
                                            onValueChange = { addressTextInput = it },
                                            label = { Text("Please Enter your Contact Address") }
                                        )

                                    }
                                },
                                confirmButton = {
                                    Button(onClick = {
                                            // Logic for adding contact
                                            if(nameTextInput.isNotEmpty()){
                                                val newContact = Contact(
                                                    id = contactPersons.size + 1,
                                                    name = nameTextInput,
                                                    phone = phoneTextInput,
                                                    email = emailTextInput,
                                                    address = addressTextInput

                                                )
                                                contactPersons = contactPersons + newContact
                                                showPopUpWindow = false
//                                                println("$contactPersons")
                                                Log.i("ContactAppDemo", "All Contacts will be :$contactPersons")
                                            }

                                        }
                                    ) {
                                        Text("Add Contact")
                                    }
                                    Button(onClick = { showPopUpWindow = false}) {
                                        Text("Cancel")
                                    }
                                }
                            )
                        }
                    }
                }
            }
        }
    }
}

data class Contact(
    val id: Int,
    var name: String,
    var phone: String,
    var email: String,
    var address: String,
    var isChanging: Boolean = false
)

So you will see something like this: