HackerGprat
commented
3 months ago Suggestions for next time creating issue. and get faster replies by others.
- always wrap your code with 3 back ticks ( ``` )
Contents
Solution 1 - official code Solution 2 - my code Solution 3 - modifying your code to fix it - whole code provided at the end.
Solution 1:
You can always find any app code in the folder
app_name > app > src > main > java > com > example > app_name > file_name.kt
find the kotlin file and see the code.
e.g. they provided us the gihub link here is the above path followed. github repo of official - ComposeQuadrant app just visit link & open the kt file and see the code.
Solution 2:
You can Copy someone else code, like me,
- Benifits of looking someoneelse code. is you get the ideas how, why, and when to use, and it unlocks your mind,
-
My code 👈 ( click to expand )
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.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
) {
CF_compose_quadrant_app()
}
}
}
}
}
@Preview(
showBackground = true,
showSystemUi = true,
name = "First Screen"
)
@Composable
fun CF_compose_quadrant_app(){
Column( Modifier.fillMaxSize()) {
// Upper row
Row( Modifier.weight(1f) ){
CF_composeable_info_card(
title = stringResource(R.string.text_composable_title),
description = stringResource(R.string.text_composeable_description),
bgcolor = Color(0xFFEADDFF),
modifier = Modifier.weight(1f)
)
CF_composeable_info_card(
title = stringResource(R.string.image_composable_ttle),
description = stringResource(R.string.image_composeable_description),
bgcolor = Color(0xFFD0BCFF),
modifier = Modifier.weight(1f)
)
} // End of row 1
// Lower row
Row( Modifier.weight(1f) ){
CF_composeable_info_card(
title = stringResource(R.string.row_composable_title),
description = stringResource(R.string.row_composable_description),
bgcolor = Color(0xFFB69DF8),
modifier = Modifier.weight(1f)
)
CF_composeable_info_card(
title = stringResource(R.string.column_composable_title),
description = stringResource(R.string.column_composable_description),
bgcolor = Color(0xFFF6EDFF),
modifier = Modifier.weight(1f)
)
} // End of row 2
} // End of column
} // end of CF_compose_quadrant_app()
@Composable
private fun CF_composeable_info_card(title: String, description: String, bgcolor: Color, modifier: Modifier = Modifier ) {
Column (
modifier = modifier
.fillMaxSize()
.background(bgcolor)
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
// Title text
Text(
text = title,
modifier = Modifier.padding(bottom = 16.dp),
fontWeight = FontWeight.Bold
)
// Descriptions text
Text(
text = description,
textAlign = TextAlign.Justify
)
}
} // End of CF_composeable_info_card()
// Resources
// official link followed : https://github.com/google-developer-training/basic-android-kotlin-compose-training-practice-problems/tree/main/Unit%201/Pathway%203/ComposeQuadrantSolution 3:
you code is wrong at.
things i found in your code. Problems
- @composable ❌ -> @ Composable ✔- you written in small latter. ( its not your problem, its github problem it autocorrected it with small latter, because your code was not wrap wtih triple back tick ``` and github thought you are mentioning someone called composeable person, leave it ,
- .fillMaxWidth() ❌ -> .fillMaxSize() ✔
your code 👇 before
@Composable
fun ComposeQuadrantApp() {
Column(Modifier.fillMaxWidth())your code 👇 after
@Composable
fun ComposeQuadrantApp() {
Column(Modifier.fillMaxSize()
...in ComposeInfoCard funtion you set default value, by writign capital M in modifier, replace it with lower m, moddifer
your code 👇 before
@Composable
fun ComposeInfoCard(
title: String,
description: String,
modifier: Modifier = Modifier,
backgroundColor: Color
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier // 👈 see here , you set default value, by writign capital M in modifier, replace it with lower m, moddifer
.padding(16.dp)
.fillMaxSize()your code 👇 after
@Composable
fun ComposeInfoCard(
title: String,
description: String,
modifier: Modifier = Modifier,
backgroundColor: Color
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier // 👈 just little m,
.padding(16.dp)
.fillMaxSize()
.background(backgroundColor)) {
Text(after fixing this you will get this 👇
still getting lots of padding each side ? why?? because of extra padding in your ComposeInfoCard template
your code 👇
@Composable
fun ComposeInfoCard(
title: String,
description: String,
modifier: Modifier = Modifier,
backgroundColor: Color
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier // 👈 just little m,
// .padding(16.dp) // 👈 comment this out ,and extra pading gone
.fillMaxSize()
.background(backgroundColor)) {
Text(
shamas-nisar
`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() } }`