Andriod Development

Simple login form

************************************

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import androidx.core.provider.FontsContractCompat
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "LOGIN HERE",
            fontSize = 30.sp,
            fontWeight = FontWeight.Bold
        )
        OutlinedTextField(
            value = "",
            onValueChange = {},
            label = {
                Text(text = "Enter Your Name")
            }
        )
        OutlinedTextField(
            value = "",
            onValueChange = {},
            label = {
                Text(text = "Enter Your Email")
            }
        )
    }
}


Simple Column

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun ColumnExample () {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text="Apple", fontSize = 30.sp)
        Text(text="Banana", fontSize = 30.sp)
        Text(text="Guava", fontSize = 30.sp)
    }
}

Row example

************************************

Preview(showBackground = true)
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun RowExample () {
    Row(
        modifier = Modifier.fillMaxSize(),
        //horizontalArrangement= Arrangement.Center,
        horizontalArrangement= Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text="Apple", fontSize = 30.sp)
        Text(text="Banana", fontSize = 30.sp)
        Text(text="Guava", fontSize = 30.sp)
    }
}

Grid making using Modifier

************************************

Preview(showBackground = true)
@Composable
fun ModifierExample () {

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(color = Color.Red)
            .padding(all = 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(space = 10.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(color = Color.Cyan)
                .padding(vertical = 10.dp),
            horizontalArrangement = Arrangement.SpaceAround
        )
        {
            Text(text = "Apple", fontSize = 20.sp)
            Text(text = "Banana", fontSize = 20.sp)
            Text(text = "Grapes", fontSize = 20.sp)
        }
        Box(
            modifier = Modifier
//                .height(200.dp)
//                .width(200.dp)
                .size(200.dp)
                .background( color = Color.Blue, shape = RoundedCornerShape(16.dp))
//                .padding(vertical = 5.dp)
                .clickable(onClick = { })
                .border(width = 5.dp, color = Color.White, shape= RoundedCornerShape(16.dp)),
            contentAlignment = Alignment.Center,
        ){
            Text(text = "Center", fontSize = 20.sp, color = Color.White)
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(color = Color.Magenta)
                .padding(vertical = 10.dp),
            horizontalArrangement = Arrangement.SpaceAround

        )
        {
            Text(text = "One", fontSize = 20.sp)
            Text(text = "Two", fontSize = 20.sp)
            Text(text = "Three", fontSize = 20.sp)
        }
    }
}




************************************************

Image & ICones

@Composable
fun ImageExample() {

    Image(
        painter = painterResource(R.drawable.reca),
        contentDescription = "Data Analytics",
        modifier = Modifier
            .padding(all = 16.dp)
            .size(300.dp)
            //.clip(shape = CircleShape)
            //.clip(shape = RectangleShape)
            .clip(shape = RoundedCornerShape(16.dp)),
        contentScale = ContentScale.FillBounds
    )
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun IconExample() {

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        val colour = null
        Icon(
            imageVector = Icons.Default.Person,
            contentDescription = "Person",
            modifier = Modifier.size(150.dp),
            tint = Color.Red
        )
    }
}

****************************************************

Button & Professional Login

@Composable
fun ButtonExample() {

    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Button(
            onClick = {
                Toast.makeText(
                    context,
                    "Hi Button Clicked!",
                    Toast.LENGTH_SHORT
                ).show()
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .padding(horizontal = 16.dp),
            colors = buttonColors(
                contentColor = Color.White,
                containerColor = Color.Black
            ),
            shape = RoundedCornerShape(size = 15.dp)
        ) {

            Row(
                modifier = Modifier
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically

            ) {

                Text(text = "Click Me")

                Icon(
                    imageVector = Icons.Default.Person4,
                    contentDescription = "Person"
                )
            }
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun LoginScreen () {

    var userName by remember { mutableStateOf(value = "") }
    var email by remember { mutableStateOf(value = "") }
    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize()
            .padding(horizontal = 16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Text(
            text = "Login here",
            fontSize = 30.sp,
            fontWeight = FontWeight.Bold
        )
        Spacer(modifier = Modifier.height(30.dp))

        OutlinedTextField(
            value = userName,
            onValueChange = {userName = it},
            modifier = Modifier.fillMaxWidth(),
            label = {Text(text = "Username")}
        )
        Spacer(modifier = Modifier.height(16.dp))
        OutlinedTextField(
            value = email,
            onValueChange = {email = it},
            modifier = Modifier.fillMaxWidth(),
            label = {Text(text = "Email")}
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = {
                Toast.makeText(
                    context,
                    "Hi Button Clicked!",
                    Toast.LENGTH_SHORT
                ).show()
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp),
//                .padding(horizontal = 16.dp),
            colors = buttonColors(
                contentColor = Color.White,
                containerColor = Color.Black
            ),
            shape = RoundedCornerShape(size = 15.dp)

        ) {

            Row(
                modifier = Modifier
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically

            ) {

                Text(text = "LOGIN", fontSize = 16.sp, fontWeight = FontWeight.Bold)
            }
        }
    }
    
}

@Composable
fun RectangleShape(size: Dp) {
    TODO("Not yet implemented")
}


************************************

Cards 

@Composable
fun CardExample () {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp),
                shape = RoundedCornerShape(12.dp),
           //olors = cardColors(containerColor = Color.Red)
//           colors = cardColors(containerColor = Color.Blue.copy(alpha = 0.50f),
                colors = cardColors(containerColor = Color.Blue,
                contentColor = Color.White),
            // elevation is used for shadow effects
            elevation = CardDefaults.cardElevation(defaultElevation = 10.dp),
            border = BorderStroke(width = 2.dp, color = Color.Black)

        )
        {
            Text(text = "This is example of Card", fontSize = 20.sp,
                modifier = Modifier.padding(20.dp))
        }
    }



}


// Professional looking card design
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun CardExample2 () {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp),
            colors = CardDefaults.cardColors(
                containerColor = Color.White
            ),
            elevation = CardDefaults.cardElevation(
                defaultElevation = 10.dp
            )
        )
        {
            Row (
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(all = 16.dp),
                    verticalAlignment = Alignment.CenterVertically
            ) {

                Box(
                    modifier = Modifier
                        .size(90.dp)
                        .background(color = Color.LightGray,shape = CircleShape),
                    contentAlignment = Alignment.Center

                ) {
                    Icon(
                        imageVector = Icons.Default.Person,
                        contentDescription = "Profile Picture",
                        modifier = Modifier.size(50.dp),
                        tint =Color.Gray
                    )

                }

                Spacer(modifier = Modifier.width(12.dp))
                Column() {
                    Text(text = "Meet Roots", fontSize = 20.sp, fontWeight = FontWeight.Bold)
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(
                        text = "Please subscribe for my channel to grow",
                        fontSize = 14.sp,
                        color = Color.DarkGray
                    )
                }
            }
        }
    }
}



************************************

Horizontal & Vertical Dividers

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun HorizontalDividerExample () {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "This is Top Example")
        HorizontalDivider(
            modifier = Modifier
                .width(120.dp)
                .padding(vertical = 16.dp),
            thickness = 2.dp,
            color = Color.Red
        )
        Text(text = "This is Bottm Example")

    }

}

************************************

State Management ( Most Important)


************************************

State Management ( With button)
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun StateManagementExample () {
    /*
    * remember keeps this value during recomposition
    * mutableIntStateOf holds the values that can change
    * and trigger recomposition when the value changes
    * */
    var score by remember { mutableIntStateOf(0) }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    )
    {

        Text(text="Score: $score", fontSize = 30.sp)
        Row {
            Button(onClick = {score++}, modifier = Modifier
                .weight(1f)) { Text(text = "Increase") }
            Spacer(modifier = Modifier.width(16.dp))
            Button(onClick = {score--}, modifier = Modifier
                .weight(1f), enabled = score > 0 ) { Text(text = "Decrease") }
        }
    }
}


//Remember savable example
@Preview
@Composable
fun RememberSavableExample () {
    //Remembersavable saves the state during configuration changes
    var score by rememberSaveable() { mutableIntStateOf(0) }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    )
    {

        Text(text="Score: $score", fontSize = 30.sp)
        Row {
            Button(onClick = {score++}, modifier = Modifier
                .weight(1f)) { Text(text = "Increase") }
            Spacer(modifier = Modifier.width(16.dp))
            Button(onClick = {score--}, modifier = Modifier
                .weight(1f), enabled = score > 0 ) { Text(text = "Decrease") }
        }
    }
}

************************************

Alert Dialoge Box ( Imporatant)
@Preview(showBackground = true, showSystemUi = false)
@Composable
fun AlertDialogueExample () {
    var openDialog by remember { mutableStateOf(true) }
    val context = LocalContext.current
    Column(
        modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    )
    {

        Card(    modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp),
            shape = RoundedCornerShape(12.dp),
            colors = cardColors(containerColor = Color.White),
            elevation = CardDefaults.cardElevation(defaultElevation = 10.dp)
        )
        {
            Row(modifier = Modifier
                .fillMaxWidth()
                .padding(all = 16.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            )
            {
                Text(text = "Alert Diloge Box", fontSize = 20.sp, fontWeight = FontWeight.SemiBold)
                IconButton(onClick = {openDialog = true}) {
                    Icon(imageVector=Icons.Default.Delete, contentDescription = "Delete Item" )
                }
            }
        }

}
    if (openDialog) {
        AlertDialog(
            onDismissRequest = { openDialog = false },

            title = {
                Text(text = "Delete Item")
            },

            text = {
                Text(text = "Are you sure you want to delete?")
            },

            confirmButton = {
                Button(
                    onClick = {
                        Toast.makeText(context,"Item has been deleted successfully!",
                            Toast.LENGTH_SHORT).show()
                        openDialog = false
                    },
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color.DarkGray,
                        contentColor = Color.White
                    )
                ) {
                    Text(text = "Delete")
                }
            },

            dismissButton = {
                Button(
                    onClick = {
                        openDialog = false
                    },
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color.LightGray,
                        contentColor = Color.DarkGray
                    )
                ) {
                    Text(text = "Cancel")
                }
            }
        )
    }
}



************************************

LazyRows ^ Lazy Columns ( Scrollable)


@Composable
fun LazyColumnExample () {

    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            //.background(color = Color.Red)
            .padding(all = 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(8.dp)
    )
    {
        items(count = 20){index ->
            Text(
                text = "Item $index",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White,
                modifier = Modifier
                    .padding(all = 16.dp)
                    .background(
                        color = Color.DarkGray,
                        shape = RoundedCornerShape(8.dp)
                    )
                    .padding(all = 16.dp)
            )
        }
    }
}


@Composable
fun LazyRowExample (

) {
    LazyRow(
        modifier = Modifier
            .fillMaxSize()
            //.background(color = Color.Red)
            .padding(all = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {

        items(count = 20){index ->
            Text(
                text = "Item $index",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White,
                modifier = Modifier
                    .padding(all = 16.dp)
                    .background(
                        color = Color.DarkGray,
                        shape = RoundedCornerShape(8.dp)
                    )
                    .padding(all = 16.dp)
            )
        }
    }
}

@Preview(showSystemUi = true, showBackground = true)
@Composable
fun NestedLazyList() {

    LazyColumn {

        items(count = 10) { rowIndex ->

            Text(
                text = "Row $rowIndex",
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold
            )

            LazyRow {

                items(count = 15) { index ->

                    Box(
                        modifier = Modifier
                            .padding(8.dp)
                            .size(100.dp)
                            .background(Color.LightGray, shape = RoundedCornerShape(16.dp)),
                            contentAlignment = Alignment.Center

                    ) {
                        Text(
                            text = "Item $index",
                            color = Color.Black,
                            modifier = Modifier.padding(16.dp)
                        )
                    }
                }
            }
        }
    }
}





No comments:

Post a Comment

Subscribe to: Posts (Atom)