Search code examples
androidkotlinandroid-jetpack-composeandroid-jetpack

Modifer.align() not working for text in Row / Column / Box . Unresolved Scope Instance errors


Using Android Studio Giraffe 2022.3.1 So using the preset recommended compiler with this version of android studio

Finding Contradicting online information on .align() being able to be used in Column/Row Scope. Some say it doesn't work or only works inside BoxScope.

Yet the android developer introduction CODELAB uses this code and recommends this usage of Modifier.align() in columnScope which throws the same errors:

ERRORS

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

Unresolved reference: End

import androidx.compose.foundation.layout.ColumnScopeInstance.align // import causing the first error
{                            //Column Scope
            Text(
                text = message,
                fontSize = 100.sp,
                lineHeight = 116.sp,
                textAlign = TextAlign.Center
            )
            Text(
                text = from,
                fontSize = 36.sp,
                modifier = Modifier
                    .padding(16.dp)
                    .offset(90.dp)
                    .align(Alignment.End), // Error on this line
                textAlign = TextAlign.Left
            )
        }

Solution

  • align() can be used for Row, Box and Column. It is a misconception that align() only works for box type.

    GENERAL SOLUTION

    I.

    The input argument inside.align() is available under the same name under 3 types

    1)Alignment.Horizontal ----> Use inside Column Scope

    2)Alignment.Vertical ----> Use inside Row Scope

    3)Alignment (There is no extra description) ----> Use inside Box Scope

    II.

    Use the proper Alignment androidx.compose.ui.Alignment.xxxx argument inside align() it would look something like this:

    align(androidx.compose.ui.Alignment)

    III. (Follow ONLY if there is import error)

    If you have already tried importing, you would have this in your import statements :

    import androidx.compose.foundation.layout.(Column/Row/Box)ScopeInstance.align

    REMOVE it.

    PROBLEM

    The Issue is the 'overloading' of the Code Completion Inteli-Sense.

    The same key word "Alignment" would sometimes be used for Layout.Alignment and other times it would be used androidx.compose.ui.Alignment.

    Usually, Inteli-Sense is good at understanding this and matches this to the correct type. Yet sometimes it does not work very well, so we get the errors. Similarly, the align() function has a vertical, horizontal and normal context and inteli-sense can also mismatch the scope with the context.

    My Specific SOLUTION

    .align(androidx.compose.ui.Alignment.End)
    Solved the issue in a column scope. Also, I used align in a horizontal context.

    ColumnScope Align

    Make sure this is the Alignment used !

    Align(androidx.compose.ui.Alignment.End)

    Different types of Alignments Alignment

    In my IDE Alignment keyword was taken up by the Layout.Alignment

    So don't blindly follow inteli-sense, also just starting to learn android development doesn't help ;).

    P.S : The Myth that align() somehow only works in box can be traced to this.