Creating an Image Card Composable - Android Jetpack Compose - Part 4

[@philipberthiaume2314]

Material 3, Card elevation: CardDefaults.cardElevation(defaultElevation = 5.dp)

[@maheshj01]

Thanks I was trying to figure this out looking through the docs.

[@timballew3742]

Wish I had seen this comment earlier, but eventually came up with a similar solution: elevation = CardDefaults.cardElevation(5.dp)

[@minex6tt]

TYY!

[@JamesBond-mq7pd]

thank you bro. you're life saver

[@aviiraj_sharma]

Thankyou Brother 🫶

[@Sudhindra3000]

7:45 For aligning individual items in a Box, you dont need to create another Box and align the item in that box with contentAlignment. You can use the align() Modifier and Specify the alignment So for aligning the text in this video you can do: Text( text = "Kermit the frog", modifier = Modifier .align(Alignment.BottomStart) .padding(12.dp), fontSize = 16.sp ) The same can be done to align individual Items in a Row or a Column too😃

[@PhilippLackner]

Thanks, that's new to me!

[@ojukwuezechukwu9712]

That's true

[@joshuacastro7418]

Have you guys face align showing up as a reference error, without the option to import it? I tried implementing this version but can’t figure out where it’s going wrong

[@kumarvelu]

@@joshuacastro7418 , that's because you are calling align outside of the BoxScope. You can align any compose elements which are within Box as a child.

[@programmingThings]

if someone is facing issue in elevation attribute : Card( shape = RoundedCornerShape(20.dp), elevation = CardDefaults.cardElevation( defaultElevation = 10.dp ) )

[@ChristiaanHunter]

thanks 😀

[@MrCelestiaI]

Amazing video man. I would love to see you continue to make certain types of ui elements and build off other tutorials with compose :)

[@PhilippLackner]

That's my plan! :)

[@marcel5235]

If someone would have struggle with Card, if you use Material3, material 3 has no Card Composable, add material standart version to graddle dependencies (this may become obsolete and in future Material3 should have new composables)

[@ryhdzfghsdgshhdh4536]

Please help,, which is standart version?

[@wilsonpedrotamegajunior1053]

Thanks a lot, it is the first time I've ever had seem a precise definition why to use sp in text!!!!

[@kashifbhatti5982]

Please create a video on app optimization (low memory & battery usage)

[@PrathivAR-f7l]

Use this to align the text at the bottom of the box instead of using nested box Text(text = "Hello world", modifier = Modifier .align(Alignment.BottomCenter) )

[@tonnie7079]

Nice Trick with the Brush and the Gradient, I am really amazed by the way I always find and learn something new from your videos regardless of the level being a beginner's level. I wish I was listening to you by April 9th, 2021.

[@azamovdev]

nice bro I'm learning android now, I'm taking a course called Gita, and in this course we came to jetpack, with your guide, I got very good results, I really liked it, good luck with your work. I'm not good at English so these words may be wrong, I translated these words in google translate) good luck with your work

[@jishnuvedhikz4404]

16:08 You can also give shadow without hard coding Box( modifier = Modifier .fillMaxWidth() .height(50.dp) .background( brush = Brush.verticalGradient( listOf( Color.Transparent, Color.Black ), ), ).align(Alignment.BottomCenter) ){} Notify me, if I am wrong. I am a starter :) Just Experimenting

[@daniboy943]

Still, you are hard coding the height. You could use fillMaxHeight(0.5f) for example, so the box will always fill half of the height of its parent.

[@begalisydykov6404]

Easier to apply background for text using modifier = Modifier .align(Alignment.BottomStart) .background( Color.Black.copy(alpha = 0.4f) )

[@swaminathbera6407]

Love your Android Tutorials, makes complex things simple to understand everytime!!😊

[@Aswin-vd1pm]

What are doing?

[@SumedhSen97]

For the gradient, we could also start from the bottom and come to the top. Here's how I did ``` brush = Brush.verticalGradient( colors = listOf(Color.Black, Color.Transparent), startY = Float.POSITIVE_INFINITY, endY = 0.0f ) ``` Notice that, the colors are now opposite to what the video had, since we are going from Black at Infinity to Transparent at 0

[@brigadir5830]

Спасибо за ваш труд очень хорошие уроки всего вам хорошего👍👍👍

[@_angel_mohammadi3952]

It's fun, exciting and effective! Keep going!

[@pooyalaryan4455]

hello philipp. can you explain that how can show image from URL in JetPack image like picasso or glide . tanks for all your videos. you are the best

[@siggilotz8344]

Great video, thank you from Duisburg/Germany

[@erice.1636]

1:56 UpperCamelCase vs lowerCamelCase. I knew about camelCase before, but while studying Drupal this weekend I think I heard the difference for the first time.

[@audreyjensen666]

I think PascalCase is a popular term for it.

[@sarahmohamed2973]

very nice video with simple explanation🙂

[@bgpratheep]

It would be great If someone could point towards some references to find the parent height within the Child composable. It can be helpful to make the Gradient responsive.

[@sooshil]

Brother Hats off to your dedication, quality content, explanation style and everything. It's not been a long I started watching your videos but even in this short time, I am so much impressed by your effort of producing quality content. For now, I only have one suggestion: For our own coding we are free to use any theme... but could you please use light theme in android studio for tutorials videos?

[@PhilippLackner]

Thank you! I once made a survey on IG about the theme I should use and about 75% wanted me to use dark theme sorry

[@sooshil]

@@PhilippLackner Hey... no need to be sorry. That just was my opinion. Great work again. 😍

[@carlosgalves7028]

Amazing trick at the end of the video, nice content, congrats, give it a like in all videos I saw at the moment.

[@daniboy943]

Amazing tutorial, thanks! But isn't xml just way faster to implement?

[@mohammad-hossein-farzanegan]

Hey Philipp. At 13:37, why did you define the "Box" there to specify that the card takes up half the width? Couldn't you define a modifier in the input of the ImageCard and pass this width of the card to the modifier in the input of this function?

[@FemiOkedey]

If you can't see the Card component, just upgrade the dependencies and compose version in the Gradle files

[@prasannakumaranisetti2350]

this has helped me. thank you.

[@incchi6194]

@@prasannakumaranisetti2350 how you did that i'm having trouble to do so

[@ryhdzfghsdgshhdh4536]

Please help, i don`t understand how to do it

[@tsaykostya]

More of compose bro, or recommend any books for educational purpose❤

[@saurabhsharma-om1rc]

Awesome tutorial

[@Kunal-jp8tn]

Thank you so much for this amazing video.

[@Aswin-vd1pm]

If i run on an physical device the image is not showing.

[@bestoftheinternet3421]

Very similar to flutter actually

[@adrian2qi733]

muito bom seu conteudo, ta me ajudando bastante.

[@millenniumchowdhury6395]

How to use glide to load image in jetpack compose...plz guide us

[@kandie5770]

Could the gradient be not added to a separate box but added to the Box with the Text itself?

[@yunusemrearslan3696]

Kermit, it's been a while dude I missed you

[@veygard]

Ty for doing this!

[@phatho3875]

Why did you wrap the ImageCard inside the Box while we can use the modifier defined in the ImageCard?

[@alirezafaraji]

Awesome, man.

[@ChrisAthanas]

Can you use that plug in that shows what command key sequence you are using? Also when you show the emulator, can you also be sure to show the code? There is lots of space on the right side of the screen to show the emulator above your head Otherwise top notch work

[@ChrisAthanas]

Specifically at 12:25, to expand out the function with all labels exposed?

[@NiteshSingh-bv9lu]

if i have use compose component . then not requirement data binding component ?

[@bharathkalyans]

You haven't passed the modifier as functions will it take parents modifier as it's argument??

[@yutaitadori7318]

Will XML be no longer in use now?

[@lord2959]

why u don't use sdp instead of dp and sp?

[@rezak9041]

Nice video. How can we constraint top of gradient box to top of title?

[@bjugdbjk]

Little confusing, So for text and gradient or for any other property, the first thing we have to use Box as a container? could you pls clarify?

[@PhilippLackner]

you can apply a gradient to any composable. But of course you need a composable that has bounds to be able to draw a gradient

[@ChristiaanHunter]

thanks

[@hdm_vision]

my check point 13:45

[@bobandrews605]

nice tutorial, but my picture does not adapt to the entire width of the card and leaves a small margin on the right side, don't know why, any idea?

[@halahmilksheikh]

Your picture is too small isn't scaling up and you need a modifier = Modifier.fillMaxSize(), in addition to the contentScale.

[@leunamvon2565]

hmmm just a question, wouldn't be better to put the card inside a box inside the ImageCard function? so we don't mess the setContent? just saying

[@brahmadathv3593]

nice one bro

[@PhilippLackner]

Thanks 🔥

[@atulkumarrathor3592]

Hi You haven't passed the modifier as functions will it take parents modifier as it's argument?? please add it and also my text is showing on top

[@emmanuelbamidele5064]

If I am consuming an api to render the image would it be OK to use just the url in the painter

[@tommy9x]

Please present on video or talk each time you use short cut keyboard

[@mehulbisht9708]

for the upcoming pokedex app, do you plan to use some API or just parsing JSON from local directory? And it will be based off MVVM too?

[@PhilippLackner]

Yes it gets the data from an api and will use mvvm

[@truepicksyt3323]

@@PhilippLackner Is that course free or Paid?

[@PhilippLackner]

@@truepicksyt3323 free

[@kishorramani007]

How to scratch image to box's hight and width? Some images (small size images) are not set like fitxy in Android

[@IvanVasheka]

Yeah, except that most likely you won't have this image already in your drawables... ah.. tutorials... but anyway, thanks man! Nice vide!

[@gunner8226]

What is the Text import @ 9:45? Im stuck on that following along and theres no import option what am i doing wrong?

[@charleslyell3748]

you have to import this: "import androidx.compose.material3.Text"

[@user-bi9rp2nt1r]

Kermit!! Yes! :D

[@alfian3570]

cool

[@alicantipi4235]

Why are we passing the modifier to composable, can we not declare a new one?

[@PhilippLackner]

gives you more flexibility. Maybe you want the same card to look a little bit differently on two different places. Passing a modifier allows you to do that

[@bismeetsingh352]

Can anyone explain all those scopes in curly braces. I am familiar with also, ,apply,let stuff but this stuff seems weird to me.

[@halahmilksheikh]

It's syntactic sugar. It's called a trailing lambda syntax in Jetpack Compose and a similar thing exists for SwiftUI (trailing closure syntax). Basically it's actually part of the parameters but to make it look neater, they have it this way. It makes it look very confusing if you aren't familiar with the idea.

[@emmanuelbamidele5064]

In my opinion syntactic sugars make code learning difficult for beginners....though people claim it makes code neater but I dnt think it is needed

[@arielllanita7174]

🔥🔥🔥🔥🔥

[@Macias096]

how to make two images next to each other?

[@avneeshkumar3470]

Hey, I am getting a lot of unknown errors in this image composable code and I am not able to solve them on my own. Can anyone help me with this?? If yes, then please tell me how should i connect with you??

[@ionlytakeaction3773]

is it OK to start making commercial ready apps in compose or should i wait for an official stable release?

[@ojukwuezechukwu9712]

Wait for a stable release

[@ChrisAthanas]

API is now stable, code will not break We are preparing to use in production for our app by the end of the year

[@joereeve2569]

11:14 - How come the text doesn't let you align it? It seems like extra work to have to surround it with a box

[@x0z59]

Please mind to enlarge your screen next time buddy.

[@Luffy_2804]

it's old tut you dummy , before commenting these type of shits please check when it was uploaded

[@danilkleshchin6876]

Thank you for the video. Are you going to make videos about Flutter development? This is becoming more and more popular. IMO cross-platform development will almost completely replace native.

[@PhilippLackner]

No, I won't do flutter

[@abdremo]

@@PhilippLackner hahahaha

[@dmytromarchuk3023]

quite easy one, I expected to see the way of loading image from the api

[@anmolchopra6282]

getting error on line 26, val painter = painterResource(id = R.drawable.kermit) on .kermit

[@bidbid5413]

Do you have a picture named kermit in your drawable folder?