Compose quadrant: Android Basics with Compose

[rchparkinson]

URL of codelab

In which task and step of the codelab can this issue be found?

Describe the problem

Steps to reproduce?

1. Go to...
2. Click on...
3. See error...

Versions Android Studio version: API version of the emulator:

Additional information Include screenshots if they would be useful in clarifying the problem.

[rchparkinson]

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") } } } } } https://github.com/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) } } }

https://github.com/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) https://github.com/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 ) } }

[johnshea]

Hi @rchparkinson

Thank you for writing in with your issue.

You have two items that need to be addressed in your code.

1. You need to pass a weight as a modifier for each Quadrant.
2. You need to pass use the "modifier" (lowercase "M") passed in.

With these two changes the columns were showing as expected.

Hope you are enjoying the course!

Regareds.

[rchparkinson]

John,Many thanks for your help here. I was up against the wall but what you suggested makes sense and it works. I added padding at the start and end of the justified text in each quadrant, which makes it more readable. Yes, I am enjoying the course and getting a lot out of it. Richard

On Monday, October 9, 2023 at 12:02:49 PM EDT, John Shea ***@***.***> wrote:  

Hi @rchparkinson

Thank you for writing in with your issue.

You have two items that need to be addressed in your code.

• You need to pass a weight as a modifier for each Quadrant.
• You need to pass use the "modifier" (lowercase "M") passed in.

With these two changes the columns were showing as expected.

Hope you are enjoying the course!

Regareds.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>