CODEWITHSUNDEEP
androidandroid-studiokotlinandroid-jetpack-composeandroid-jetpack
droidchef
droidchef

Reputation: 2307

Jetpack Compose Modifier.fillMaxWidth.align fails to compile

Declaring a Box like this results in a compilation error

           Box(modifier = Modifier
                             .fillMaxWidth()
                             .align(Alignment.Center)) {
                            Text(text = "Hello")
                          }

import for align looks like this

import androidx.compose.foundation.layout.BoxScopeInstance.align

Error

Cannot access 'BoxScopeInstance': it is internal in 'androidx.compose.foundation.layout'

Compose Version = 1.1.1

Kotlin Version = 1.6.10

Android Studio Version = Android Studio Electric Eel | 2022.1.1 Canary 2

Upvotes: 2

Views: 4584

Answers (2)

Afterglow
Afterglow

Reputation: 405

The modifier.align() method can only be used in the Box, Column, Row layout scope.

For example, something like this.

Column(modifier = Modifier.fillMaxWidth()) {
  Text("Hello")
  Text("World", modifier = Modifier.align(Alignment.CenterHorizontally))
  Row(Modifier.align(Alignment.End)) {
     Icon(....)
  }
}

Using align in Column can only set Alignment whose property is Alignment.Horizontal, such as CenterHorizontally, Start, End.

Using align in Row can only set Alignment whose property is Alignment.Vertical such as CenterVertically Top, Bottom.

Use align in Box to set Alignment other than Alignment.Vertical and Alignment.Horizontal, such as TopStart, TopCenter, TopEnd, Center, BottomStart, BottomCenter, BottomEnd.

Upvotes: 4

Francesc
Francesc

Reputation: 29320

align is supposed to be called from within the content of the Box

Box(
    modifier = Modifier.fillMaxWidth()
) {
    Text(
        modifier = Modifier.align(Alignment.Center),
        text = "foobar"
    )
}

alternatively use contentAlignment

Box(
    modifier = Modifier.fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    Text(
        text = "foobar"
    )
}

Upvotes: 3

Related Questions