google-developer-training / basic-android-kotlin-compose-training-practice-problems

Apache License 2.0
90 stars 112 forks source link

Fix missing row #8

Open RandomAndroidDev opened 10 months ago

RandomAndroidDev commented 10 months ago

As specified by codelabs image, there is a missing row around the first text

google-cla[bot] commented 10 months ago

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

shamas-nisar commented 3 months ago

Fixed the error in Compose Quadrants practice:

In previous code the error was Using modifier: Modifier.fillMaxWidth(). I have removed that and 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. Capture