Android Day 21 Let's show our items in the List
I use an empty lambda expression and a new composible for this, don't worry, I will share more lambda expression in the next day.
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.border
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
everyContactPerson(
everyContact = it,
onChangeClick = {
// Logic for changing contact
isChanging = true
nameTextInput = it.name
phoneTextInput = it.phone
emailTextInput = it.email
addressTextInput = it.address
},
onDeleteClick = {
// Logic for deleting contact
contactPersons = contactPersons.filter { contact -> contact.id != it.id }
}
)
}
}
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")
}
}
)
}
}
}
}
}
}
}
@Composable
fun everyContactPerson(
everyContact: Contact,
onChangeClick: () -> Unit,
onDeleteClick: () -> Unit,
) {
// Display each contact here
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
.border(1.dp, MaterialTheme.colorScheme.background, MaterialTheme.shapes.medium)
){
Column (
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
) {
Text("Name: ${everyContact.name}")
Text("Phone: ${everyContact.phone}")
Text("Email: ${everyContact.email}")
Text("Address: ${everyContact.address}")
Spacer(modifier = Modifier.height(8.dp))
Row (
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center
){
Button(onClick = onChangeClick,
modifier = Modifier
.padding(8.dp)
) {
Text("Change")
}
Spacer(modifier = Modifier.width(8.dp))
Button(
onClick = onDeleteClick,
modifier = Modifier.padding(8.dp)
) {
Text("Delete")
}
}
}
}
}
data class Contact(
val id: Int,
var name: String,
var phone: String,
var email: String,
var address: String,
var isChanging: Boolean = false
)
You should be able to see this like this:
