In compose practice, only two quadrants' contents are displaying/complete four quadrants are not displaying in the output..

[shamas-nisar]

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.

[PanjiRajasa]

Thank you very much sir 😁🚀