How to Create a Bottom Sheet With Jetpack Compose

How to Create a Bottom Sheet With Jetpack Compose - Android Studio Tutorial

Рет қаралды 40,082

2 жыл бұрын

Bottom sheets are UI sheets that the user can drag up and down to show or reveal UI components. Very useful!
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/premium-courses...
Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!
pl-coding.com/newsletter
Join this channel to get access to perks:
/ @philipplackner
Get the source code for this video here:
github.com/philipplackner/Bot...
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/philipplackner
You like my free content? Here you can buy me a coffee:
www.buymeacoffee.com/philippl...

Пікірлер: 56

@immortal_lnight 2 жыл бұрын

This is exactly what I was missing in the compose! Now I can create all my applications with it.

@jellybeast4408 2 жыл бұрын

i am always hyped when you publish a new video, thank you very much for the free content 💙💙💙💙

@chuka_obi5167 2 жыл бұрын

Yes yes yes!!!! Thank you so much for this Philipp!

@amiakari7700 4 ай бұрын

Philipp, thank you so much! It was really helpful!

@jaygitonga2026 Жыл бұрын

For those probably working with material 3 api , rememberBottomSheetState() was replaced wuth rememberStandardBottomSheetState() . To set the initialValue field , use SheetState.Hidden. I hope this helps!

@humbleson8886 Жыл бұрын

Can you go from bottom sheet to full screen?

@713nandinigupta7 7 ай бұрын

Can you elaborate liittle more

@xCrawfly 2 ай бұрын

@@713nandinigupta7 That would be: val sheetState = rememberStandardBottomSheetState( initialValue = SheetValue.Hidden )

@billal2731 2 жыл бұрын

That's exactly what i need for the project i'm currently working on

@AntonioGonzalezsanchez Жыл бұрын

Thanks for doing these videos man.

@sergeytarasov5041 2 жыл бұрын

great explaining!

@anudeepananth 2 жыл бұрын

One big drawback with jetpack compose bottom sheets seem to be that the scrim color does not apply to the status bar, the alert dialogues apparently do this out of the box but not with bottom sheets

@mikec4220 2 жыл бұрын

What about ModalBottomSheetLayout Philipp? I find that a bit better as it darkens the rest of the screen on it's own and also we only need to keep track on for sheetState (no scaffoldState needed). Great video by the way :)

@miladhashemzadeh5626 2 жыл бұрын

Gr8 like always

@John-qt6qk 2 жыл бұрын

Awesome thanks

@raymondmichael4987 2 жыл бұрын

How to add an overlay or shadow to the rest of the screen when the sheet is open

@sovrinfo 2 жыл бұрын

Thanks

@amponsahhubert4884 Жыл бұрын

I like the motion graphics in your videos. Do you do them yourself?

@martinrasmussen8526 2 жыл бұрын

Great video, thanks Philipp! How would you show this from a child composable? So if I have my app positioned in a scaffold with a bottom bar. How can I use the bottom sheet from within that scaffold content, and to be on top of the bottom bar?

@tonnie7079 2 жыл бұрын

Too bad we don't yet have android BottomSheetScaffold on Material 3.

@michaeladeneye9231 Жыл бұрын

Hello, pls can you do a video for implementing collapsing app bar with tablayout and bottomsheet in the same screen?

@pradeepkumarreddykondreddy7048 Жыл бұрын

How to open the Jetpack compose bottomsheet from my existing android activity ?

@mahetachirag8395 2 жыл бұрын

What a coincidence, I just searched in afternoon

@GilTheCohen 2 жыл бұрын

Did you ever manage to trigger showing the bottomSheet programmatically? I don't want to trigger it by a UI event

@kaletsugas 3 ай бұрын

Is it possible to have a dynamic views that recomposes itself in the bottomsheet contents?

@douglasmaueski 2 жыл бұрын

hello philip I'm from Brazil... and I really like your videos on jetpack composition. Congratulations. One question: with jetpack compose I don't need OOP (object oriented) anymore?

@tonnie7079 2 жыл бұрын

You still need OOP because Android Framework relies on Inheritance principles for example interfaces, super classes etc.

@syscreeper4376 2 жыл бұрын

how i add dependancy , plugins , classpaths in android project , after new gradle update plz make video

@aarushkumar4980 Жыл бұрын

hey can we half the bottom sheet width in jetpack compose please reply

@suboshk777 3 ай бұрын

I cant able to make fullscreen or based on pecertage of screen to occupy using scaffold ,kindly clarify on it

@aniketkanitkar4041 2 жыл бұрын

Good video I have a query How I can populate data to bottomsheet on an item click of LazyColumn Please help I tried in many ways but dint got success

@fensom80 2 жыл бұрын

Please do a video about jetpack compose and graphql.

@VIjayaKumar-dg1rx 3 ай бұрын

Hi All, I am facing problem while implementing BottomSheetScafold. The width of BottomSheet content is not working in bigger displays like tablets etc. The width of bottom sheet is not occupying fillMaxWidth of the screen, instead it's filling max width to 640dp. Please help me in resolving above issue.

@ElCreativeZ 2 жыл бұрын

Hey Philipp, could you make a guide on how to use Koin with jetpack compose navigation + savedstatehandle (small master-detail app) and get arguments on 2nd screen (details) from viewmodel? That thing is driving me crazy I can't find a workaround, the argument is always null but it injects properly, and it seems to happen to other people as well

@bboydarknesz 2 жыл бұрын

if you use hiltviewmodel, you can catch the bundle savedstatehandle in VM by adding SavedStateHandle in @Inject constructor() then to catch the value just savedStateHandle["key"]. anyway this is my simple implementation, may have wrong datatype. And Phillip already made the video about that. kzfaq.info/get/bejne/as2FmNx_0K2pY5s.html

@bboydarknesz 2 жыл бұрын

I usually use ModalBottomSheetLayout and the way implementation almost same like BottomSheetScaffold, just have different layout. ModalBottomSheetLayout is top rounded, default not peek and have an indication line at top. Maybe could you tell me what's the real different (when to use) ? Is BottomSheetScaffold can make its background content become black opacity when it is expand too? (overlay or shadow to the rest of the screen when the sheet is open) Anyway thanks for the tips

@deviantstudio 2 жыл бұрын

it's in the name. the modal bottom sheet is modal

@kingmarwat Жыл бұрын

There is no bottom sheet in latest versions. My bom version is 2023.04.01

@harryg6843 Жыл бұрын

Same here.

@ozantas 2 жыл бұрын

oh sheet

@h.r.60 2 жыл бұрын

Dr. Phil! A couple friends of mine want you to make apps for them. Can they email you?

@MaisUmSomente 2 жыл бұрын

I do not like scafold, it couses leaks when you use accessibility, I don't know if google already fixed it. So for me it's still a shit not a sheet,

@bringoff 2 жыл бұрын

I want to migrate to compose granularly and create bottomsheet with ComposeView inside xml. But its expanding animation triggered inside composable is laggy because of ComposeView wrap_content in ConstraintLayout. Any ideas how to make it smooth?

@TomBerghuis 2 жыл бұрын

why don't you set the width and height to match_parent for composeview

@bringoff 2 жыл бұрын

@@TomBerghuis because I need to know the top coordinate of bottomsheet to position other views in xml above it. Width matches parent already

@TomBerghuis 2 жыл бұрын

if you can calculate the height of the bottom sheet you can position the other views programatically

@bringoff 2 жыл бұрын

@@TomBerghuis sure, but passing composable height back to views will be pretty cumbersome, I hoped I can omit this and invent something simpler and more elegant 🙂

@user-sb5ud7ek9c Жыл бұрын

@@bringoff ParentDataModifier might solve your use-case kzfaq.info/get/bejne/rsmWeLSAldHDl4k.html