Android Basics with Compose - Project: Create a business card app

Question

enter image description hereCurrently completing this practice https://developer.android.com/codelabs/basic-android-kotlin-compose-business-card?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-3%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-business-card and there is no mention on where to apply the Icon and Tint composables in the code I need to write.

I've not seen any learning material to advise on where to add Icon or Tint composables to the written code.

I have tried for several days to complete the codelab although I don't know how to apply the Icon or Tint composables.

I have been on Unit 1 for over a year, when I feel I should have completed the entire course. I cannot even progress past Unit 1 in their Android Basics in Kotlin course. I think I started learning in 2021.

All advise welcome.

Applied all code to the one @Composable and all text aligns well.

I've also added two @Composables, one for the image, my name and title and then another @Composable for the contact information. Although when I add the contact information to the second @Composable the contact information does not format correctly and positions itself at the top of the screen in the @Preview.

Slightly lost as to how to proceed as the course itself has not trained me to complete the practice codelab.

enter image description here enter image description here

Answer 1

I will try to give you a solution and explain each step. I hope it helps you to understand how this works.

Note that there are many ways of obtaining the same result. This is just one of them.

First you need something to fill the screen. I will use a box for that. The box is useful here because we can easily align its children. We will also apply the background color here:

Box(modifier = Modifier
    .fillMaxSize()
    .background(Color(0xFFd2e8d4))
) {

Inside my box I will create two columns: one for the android icon, full name and title; and other for the contacts.

On the codelab they show a prototype with colors. The red outline will be our columns and the blue outline will be our rows.

For my first column I will create a column center aligned:

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

Note that I can use align here because this code is inside a box.

Now that I have a centered aligned column, I will add the icon with an outside box just to add that background they have on the codelab. Note that I will ignore the blue lines for this first column, because we don't need rows for this:

Box(modifier = Modifier
            .size(104.dp)
            .background(Color(0xFF073042)),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.android_logo),
                contentDescription = null,
                modifier = Modifier.padding(8.dp)
            )
        }

I will also add the full name element:

Text(
            text = fullName,
            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
            fontSize = 35.sp
        )

And the title, with a different color applied:

Text(
            text = title,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF006d3b)
        )

Note that I added Modifier.padding(vertical = 8.dp) to the full name text because we need some space between the elements. But you could achieve the same effect by using verticalArrangement = Arrangement.spacedBy(8.dp) on the column or by using Spacer(Modifier.height(8.dp)) between the elements. It's up to you to pick the one that makes more sense to your use case.

Now that we have finished our first column, we will create the contacts' column. We want this column to be aligned to the bottom of the screen. For that, we will use the align again:

Column(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 16.dp)
            .width(IntrinsicSize.Max)
            .align(Alignment.BottomCenter),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

Here I introduce .width(IntrinsicSize.Max). This will tell our column to have the size of its biggest child. By using this, we can guarantee our contact elements will all be the same size.

As I said earlier, the blue lines on the codelab will be our rows. For the first column I didn't use rows, because we didn't need them (but you can add rows if you want), but for the second column we will need them.

We need each contact line to be a row because we will have both an icon and a text. Let's write the code for the phone contact:

Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Call,
                contentDescription = "phone",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = mobile,
                modifier = Modifier.fillMaxWidth()
            )
        }

Note the tint on the Icon. We use it to give the right color to the icon we selected.

For the other contacts you just need to add similar code to the column.

And that's all. We finished our layout. Here is the full code:

Box(modifier = Modifier
    .fillMaxSize()
    .background(Color(0xFFd2e8d4))
) {

    Column(
        modifier = modifier
            .padding(horizontal = 16.dp)
            .fillMaxWidth()
            .align(Alignment.Center),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(modifier = Modifier
            .size(104.dp)
            .background(Color(0xFF073042)),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.android_logo),
                contentDescription = null,
                modifier = Modifier.padding(8.dp)
            )
        }
        Text(
            text = fullName,
            modifier = Modifier.padding(vertical = 8.dp),
            fontSize = 35.sp
        )
        Text(
            text = title,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF006d3b)
        )
    }

    Column(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 16.dp)
            .width(IntrinsicSize.Max)
            .align(Alignment.BottomCenter),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Call,
                contentDescription = "phone",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = mobile,
                modifier = Modifier.fillMaxWidth()
            )
        }
        Row(
            modifier = Modifier
                .padding(bottom = 4.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Share,
                contentDescription = "social",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = social,
                modifier = Modifier.fillMaxWidth()
            )
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Email,
                contentDescription = "email",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = email,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}