google-developer-training / basic-android-kotlin-compose-training-lemonade Goto Github PK

License: Apache License 2.0

Kotlin 100.00%

basic-android-kotlin-compose-training-lemonade's Introduction

Lemonade app

Introduction

The Lemonade app is a simple Compose app that allows the user to make digital lemonade by tapping through a series of steps: select a lemon from the tree, squeeze the lemon, drink the glass of lemonade, and start again.

The concepts covered in this app are:

Simple UI layout in Compose
Add clickable behavior to a composable
Use remember and mutableStateOf to keep track of relevant state in the app

Pre-requisites

Knowledge of basic UI composables
Able to set a click listener on a Button composable
Able to store state in a simple Compose app with remember and mutableStateOf

Getting Started

Download the starter code
Open the project in Android Studio
Complete the project in accordance with the app requirements

basic-android-kotlin-compose-training-lemonade's People

Contributors

Stargazers

Watchers

basic-android-kotlin-compose-training-lemonade's Issues

Practice problem: Click behavior

Link to images is broken

Practice problem: Click behavior

URL of codelab
https://developer.android.com/codelabs/basic-android-kotlin-compose-button-click-practice-problem?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-2-pathway-2%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-button-click-practice-problem#0

In which task and step of the codelab can this issue be found?
Practice:Click behavior -> [1. Before you begin]

Describe the problem
typo:

Remember that the solution is only one way to build the Lemonade app, so it's completely valid to build it a different way as long as the app requirements are met.

should be

Remember that the solution is NOT the only one way to build the Lemonade app, so it's completely valid to build it a different way as long as the app requirements are met.

Steps to reproduce?

Go to...
Click on...
See error...

Versions
Android Studio version:
API version of the emulator:

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

Practice problem: Click behavior - Missing image archive

The link to lemonade_images.zip archive leads to nowhere. At leas on the main branch.

I was able to download it from other branch, though.

Practice problem: Click behavior

when trying to download a zip archive, I see a 404 error

Practice problem: Click behavior

The link to download the images.zip does not work, the file is not there (error 404).

Practice problem: Click behavior

Download a zip file of the images for the app. Not working link (error 404)

Practice problem: Click behavior

404 error when link to download images is clicked

https://github.com/google-developer-training/basic-android-kotlin-compose-training-lemonade/raw/main/lemonade_images.zip

Download a zip file of the images for the app.Practice problem: Click behavior not work

Download a zip file of the images for the app. not work

Practice problem: Click behavior

In this CodeLab the link that is supposed to take us to images to use for building the application is actually a broken link and goes to a "Page Not Found" message.

Here is the link provided:
zip file of the images

Thanks, Scott.

Practice problem: No solution code found

Downloading and also checking the repository there was only a blank empty template, no solution.
$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-lemonade.git

Practice problem: Click behavior

The zip file for the images is broken

Practice problem: Click behavior

https://developer.android.com/codelabs/basic-android-kotlin-compose-button-click-practice-problem?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-2-pathway-2%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-button-click-practice-problem#4

If it's helpful, create a new composable function, called LemonTextAndImage() for example, that displays text above an image in the UI.

should read

If it's helpful, create a new composable function, called LemonTextAndImage() for example, that displays text below an image in the UI.

text below an image in the UI as the text is rendered below the image

[Question] how to add a Text in step 2 (squeeze lemon) //Practice problem: Click behavior

In which task and step of the codelab can this issue be found?
it's about the source code in this github repository

Describe the problem
No problem, but may I ask two questions ? if not, close&ignore this and please tell me where should I ask such questions.

How can you add a Text in step 2(lemon squeeze), hopefully using a Column, centered horizontally, below the lemon image that shows Taps left: N without modifying the LemonTextAndImage(...) function contents ?

I tried to use a Column but because there's a modifier=modifier.fillMaxSize() inside LemonTextAndImage it occupies the whole screen, so my Text is outside the screen / invisible.
(curiously though, modifier = modifier.fillMaxSize(0.9f) kind of works: at least my text isn't invisible below the screen like with 1f would)

In the following screenshot I tried using a Box but the vertical centering is a hack(because I wouldn't know where on the screen the lemon image ends, vertically) that only works well on the preview (see Taps left: 0 there) but not on any other device (because of screen sizes difference) like in the emulator (see Taps left: 6 there).

Is it possible to vertically center the Text so that it's just beneath the lemon image(and its included border), when using Box, that works on any device ? (this probably means, you've a way to detect where the lemon image ends(vertically) and place the Text right beneath that ?)

Versions
Android Studio version:
Android Studio Chipmunk | 2021.2.1 Patch 1
Build #AI-212.5712.43.2112.8609683, built on May 18, 2022
Runtime version: 11.0.12+0-b1504.28-7817840 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 5.17.15-gentoo-x86_64
GC: G1 Young Generation, G1 Old Generation
Memory: 4096M
Cores: 12
Registry: external.system.auto.import.disabled=true
Non-Bundled Plugins: org.jetbrains.kotlin (212-1.7.10-release-333-AS5457.46)
Current Desktop: LXQt
API version of the emulator:
31.2.10-8420304

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

PS: I've previously mistakenly created this issue in the wrong repository here google-developer-training/basic-android-kotlin-compose-training-dice-roller#15 I'm linking to it, in case anyone else stumbles upon that one and wants a quick jump over to this one, for any possible solutions. Thank you for your understanding.

Practice problem: Click behavior

Hello,

when i use the url of Download a zip file of the images for the app ( lemonade_images ) the page not found.

Best regards.

Practice problem: Click behavior

In this activity's step 3 called "Get started", at the very bottom there is a section called "Add visual polish" in it we can read the following

" Give the BUTTON an accent color and slightly ROUNDED corners to let the users know that they can tap the image."

In what previous activity along the units and paths up to this point did you teach the reader how to ROUND corners of a button let alone how to add an image to a button?

Practice problem: Click behavior

Unit 2: Building app UI
PATHWAY 2 Add a button to an app
Step 3 3. Get started
Can't download zip with images. Broken link https://github.com/google-developer-training/basic-android-kotlin-compose-training-lemonade/raw/main/lemonade_images.zip

Resource Link for images is broken

In the codelab for building the lemonade app, the link to download the zip files for the images does not work.

Practice problem: Click behavior

Guys, the link highlighted is redirecting to a not found Github repository page.

Practice problem: Click behavior

Solution code contains so many new things that (Scaffold etc.) wich are not mentioned but it is suggested to screen look like in example
Using .border is not explained and there is no example in documentation provided by Android Studio

Android Studio Giraffe | 2022.3.1 Patch 1
Build #AI-223.8836.35.2231.10671973, built on August 17, 2023
Runtime version: 17.0.6+0-b2043.56-10027231 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Windows 10 10.0
GC: G1 Young Generation, G1 Old Generation
Memory: 1280M
Cores: 4
Registry:
external.system.auto.import.disabled=true
ide.text.editor.with.preview.show.floating.toolbar=false

Practice problem: Click behavior - Link to download the zip file containing the images is broken

In which task and step of the codelab can this issue be found?
Task 3: Get Started
Sub-task - Add Images
Step 1: Link to download the zip file of the images is broken.

Describe the problem
https://github.com/google-developer-training/basic-android-kotlin-compose-training-lemonade/raw/main/lemonade_images.zip

The above link to download the zip file is broken

Steps to reproduce?

Go to... https://developer.android.com/codelabs/basic-android-kotlin-compose-button-click-practice-problem?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-2-pathway-2%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-button-click-practice-problem#2
Click on... zip file of the images hyperlink
See error...

Versions
Android Studio version:
API version of the emulator:

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

Practice problem: Click behavior

The link to the zip file for the images is broken and leads to a 404 page.

Practice problem: Click behavior

The drawable ZIP file no longer exists

Practice problem: Click behavior

Add additional space in between the text label and the image below it, so they're not too close to each other (such as 16dp).

should read

Add additional space in between the text label and the image above it, so they're not too close to each other (such as 16dp).

image above it as the text label is a composable after the image composable with a Spacer composable in between

Practice problem: Click behavior

Page not found when dowload zip file of the images

🚑 Lemon Click event issue

`
@composable
fun makingLemonade(
contentText: String,
modifier: Modifier=Modifier.padding(16.dp)) {

var isClicked by remember { mutableStateOf(1) }
var randomLemon=(2..4).random()
var squeezedLemon by remember { mutableStateOf(randomLemon)
}
var tabCountNow by remember {
    mutableStateOf(0)
}


val imageResource = when (isClicked) {
    1-> R.drawable.lemon_tree
    2->R.drawable.lemon_squeeze
    3->R.drawable.lemon_drink
    else->R.drawable.lemon_restart
}

val textResource = when (isClicked) {
    1 -> R.string.step1_body
    2 ->R.string.step2_body
    3 -> R.string.step3_body
    else -> R.string.step4_body
}

Column(
    modifier = modifier,
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally

) {
    Image(
        painter = painterResource(id = imageResource),
        contentDescription = contentText,
        contentScale= ContentScale.Crop,
        modifier= modifier
            .clip(RoundedCornerShape(20.dp))
            .background(Color(0xFF92B8B1))
            .clickable {
                if (isClicked == 2) {
                    //todo : tabcount만큼 클릭이 되면
                    if (squeezedLemon == tabCountNow) isClicked = 3
                    else tabCountNow++

                }
                if (isClicked == 4) {
                    isClicked = 1
                } else {
                    isClicked++
                }


            }

    )
  
}

This is how I implemented the code.
First of all, we looked at each process of making lemonade as the number 1,2,3,4 in the isClick variable.
RandomLemon variable randomly generates the number of times a lemon needs to be pressed
This was saved in the squaredzedLemon variable.

The tabCountNow variable has been remembered to save the number of times the current compression has been made.

And on Modifier.Clickable
I implemented the following logic

But just one tap of the execution results and it goes to the next image. What's the problem?

Practice problem: Click behavior

I dont understand the following:

In step 5 "Implement the App" you write there isnt a button in this app and we should read through the clickable dokumentation to make every composable clickable.
When i take a look at the solution code after trying to get it working for hours there is a button added...
I also can seond that i this codelab are a lot of new things wich were never refered to before....
btw i dont understand any word in your documentation...neither the weight one wich was refered before, not this one or any other one so this will not help me in any way.

So can anyone explain it to me?

here is how i implemented it till now...

package com.example.lemonadecompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.lemonadecompose.ui.theme.LemonadeComposeTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
LemonadeComposeTheme {
LemonadeApp()
}
}
}
}

@composable
@Preview
fun LemonadeApp() {
MakeLemonade(
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
)
}

@composable
fun MakeLemonade(modifier: Modifier = Modifier) {

var lemonState by remember { mutableStateOf(1) }
var toSqueeze by remember {mutableStateOf(0)}

var instructions = R.string.lemon_select
var imageResource = R.drawable.lemon_tree
var description = R.string.lemon_tree_description

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(imageResource),
            contentDescription = stringResource(id = description),
            modifier = Modifier
                .padding(bottom = 16.dp)
                .height(280.dp)
                .width(280.dp)
                .clickable { when (lemonState) {
                        1 -> {
                            lemonState++
                            instructions = R.string.lemon_squeeze
                            imageResource = R.drawable.lemon_squeeze
                            description = R.string.lemon_description
                            toSqueeze = (2..4).random()
                        }

                        2 -> {
                            if (toSqueeze == 0) {
                                lemonState++
                                instructions = R.string.lemonade_drink
                                imageResource = R.drawable.lemon_drink
                                description = R.string.full_glass_description
                            } else {
                                toSqueeze--
                            }
                        }

                        3 -> {
                            lemonState++
                            instructions = R.string.start_again
                            imageResource = R.drawable.lemon_restart
                            description = R.string.empty_glass_description
                        }

                        else -> {
                            lemonState = 1
                            instructions = R.string.lemon_select
                            imageResource = R.drawable.lemon_tree
                            description = R.string.lemon_tree_description
                        }
                    }
                }
                .background(
                    shape = RoundedCornerShape(100.dp),
                    color = Color.Blue
                )
        )
        Text(
            text = stringResource(instructions),
            fontSize = 18.sp
        )
        //only works with this etra composable that prints the lemonState
        //doesnt work if i set the clickable modifier in the upper text composable
        Text(
            text = lemonState.toString(),
            modifier = Modifier.clickable { lemonState++ }
        )
    }
}

}

Button colors - mismatch between hints and solution

Hi, I'm a newbye trying to learn Android Basics with Compose course;
I finished the codelab "Click behavior", but I noticed a mismatch between the hints, the pictures of the desired outcome and the solution code.

In hints you suggest to add Modifier.clickable() to the Image composable, but in the solution code you wrapped a Button around the Image.
Also in the same hint page you suggest to add a border (2dp, 4dp rounded corners, color = Color(105, 205, 216)) around the image, but the visual effect it's very different from the pictures of the desired output, that instead I obtain with the solution code.

I managed to succesfully finish the codelab, but I think that it will be far more easy if hints are coherent with solution code.

I addition, I noticed that solution code uses Material theme colors, still not treated in the course: I think that will be more understandable for beginners to use color resources...

Practice problem: Click behavior

https://github.com/google-developer-training/basic-android-kotlin-compose-training-lemonade/raw/main/lemonade_images.zip

This file not exist in the link, ,please check it

Practice problem: Click behavior

404 when click on "zip file the image "

Practice problem: Click behavior

The link for the ZIP files for the images doesn't work

Practice problem: Click behavior

Hi,

In the course named 'Practice: Associate a behavior with a click' (S'entraîner : associer un comportement à un clic), I cannot dowload archive of pictures normally available following this link (https://github.com/google-developer-training/basic-android-kotlin-compose-training-lemonade/raw/main/lemonade_images.zip). I receive a 404 HTTP Error.
Workaround: I donloaded manually 4 resources:

Congratulation 👏 for your work and the very good learning environment.
Michel 😉

What is a pathway and where do I find the starting point?

If one goes to https://developer.android.com/get-started/codelabs and selects the checkBox Collection :: Pathways one gets no results found.

Thanks

Practice problem: Click behavior

RGB project mentioned (r=105, g=205, b=216) do not match the screenshot in 5. Implement the app. To reproduce, please hit the link and find the values on the page.

Practice problem: Click behavior

The project images aren't available.

google-developer-training / basic-android-kotlin-compose-training-lemonade Goto Github PK

basic-android-kotlin-compose-training-lemonade's Introduction

Lemonade app

Introduction

Pre-requisites

Getting Started

basic-android-kotlin-compose-training-lemonade's People

Contributors

Stargazers

Watchers

Forkers

basic-android-kotlin-compose-training-lemonade's Issues

Recommend Projects

Recommend Topics

Recommend Org