Bottom Sheet Dialog Android Studio Kotlin Example Tutorial - ViewModel

hello and welcome to this android studio and kotlin tutorial i'm cal and today we're going to be creating a bottom sheet dialogue or a bottom sheet modal so to create a bottom sheet model we basically have a main activity as well as a fragment that pops up so the fragment is the bottom sheet and what we're going to do is take some input from the user in our bottom sheet fragment and pass that to our main activity we're going to do this using viewmodel so this is going to be part one of our longer series i do where we build an entire to-do list app and if you're interested in continuing on with this to-do list i'll leave a link in the description [Music] cool so creating a new android studio project select empty activity i'm going to call the project to-do list tutorial hit finish and first thing we're going to do is head into the build gradle and enable viewbinding so just typing build features and view binding is true and then we just want to hit sync on our build gradle we can close that off now and head into our main activity xml we're going to change this parent linear layout to a relative layout and inside here we're going to insert a linear layout which has width and height of match parent the orientation is vertical and we just want to wrap our text view in that linear layout that we just created we can remove the constraint layout constraints and we're going to change the text to task name so this is just going to be the placeholder for the task on our activity we're going to give it a style of title as well as some margin of 20dp and layout gravity of center we can copy paste that down we just want a task description as well and we're going to give both of our textviews an id so task name and task description and then below our linear layout we're going to create an extended floating action button which is a bit of a mouthful but it's a material design floating button it's going to have a width and height of wrap content text is new task the id is our new task button our background color is going to be our color primary text color is our color on primary we're going to say align parent to the bottom is true as well as the line parent to the end true so putting it in the bottom right hand corner padding 5dp margin 20dp and if we head into our res folder we're going to create an icon for our button so i'm just going to right click and say new vector asset and then selecting on the clipart i'm going to search for this add or this plus icon and just hit finish i'm happy with the name and now if we say icon we can select our ic baseline add24 that we just created and then we can change the color of that so just making the tint our color on primary as well nice so what we want to work on next is our bottom sheet fragment so i'm just going to say new fragment blank i'm going to call the fragment our new task sheet and i'm going to head into the xml for this file i'm going to remove the to do change the parent layout to a linear layout orientation is vertical our text view we're going to make height wrap content and the text we're going to say new task the text size is going to be 30 sp and the style is going to be our title style as well i'm going to give it margin top 20 dp margin start 20dp also and below that textview we're going to insert a material design text input layout with a width of match parent and a height of wrap content vertical margin is 10dp and the horizontal margin is going to be 20 dp and then inside our text input layout we're going to insert a text input edit text with a width and height of match parent id is going to be name the hint we're going to give name as well and we're going to give our text input layout a style we're just going to call this outline box dense cool so we can copy that and paste down the entire text input layout now because we just want to have another field for description i'm just going to change the id and the hint and if we head up to our parent linear layout we just want to make the height equal to wrap content and i think i made a mistake when i copy and pasted and i just need to fix up the extra closing brackets so the final thing left to add to our bottom sheet is a save button i'm just going to type material button it's going to have a width of match parent and a height of wrap content layout gravity is center and the layout margin horizontal is going to be 20dp the text we're going to give it save and just giving it an id so save button and our description here probably is better to type the full word description cool so we can close off all of our layouts now we're going to head into our main activity column file we're going to declare our private latent variable binding which is of type activity main binding below our oncreate we can say binding is equal to activity main binding inflate and just passing that through layout inflator and we can set our content view with our binding root next we're actually going to do our sort of very basic modeling we're going to say new kotlin class file we're going to call it task view model and our task view model is going to extend view model we're going to give it a variable called name which is mutable live data of type string and we can paste that down because we're going to have a description as well and now if we head back into our main activity kotlin we can do another private latent variable this one's called task view model task view model we can initialize to task view model provider the provider is going to be this activity so the activity is going to own the task view model and then we're going to say get task view model class so the class we just created and now we can say binding new task button set on click listener so when we click on the new task button we want to open up our new tasks sheet so before we do that we're going to head into our new task sheet fragment and we need to change it from fragment to bottom sheet dialogue fragment and now we can call our new task sheet and show so show the fragment and this requires two variables one being a fragment manager so we're just going to say support fragment manager and the other one being a tag the tag i think you can just put whatever you like in here and i'm just calling this new task tag only in our main activity we just want to update our text view anytime a change is made to the task view model so we're going to say task view model name and then observe the owner is this so this activity our binding task name text is equal to string format i'm just going to say task name and then pass it through it so itself so whenever the task view model name changes we're going to change the name of our text view in our main activity and we're just going to copy paste that down and do the exact same thing for the description cool so we can head into our bottom sheet fragment class so our new task sheet kotlin and i'm just going to declare a binding here as well so this one's of our fragment new task sheet binding we're going to declare a later knit task view model as well in our oncreate view we're going to initialize our binding when we call inflate on a fragment binding we need to pass it through inflator as well as container and whether or not we want to attach it to the parent i'm just going to say false and then we're going to return our binding root in our one create we're going to initialize our task view model so the view model provider the owner is our activity so the activity that this fragment is attached to which is our main activity and then we're going to get our task viewmodel class off of our binding save button we're going to set an on click listener and we're going to create a function called save action so inside our save action we're going to assign our task view model name equal to the value of our edit text from our modal so i'm going to say task view model name value is equal to the binding name text to string we're going to do the same thing for our description and then we just want to set our name text view back to empty as well as our description text view we're going to set that back to empty as well and then finally we're just going to call dismiss which should dismiss our bottom sheet fragment if we give this a test it's create new task and it seems like it's given me an error so i'm just going to head into the log select error and it looks like it's broken here on this line on create and i think i've used the wrong override function i want on view created so i'm just going to copy paste out all my code there and stick that back in and if we build and run this again you can see that when we click on a new task item i'm going to create a new task called drink water and then we save that that's populated the text on our main activity so we're passing data from our fragment bottom sheet to our text view that's how you create a bottom sheet modal or bottom sheet dialogue in android studio using kotlin if you enjoyed the tutorial consider giving it a like this is going to be part one of a larger project where we build an entire to-do list app a link to the next video will be appearing on your screen or there'll be a link in the description below thanks for watching and i'll see you in the next one cheers [Music] you

Channel: Code With Cal

Views: 18,957

Keywords: android, studio, kotlin, app, view binding, binding, example, tutorial, beginner, adapter, view, holder, UI, UX, apps, development, dev, programming, code with cal, coding, program, code, developer, how, to, basic, simple, education, build, create, easy, follow, friendly, make, learn, kotlen, start, material, design, edit, text, edittext, TextInputEditText, TextInputLayout, user info, validate edittext, MaterialDesign, modern, Android, ViewModel, model, TaskViewModel, MutableLiveData, BottomSheetDialogFragment, bottom, sheet, modal, dialog

Id: RzjCMa4GBD4

Length: 8min 46sec (526 seconds)

Published: Tue Aug 09 2022