Compose error - "Unresolved reference: align" after importing

Question

I was trying to study android jetpack compose and I have found some errors in my code.

Modifier has .align attributes but it doesn't work.

Other modifiers like padding, clip, etc are working right.

I use

Android Studio Arctic Fox | 2020.3.1 Patch 3
Build #AI-203.7717.56.2031.7784292, built on October 1, 2021
Runtime version: 11.0.10+0-b96-7249189 amd64

Kotlin 1.6.0

My full code:

package com.joung.week2_layout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
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.dp
import com.joung.week2_layout.ui.theme.Week2LayoutTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Week2LayoutTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    NameTag()
                }
            }
        }
    }
}

@Composable
fun NameTag() {
    Row{
        Surface(
            modifier = Modifier
                .size(50.dp)
                .padding(all = 4.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            // image url
        }
    }
    Column (
        modifier = Modifier
            .padding(all = 8.dp)
            .align(Alignment.CenterVertically)
            .clip(RoundedCornerShape(4.dp))
            ){
        Text(text = "Joung", fontWeight = FontWeight.Bold)
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text(text = "PHONE NUMBER", style = MaterialTheme.typography.body2)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun CardPreview() {
    Week2LayoutTheme {
        NameTag()
    }
}

Answer 1

Not all modifiers can be used with any composable. They are specific to the type or "scope" of the composable. The align modifier cannot be used with the Column composable. To align your content in a Column, use the verticalArrangement or horizontalAlignment parameters. To center vertically, use verticalArrangement = Arrangement.Center. Also, you are not setting the size of the Column. You should set this. In this example, I set it to fillMaxSize. And finally, on a side note, you should be using only the official version of Kotlin. Currently it is 1.5.31 and not 1.6. Using a newer version can cause major issues if Google hasn't been using it yet:

Column (
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .fillMaxSize()
            .padding(all = 8.dp)
            .clip(RoundedCornerShape(4.dp))
            ){

            }
        }