Coder Social home page Coder Social logo

Comments (65)

YaerQ avatar YaerQ commented on July 30, 2024

What does the error message say?

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

try

val context = LocalContext.current
            Button(onClick = { Toast.makeText(context,"Button Clicked", Toast.LENGTH_LONG).show()}) {
                
            }

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

I tried on my end and it worked. Make sure to replace Toast.makeText(this, with Toast.makeText(context,

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Now you have to program a way to recompose the UI with a different composition every time you click the button. But that's gonna depend on how you built your composables.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Hi Yaer! Well, I am finally finished with putting my 4 art pieces..... I found a good combination of codes that work and load properly. I uploaded both screen shots here, showing my 4 art pics, and I figured out the card view also. If you cant see them here, look in Github in our chat. Let me know if you want to see my code. Now the grand finale......to add the buttons and get them to click to each image! Since the screenshots are too big, I sent them in the next email! Get Outlook for Androidhttps://aka.ms/AAb9ysg
…

Hi
That's awesome! Yeah that's the trick. There are so many ways to do things that you will always find a way that works for you, and as long as it loads without any error then its fine 😁. Yes I wouldn't mind checking your code. The art you found looks great, mine are just random images from google since the app wouldn't be published lol.

The buttons is the tricky part, like I mentioned earlier the easiest way is with a when expression and a variable with a "mutableStateOf by remember"

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Button(onClick = {onNextClick()}, modifier = Modifier.width(100.dp)) { Text(text = "Next") }

I hoisted the onClick to a Parameter I made onNextClick() in the composable. I assigned () -> Unit as the type to that parameter so I can input a lambda function (I think that's what's called). That way when I call the composable in the when expression I can assign different behavior to the button depending on which state the var currentImage by remember {mutableStateOf(1)} is. Remeber that each state represent an image composable. For example for the first image the currentImage state is at 1 for the second the state is 2 and so on. So I want the next button to change it to state 2 and the previous button to change it to state 5 because I have 5 images.

 when (currentImage) {

            1 -> {
                ArtWithArtistCard(
                    artworkTitle = "Too Many Leaves on My Face",
                    artworkArtist = "Leavy Forrest",
                    artworkYear = "(2008)",
                    imageResourceId = R.drawable.image1,
                    imageDescriptionTextId = R.string.app_name,
                    onNextClick = {currentImage = 2},
                    onPreviousClick = {currentImage = 5}
                )
            }

As you can see I passed a lambda expression on the onNextClick and on the onPreviousClick that will set currentImage to 2 when I click the next button and to 5 when I click the previous button. If you notice on state 2 I change the onNextClick and onPreviousClick to 3 and 1 respectively. That way when I press next it will go to state 3 or if I press previous it will go to state 1.
Then I do the same to the other composables changing the button behavior accordingly. And if it's done correctly you should have a loop if you keep pressing the next or previous buttons.

when (currentImage) {

            1 -> {
                ArtWithArtistCard(
                    artworkTitle = "Too Many Leaves on My Face",
                    artworkArtist = "Leavy Forrest",
                    artworkYear = "(2008)",
                    imageResourceId = R.drawable.image1,
                    imageDescriptionTextId = R.string.app_name,
                    onNextClick = {currentImage = 2},
                    onPreviousClick = {currentImage = 5}
                )
            }

            2 -> {
                ArtWithArtistCard(
                    artworkTitle = "Kitty Cat",
                    artworkArtist = "Kat Jennings",
                    artworkYear = "(2018)",
                    imageResourceId = R.drawable.image2,
                    imageDescriptionTextId = R.string.app_name,
                    onNextClick = {currentImage = 3},
                    onPreviousClick = {currentImage = 1}
                )
            }

            3 -> {
                ArtWithArtistCard(
                    artworkTitle = "Are Fish Real?",
                    artworkArtist = "Sean Tunalo",
                    artworkYear = "(2020)",
                    imageResourceId = R.drawable.image3,
                    imageDescriptionTextId = R.string.app_name,
                    onNextClick = {currentImage = 4},
                    onPreviousClick = {currentImage = 2}
                )
            }

            4 -> {
                ArtWithArtistCard(
                    artworkTitle = "Ruining Mom's Garden",
                    artworkArtist = "Potter Green",
                    artworkYear = "(2019)",
                    imageResourceId = R.drawable.image4,
                    imageDescriptionTextId = R.string.app_name,
                    onNextClick = {currentImage = 5},
                    onPreviousClick = {currentImage = 3}
                )
            }

            5 -> {
                ArtWithArtistCard(
                    artworkTitle = "It's not Even Raining",
                    artworkArtist = "Rihanna",
                    artworkYear = "(2010)",
                    imageResourceId = R.drawable.image5,
                    imageDescriptionTextId = R.string.app_name,
                    onNextClick = {currentImage = 1},
                    onPreviousClick = {currentImage = 4}
                )
            }
        }

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

It depends on the order you wrote the properties in your composable

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

I can't see the screenshot. Make sure in the button onClick to write it as onNextClick() with the parentesis

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

No, sorry still can't find the screenshot, you can copy paste the code here using the add code button <> (or crtl+e) which will be easier to check too.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

I'm sorry but where are you sending it? If you are replying to the github notification email with the code that wont work you have to post it here directly.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Did you add onNextClick: () - > Unit as a property of the composable function you are using?

Ex.

@Composable
fun ArtistCard (onNextClick: () -> Unit ) {

....

}

This video should explain it more clearly

https://www.youtube.com/watch?v=mymWGMy9pYI
It explains how to save and change state and state hoisting.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Remember that
@Preview(showBackground = true)
@composable
fun ArtSpaceAppPreview() {
....
}

is just to let you see the preview on Android Studio and test the layout, you don't want any final code in there because it wont show if you run it in the emulator or an actual device. Anything you want to display should be between the Set Content brackets at the top of the file

You can do a composable just for the buttons if you want but it shouldn't be necessary. Can you post all the code so it's easier to to figure out whats going on?

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Ok you should give the onNextClick: () -> Unit property to the parent composable not directly to the button. In the button then you pass that property to the onClick like this onClick = {onNextClick()} the () are important if you pass onNextClick without them it wont work.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

You may want to reorganize the code then:
MainApp Composable -> The Main parent where the component composables will go
Component Composable -> where the different element composble will go... Image, Text, Button. You want to give the properties to this one.

then call the main composable inside the Set Content, and the Preview. If you check out the code I posted on the other thread the structure I used is there.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

No, make one composable with the state hoisting and re use it for the different pictures.

In the preview just call the main composable so you can preview it like this

@Preview(showBackground = true)
@Composable
fun ArtSpaceAppPreview() {
    ArtSpaceAppTheme {
        NameOfYourMainComposable()
    }
}

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Yes, if you hoist the state meaning if you add the information you need as properties to the composable function you can re use the composable.

What are those properties? Well, you need an image, the image description (for screen readers accessibility) the art name, the artist name, the year it was created/finished, and the function of the button. So your coposable function should look like this:
(Remember you can call the properties however you want, the names I use here are just an example same with the layout of the composable. Whats Important is the type you assign them and the order because when you use the composable it will ask the values for the properties in the same order you typed them.)

@Composable
fun ComponentComposable ( artImageId: Int, artDescriptionId: String , artName: String, artistName: String, artYear: String, onNextClick: () - > Unit, onPreviousClick: () - >) {

Column {
Image(
       painter = painterResource(artImageId),   //Here you pass the property you created instead of the image resource directly
       contentDescription = stringResource(artDescriptionId), //Here you pass the artDescription property
       contentScale = ContentScale.FillWidth,
      modifier = Modifier
      .padding(36.dp)
      .fillMaxWidth()
     )

//You do the same for the text and the buttons

Text(
         text = artistName,    // Pass the artistName property
         fontSize = artistFontSize,
         fontWeight = FontWeight.Bold,
         modifier = Modifier.padding(end = 4.dp)
         )
         
        Text(
                text = artYear, // Pass the artYear property 
                fontSize = 16.dp
       )
                                    //Pass the onNextClick lambda here
Button(onClick = { onNextClick() }, modifier = Modifier.width(100.dp)) {
                Text(text = "Next")
            }

}

Now you can call this ComponentComposable as many times you want and just pass the values the properties need. For example:

@Composable
fun MainApp () {

ComponentComposable (
            artImageId = R.drawable.image1 // or the name you gave the image file
            artDescriptionId = "Description of the image"
            artName = "Name of the piece"
            artistName = "Name of the Artist"
            artYear = "Art Year"
            onNextClick = { variable = 2 }  // here you pass the function you want the button to have.  in this case it will set the variable          
                                                          to 2 when you click the button.
            onPreviousClick = {5}  //same as onClick in this case it will set the variable to 5 so it goes to the last image (if you only have              
                                              5 images) 
)
                         
// for the second image and the third etc etc you just call the ComponentComposable  again and pass the information for the respective image. 

ComponentComposable (
            artImageId = R.drawable.image2
            artDescriptionId = "Description of the second image"
            artName = "Name of the second piece"
            artistName = "Name of the second Artist"
            artYear = "Art Year of the second image"
            onNextClick = { variable = 3 }            
            onPreviousClick = {variable = 1}                                                   
) 


}

if you used when then it should look like:

@Composable
fun MainComposable() {

when (variable) { 

1 - >  ComponentComposable (
            artImageId = R.drawable.image1 // or the name you gave the image file
            artDescriptionId = "Description of the image"
            artName = "Name of the piece"
            artistName = "Name of the Artist"
            artYear = "Art Year"
            onNextClick = { variable = 2 }  // here you pass the function you want the button to have.  in this case it will set the variable to 2 when you click the button.
            onPreviousClick = {5}  //same as onClick in this case it will set the variable to 5 so it goes to the last image (if you only have 5 images) 
)

2 - > ComponentComposable etc etc...

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

No problem! 🙂

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Can you send all the code? From the Import to the last line on the bottom. It would make it easier to check whats wrong.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Either with a spacer or padding

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

Oh I missed the post saying you got it. Glad you got it! 🙂

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

I just started learning Kotlin a few weeks ago (like a week before I replied to your original post), so far I'm just doing the codelabs and other tutorials when I can. I bought two kotlin courses in udemy and I'll do those after I finish all the codelabs.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

12.99 each on sale. "The Complete Kotlin Course - Mastering Kotlin from Zero" I started this one yesterday. This one is basic kotlin/OOP programing in general, most of the programs exercises in this course run on the console not on the emulator/phone.
The other one is "The Complete Android 12 Developer Course - Mastering Android" this is more advance and it teaches you how to make actual apps and how to use compose, databases, API's, audio/ video etc in your apps. This one I think has 2 projects, one is a movie app and the other one is a WhatApp like messenger app.

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

https://www.udemy.com/course/the-complete-kotlin-course-mastering-kotlin-from-zero/
https://www.udemy.com/course/the-complete-android-10-developer-course-mastering-android/

from basic-android-kotlin-compose-training-dice-roller.

YaerQ avatar YaerQ commented on July 30, 2024

I found it! I am going to get the entire course for just $16.99! That is a better deal!

Oh Nice, yeah udemy always has some kind of sale going on

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

jh115424 avatar jh115424 commented on July 30, 2024

from basic-android-kotlin-compose-training-dice-roller.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.