the text justify is not working on physical devices, not this but.. previous all justify text projects were not justifying texts in physical devices, but its working fine in design view

problem could be

• a bug in textAlign = TextAlign.Justify
• or i should test on above 7.0 nogut api devices
• i will go with 3rd options leave it and relax ✔

`Here's my code
package com.example.composequadrantapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composequadrantapp.ui.theme.ComposeQuadrantAppTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeQuadrantAppTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
ComposeQuadrantApp()
}
}
}
}
}

@composable
fun ComposeInfoCard(
title: String,
description: String,
modifier: Modifier = Modifier,
backgroundColor: Color
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(16.dp)
.fillMaxSize()
.background(backgroundColor)) {
Text(
text = title,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(
bottom = 16.dp
)
)
Text(
text = description,
textAlign = TextAlign.Justify
)
}
}
@composable
fun ComposeQuadrantApp() {
Column(Modifier.fillMaxWidth()) {
Row(modifier = Modifier.weight(1f)) {
ComposeInfoCard(
title = stringResource(R.string.title_one),
description = stringResource(R.string.description_one),
backgroundColor = Color(0xFFEADDFF),
modifier = Modifier.weight(1f)
)
ComposeInfoCard(
title = stringResource(id = R.string.title_two),
description = stringResource(id = R.string.description_two),
backgroundColor = Color(0xFFD0BCFF),
modifier = Modifier.weight(1f)
)
}
Row(Modifier.weight(1f)) {
ComposeInfoCard(
title = stringResource(id = R.string.title_three),
description = stringResource(id = R.string.description_three),
backgroundColor = Color(0xFFB69DF8),
modifier = Modifier.weight(1f)
)
ComposeInfoCard(
title = stringResource(id = R.string.title_four),
description = stringResource(id = R.string.description_four),
backgroundColor = Color(0xFFF6EDFF),
modifier = Modifier.weight(1f)
)
}
}
}

@Preview(showBackground = true)
@composable
fun ComposeQuadrantAppPreview() {
ComposeQuadrantAppTheme {
ComposeQuadrantApp()
}
}`

This is final result.
The text is fill the box, not in the center.

I'm doing the Kotin course at https://developer.android.com/codelabs/basic-android-kotlin-compose-composables-practice-problems?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-composables-practice-problems#4.

The "Compose Article" exercise displayed its image without an issue, but not the "Task Manager" exercise. I copied your exact "Task Manager" code into Anroid Studio and ran the code. The @composable Preview showed the image and the text, but the Android emulators I chose showed only the text but not the image. Any idea why?

https://github.com/google-developer-training/basic-android-kotlin-compose-training-practice-problems/tree/main/Unit%201/Pathway%203/ComposeQuadrant

The use of modifier: Modifier.fillMaxSize() causing the output not displaying the full content.

I have tried every way possible to figure out what's going wrong. After trying different methods I found if we don't use modifier: Modifier.fillMaxWidth() in Column() as I did, then we will not face this error.

In the QuadrantCard() composable, you're using fillMaxSize() for the modifier, which might be causing the quadrants to occupy the entire available space. Since each QuadrantCard is placed inside a Row with a weight of 1f, the fillMaxSize() modifier might cause them to expand unnecessarily.
Remove the fillMaxSize() from the QuadrantCard modifier, as the Row with weight(1f) modifier already takes care of distributing the available space evenly among the quadrants.

Here is my code:

`package com.example.four_quadrantscreen

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.four_quadrantscreen.ui.theme.Four_quadrantScreenTheme
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Four_quadrantScreenTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
FourQuadrantPage()
}
}
}
}
}

@composable
fun FourQuadrantPage() {
Column(Modifier.fillMaxWidth()) {
Row(Modifier.weight(1f)) {
QuadrantCard(
titleOne = stringResource(R.string.T1) ,
description = stringResource(R.string.D1) ,
backgroundColor = Color(0xFFEADDFF),
modifier = Modifier.weight(1f)
)
QuadrantCard(
titleOne = stringResource(R.string.T2) ,
description = stringResource(R.string.D2) ,
backgroundColor = Color(0xFFD0BCFF),
modifier = Modifier.weight(1f)
)
}
Row(Modifier.weight(1f)) {
QuadrantCard(
titleOne = stringResource(R.string.T3) ,
description = stringResource(R.string.D3),
backgroundColor = Color(0xFFB69DF8),
modifier = Modifier.weight(1f)
)
QuadrantCard(
titleOne = stringResource(R.string.T4) ,
description = stringResource(R.string.D4),
backgroundColor = Color(0xFFF6EDFF),
modifier = Modifier.weight(1f)
)
}
}
}

@composable
private fun QuadrantCard(
titleOne: String,
description: String,
modifier: Modifier = Modifier,
backgroundColor: Color
) {
Column (
modifier = modifier
.background(backgroundColor)
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = titleOne,
modifier = Modifier.padding(16.dp),
fontWeight = FontWeight.Bold,
fontSize = 13.sp
)
Text(
text = description,
textAlign = TextAlign.Justify
)
}
}

@Preview(showBackground = true)
@composable
fun GreetingPreview() {
Four_quadrantScreenTheme {
FourQuadrantPage()
}
}
`

With this code you get the result like here:

The output of my practice code.

With the code below only the left quadrants appear. I still can't figure out the solution.

package com.example.composequadrant

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composequadrant.ui.theme.ComposeQuadrantTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeQuadrantTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Quadrants(
                        titleUpperRight = "Text composable",
                        textUpperRight = "Displays text and follows the recommended Material Design guidelines.",
                        colorUpperRight = Color(0xFFEADDFF),
                        titleUpperLeft = "Image composable",
                        textUpperLeft = "Creates a composable that lays out and draws a given Painter class object.",
                        colorUpperLeft = Color(0xFFD0BCFF),
                        titleBottomRight = "Row composable",
                        textBottomRight = "A layout composable that places its children in a horizontal sequence.",
                        colorBottomRight = Color(0xFFB69DF8),
                        titleBottomLeft = "Column composable",
                        textBottomLeft = "A layout composable that places its children in a vertical sequence.",
                        colorBottomLeft = Color(0xFFF6EDFF)
                    )
                }
            }
        }
    }
}

@Composable
fun ComposableInfoCard(title: String, description: String,
                        color: Color, modifier: Modifier = Modifier) {
    // Setup background, padding and size modifiers. Also, set the alignment to center - vertically as well
    // as horizontally
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .fillMaxSize()
            .background(color)
            .padding(16.dp)
    ) {
        Text(
            text = title,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Text(
            text = description,
            textAlign = TextAlign.Justify,
        )
    }
}

@Composable
fun Quadrants(titleUpperRight: String, textUpperRight: String, colorUpperRight: Color,
              titleUpperLeft: String, textUpperLeft: String, colorUpperLeft: Color,
              titleBottomRight: String, textBottomRight: String, colorBottomRight: Color,
              titleBottomLeft: String, textBottomLeft: String, colorBottomLeft: Color,
              modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        Row(modifier = Modifier.weight(1f)) {
            ComposableInfoCard(
                title = titleUpperRight,
                description = textUpperRight,
                color = colorUpperRight
            )
            ComposableInfoCard(
                title = titleUpperLeft,
                description = textUpperLeft,
                color = colorUpperLeft
            )
        }
        Row(modifier = Modifier.weight(1f)) {
            ComposableInfoCard(
                title = titleBottomRight,
                description = textBottomRight,
                color = colorBottomRight
                )
            ComposableInfoCard(
                title = titleBottomLeft,
                description = textBottomLeft,
                color = colorBottomLeft
                )
            }
        }

    }


@Preview(showBackground = true)
@Composable
fun QuadrantPreview() {
    ComposeQuadrantTheme {
        Quadrants("1,1,1",
            "1,1,2",
            Color(0xFFEADDFF),
            "1,2,1",
            "1,2,2",
            Color(0xFFD0BCFF),
            "1,2,1",
            "1,2,2",
            Color(0xFFB69DF8),
            "2,2,1",
            "2,2,2",
            Color(0xFFF6EDFF)
        )
    }
}

Images are not loading.

Line 73 has a redundant trailing comma

@composable
private fun ArticleCard(
title: String,
shortDescription: String,
longDescription: String,
imagePainter: Painter,
modifier: Modifier = Modifier,
) {

In developing a solution to the Compose Quadrant exercise, I followed the guidance that suggested using
Row(Modifier.weight(1f)) { ...
in order to create two equal-width elements in each row. This usage is supposed to set the width of each element in the row. However, when I hover the mouse over the word weight, I see that it is sizing element height and has ColumnScope. I do not see a second column in the Preview.

I need help determining the problem.

Here is my code:

package com.example.composequadrant

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composequadrant.ui.theme.ComposeQuadrantTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeQuadrantTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
//Greeting("Android")
}
}
}
}
}
@composable
fun QuadrantAssembly(heading11: String, content11: String, colour11: Long,
heading12: String, content12: String, colour12: Long,
heading21: String, content21: String, colour21: Long,
heading22: String, content22: String, colour22: Long,
modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
modifier = Modifier
.padding(16.dp)
) {
Row(Modifier.weight(1f)) {
Quadrant(heading11, content11, colour11)
Quadrant(heading12, content12, colour12)
}
Row(Modifier.weight(1f)) {
Quadrant(heading21, content21, colour21)
Quadrant(heading22, content22, colour22)
}
}
}

@composable
fun Quadrant(heading: String, content: String, colour: Long, modifier: Modifier = Modifier) {
Surface(modifier = Modifier.fillMaxSize(), color = Color(colour)) {
Column(
verticalArrangement = Arrangement.Center,
modifier = modifier
) {
Text(
text = heading,
fontWeight = FontWeight.Bold,
modifier = Modifier
.align(alignment = Alignment.CenterHorizontally)
.padding(bottom = 16.dp)
)
Text(
text = content,
modifier = modifier,
textAlign = TextAlign.Justify
)
}
}
}

@Preview(showBackground = true)
@composable
fun QuadrantPreview() {
ComposeQuadrantTheme {
QuadrantAssembly(
stringResource(R.string.quad11_heading), stringResource(R.string.quad11_content), 0xFFEADDFF,
stringResource(R.string.quad12_heading), stringResource(R.string.quad12_content), 0xFFD0BCFF,
stringResource(R.string.quad21_heading), stringResource(R.string.quad21_content), 0xFFB69DF8,
stringResource(R.string.quad22_heading), stringResource(R.string.quad22_content), 0xFFF6EDFF
)
}
}

I am missing something in my code that doesn't allow for Compose Quadrant to come out 2 on top and 2 on the bottom but all side by side. What am I missing? Thanks!
package com.example.composableinfo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composableinfo.ui.theme.ComposableInfoTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposableInfoTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background,
) {
ComposeInfoApp()
}
}
}
}
}

data class ComposableInfo(val title: String, val description: String)

@composable
fun ComposableCard(composableInfo: ComposableInfo) {
Card(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
.weight(1f)
.background(Color.White),
elevation = 4.dp
) {
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = composableInfo.title,
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
color = Color.Blue,
modifier = Modifier.padding(bottom = 16.dp)
)
Text(
text = composableInfo.description,
fontSize = 14.sp
)
}
}
}

@composable
fun ComposeInfoApp() {
val composables = listOf(
ComposableInfo(
title = "Text Composable",
description = "Displays text and follows the recommended Material Design guidelines."
),
ComposableInfo(
title = "Image Composable",
description = "Creates a composable that lays out and draws a given Painter class object."
),
ComposableInfo(
title = "Row Composable",
description = "A layout composable that places its children in a horizontal sequence."
),
ComposableInfo(
title = "Column Composable",
description = "A layout composable that places its children in a vertical sequence."
)
)

Column(
    modifier = Modifier.fillMaxSize()
) {
    Row(
        modifier = Modifier.fillMaxWidth().weight(1f)
    ) {
        composables.subList(0, 2).forEach { composable ->
            ComposableCard(composable)
        }
    }

    Row(
        modifier = Modifier.fillMaxWidth().weight(1f)
    ) {
        composables.subList(2, 4).forEach { composable ->
            ComposableCard(composable)
        }
    }
}

}

@Preview(showBackground = true)
@composable
fun ComposeInfoAppPreview() {
ComposableInfoTheme {
ComposeInfoApp()
}
}

its working on the preview but not on the emulator