Android JetpackCompose UI Design Part-1

 

@Composable
fun Greeting() {
    Box {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .padding(12.dp)
        ) {

            Button(
                onClick = { },
                colors = ButtonDefaults
                    .buttonColors(
                        containerColor = Color.Green
                    )
            ) {
                Text(text = "OK", color = Color.Blue)
            }
            val state = remember {
                mutableStateOf("")
            }
            TextField(value = state.value, onValueChange = {
                state.value = it
            }, label = { Text(text = "Enter Name") })
            circularImage()
            ListViewItem(R.drawable.image, "supriya", "Android Developer")
            ListViewItem(R.drawable.image, "supriya", "Android Developer")
            ListViewItem(R.drawable.image, "supriya", "Android Developer")
            ListViewItem(R.drawable.image, "supriya", "Android Developer")
            ListViewItem(R.drawable.image, "supriya", "Android Developer")
            Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
                addItemToList().map {
                    ListItem(img = it.img, name = it.name, loc =it.loc)

                }
            }
        }

    }

}

@Composable
fun ListViewItem(imageId: Int, name: String, occupation: String) {
    Card(modifier = Modifier.padding(12.dp)) {
        Row(modifier = Modifier.fillMaxWidth()) {
            Image(
                painter = painterResource(
                    id = imageId
                ), modifier = Modifier.size(60.dp),
                contentDescription = ""
            )
            Column(modifier = Modifier.padding(start = 10.dp)) {
                Text(
                    text = name,
                    fontSize = 16.sp
                )
                Text(
                    text = occupation,
                    fontSize = 12.sp,
                    fontWeight = FontWeight.Thin
                )
            }
        }
    }

}
@Composable
fun circularImage(){
    Image(painter = painterResource(id = R.drawable.img3),
        contentDescription ="",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .padding(8.dp)
            .size(80.dp)
            .clip(CircleShape)
            .border(2.dp, Color.LightGray, CircleShape))
}