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.
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()
}
}
}
}
}
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()inColumn()as I did, then we will not face this error.In the
QuadrantCard()composable, you're usingfillMaxSize()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, thefillMaxSize()modifier might cause them to expand unnecessarily. Remove thefillMaxSize()from the QuadrantCard modifier, as the Row withweight(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.