Selection UI Components (Checkboxes, Switches, Radio Buttons) - UX With Material3

guys and welcome back to a new video and a new material 3 video in this video I will talk about selection UI components of material 3. specifically what that means on the one hand we will cover checkboxes so these things here or also these Tri-State checkboxes which you can use to toggle all off or on then we will talk about switches which have the same concept as check boxes so you can either toggle them on or off and we will talk about radio buttons and in which scenario you should now use what kind of selection UI component so again as these other videos in this playlist this will be heavily focused on ux but if you're a beginner and just don't know how to implement these in your code this video will also help you out and I want to start with checkboxes when should you use these check boxes here use them if your user can pick one or multiple related options and here it's very important that they are related so in this case all these are file types they are about the same thing and as you can also see you can optionally add such an parent category kind of where you can use this Tri-State checkbox to toggle them all on or off as I've shown you so get into coding and see how it can Implement that because that will be a little bit of code I want to put that in a separate composable here in a blank material 3 JP composed product so just a new component of function and I will call this check boxes and by default this checkbox composable we get from Material 3 which we have to use this is really just the Box because that does not contain any option to enter some text next to that so this text is not included in this checkbox composable it's really only this box that can be checked or unchecked because of that each checkbox in the and consists of two pieces of State on the one hand the check state so if it's checked or not and the text that we actually want to display and that is why I like to create a data class here for a toggleable info so just an info for a toggle wi component on the one hand whether it's checked or not and then the text we want to display for that because then we can just create a bunch of these info classes and then Loop over them to create our checkboxes I want to do that in here and our checkbox is composable we want to create our check boxes list here and that is equal to remember and I want to use a mutable State list of here so just a mutable list which consists of compose States and here we can then create our sample items so actually not a list of because we already have that list off so we can directly create our toggleable infos in here let's say they are all unchecked by default and the text will be photos here we can then copy this section paste it two more times this would be videos and this would be audio and we can then take this checkbox estate and loop over all these check boxes so check boxes dot for each let's actually do for each indexed so we also get reference to the index of the loop and then we get our info here and in here we need a row because Alice said a checkbox by default does not come with a text but we want to display the check box next to the text so we use a row here it's important to use vertical alignment center vertically otherwise the text will be misaligned alignment Dot Center vertically and in here in this row we on the one hand have our checkbox on the left so this is how we use this super simple we just have to pass our Boolean whether it's checked or not which is just whether this current info element We're looping over is checked or not so we can just say info dot is checked and when the user now clicks on this checkbox to toggle the state and then this uncheck change Lambda is called it gives us the new is checked state so it was unchecked before then this Boolean would now be true and vice versa if that happens what do we want to do we want to find the checkbox the user clicked on in our list which we can do with the text for example and then just update the is checked state for that so we want to say our checkboxes list at the index of our index is equal to our info dot copy and we change the is check state to the newest checked State and then after that we just put in some text that says info dot text and if we now scroll up to our root composable in here we can put in a column modifier is modifier dot filmex size and we just want to add some padding that's it and here we can call our checkboxes composable and if we then launch this very first example take a look here then you can see here are our few checkboxes and we can then toggle these on or off that obviously doesn't look like in my first sample because we don't have this Tri-State checkbox yet so Tri-State checkbox is as the name says a checkbox that has three different states so not only checked and unchecked but also kind of an idle or initial state so if we take a look at that again then you can see this is the Tri-State checkbox and typically this initial state which is just a little line or Dash that just indicates hey you can use this checkbox here to toggle them all on or off but you don't have to so you can also individually Mark specific check boxes as checked or not but if you want to toggle them all on or off you can use this Tri-State checkbox and as soon as you use it then you can't get it back to this um third state which is rather just the initial state so now you can only check it and uncheck it or you can still change the checkbox in the visually so it makes sense to use that if you really have such a parent category for multiple check boxes and if you don't wonder how you can implement this Tri-State checkbox let's dive into our code in our checkboxes composable and want to do this above this for each indexed Loop here we want to first of all specify our try state so we have our Tri-State which is by remember this actually needs to be a VAR by remember and in here we have a mutable State off and this Tri-State is as a class just a toggleable state and we can say toggleablestate dot indeterminate so this is the state when it's neither checked or unchecked and then it also has this on or off which would be checked and unchecked so we want to use this indeterminate by default we can't or we can import this here so I'll enter to import this and there we go and then below this we can have our one Tri-State checkbox the state is just our Tri-State and when we click this checkbox so this has an on click function rather than something like uncheck changed because we now need to implement the logic for this on our own because there is no default Logic for this Tri-State checkboxes so for toggling this we can create a little Lambda function here toggle Tri-State here we first of all just want to update our Tri-State which is dependent on the current price date so if the current state is indeterminate so the the initial State and we click this box and then we want to change it to on this is now our custom logic you could also start with off um but I will start with on here if it is on we want to change it to off and else so if it's off we want to change it to on and what we also need to do in this Lambda is if we change this Tri-State we need to update all of our checkboxes here inside of this row or this um this photo Brother since if we use our Tri-State checkbox then all are actually toggled on or off so we need to Loop over these check boxes here again so check boxes dot for each and actually I want to use checkboxes that indices for each so we just Loop over the indices we get the index and then we say check boxes add this index is now equal to check boxes and the index dot copy so we just change the is check state to Tri-State equal to on what is a toggleable state DOT on so that means if our Tri-State is now on after we've updated it we will change all check boxes since we Loop of all of these to um checked and if it's off then we change it to unchecked so if we now take this Lambda put it in here to toggle Tri-State we also maybe use such a row here since we want to display some text next to that um Tri-State checkbox and then copy that like this yes now it works we put in our Tri-State checkbox and then some text next to that which could be file types so that just summarizes um what you can now check with this checkbox if we Now launch this then you probably guess how that will look like right here so we have our Tri-State checkbox which has this indeterminate state by default you can still toggle these individually but if we use this then we can toggle them all on or toggle them all off but something very important here in regards to user experience which I hate when apps don't follow that is that these checkboxes should also be toggleable when you click on the text of it and that currently doesn't happen so if I click on the text then it doesn't toggle it only toggles if I click on the box specifically but especially for mobile apps which usually are limited in size and the the UI is limited to a small screen size your tab is not as precise as with a mouse on a computer so definitely make the whole area here um tappable and toggle the checkbox if the user Taps on it how can we achieve that well we need to also apply a modifier to this outer row so this row is now the outer container for both our checkbox and the text that is also why I've made this a Lambda to toggle the Tri-State because now we can easily say modifier is modifier dot clickable and in here we call our um toggle Tri-State and the same for our row down here we want to use mod of oops modifier is uh equal to vertically Center what am I missing oh I only have vertically here um modifier is a modifier dot clickable and in here we just want to execute the same line of code as when we change the check state for a checkbox here we don't have access to the newest check state but since we just want to toggle it we can set this to info is checked um negated and every now go back in the amp you will see how this looks like now we can also press here on this text and we can toggle the checkbox like that it looks a little bit ugly because the um ripple effect does not have the same spacing on the on the right as it has on the left we can easily fix this by adding this spacing here after this modifier so we say padding and is 16 DP Alt Enter to import DP and we do the same for our Tri-State checkbox for the row actually so we say padding um and it's 16 DP and for this row down here what we also want to make sure is that we might also want to change the start padding to something like um 32dp since then we will get this little indentation as I've shown you so if we now take a look then it looks like this and we cannot toggle these still looks a little bit a little bit ugly because um the ripple effect goes completely to the left you can remove this by not applying the start padding gear at the end but rather have it before the clickable modifier because the modifier Works sequentially and that way the padding will be applied before the ripple effect here we can say start is 32gp and then it will finally look like we want take a look here now we can only unpress it like here and the space is exactly the same on the right as it is on the left and the same for this one here so that is how we use checkboxes and that was already the most complex type of the selection your UI components um so don't worry the switches and radio buttons will become a little bit simpler and we can Implement them with less code so getting back to my example switches are these kinds of things and I'm pretty sure you know this if you have an Android device in the end for functionality wise they absolutely don't differ from checkboxes because they have an onstate and they have an off State the same as check boxes however while checkboxes are used for different options that are related so all these options are to um to to choose some file types one or multiple file types such switches are used for options that are independent so very commonly they are used to change some settings let's imagine you have a setting screen each single setting is independent of the other settings so in these cases you should rather use a switch and also something very important is that toggling a switch should have a directly noticeable effect so for example with a sample switch to toggle dark mode when a toggle is on I expect that the device really switches dark mode as soon as I toggle this so the user should not need to press some kind of confirm button before the doing that well if you have checkboxes that's rather something the user would expect that you choose some files and then you hit save and you expect that the files um with the following file types are actually safe but with switches the user should see an effect as soon as the user changes the switch so let's dive into our code here and at the very bottom I'm going to create a new composable called my switch and the same as our checkboxes we need our targetable info because we want to display some text with the switch so we can say we have a state of our switch but remember and this is a mutable state of toggleable info is checked as initially false for example and the text is in this case the dark mode we then scroll down and to implement our switch as you can see here in this case I recommend to have the tags left of the switch and then put the switch at the very right of the screen that's typically how the settings screens work well with check boxes it's much more common to have the text right of the checkbox so here we will as well just have a normal row the vertical alignment will be Center vertically and in here we will then start with our text so the text would be just a switch dot text and then we want to have our switch so that is just the normal switch composable checked is our switch that is checked and when that changes that's exactly the same as for checkboxes then we get the new is checked state and we can say okay our switch is now equal to switch.copy and is checked this is checked right now this will be very cramped because we have our text and right next to that our switch so it would actually um the switch would actually be right next to the taxi would look very ugly I want to push this completely to the right of our screen so we will just add a spacer here with um the remaining width and we can do this very easily by using a spacer and with actually not a width but a weight of one F that will make sure that the spacer will use the remaining space and push the switch to the right if we then go ahead and scroll up um right here we can add some spacing below our check boxes with a height of 32 DP and then we can add our my switch if we then take a look at our code on our app actually we should be able to see exactly that yes um we should apply some padding here of of course but you can see here's our text here's our switch and we can then toggle it on or off so let's quickly apply some padding to our column oh actually has specified padding but didn't apply it let's pass 6 in DP and then we should also see an effect if we relaunch this yes there we go that looks much better something you might have noticed in my prepared sample app is that the switch has an icon that is something we can now do with material 3 switches which wasn't possible with material 2 switches so you can't pick an icon for the so-called thumbnail so this little um Bubble here and this can of course also change depending on the switch State I will personally only use such an icon if it's very clear to the user what this means so for check mark it's obviously clear that this means okay dark mode is enabled and if there is an X then it means it's disabled but if this would now be a sun maybe um to indicate it's in light mode then this would not always be very clear because um yes there is a direct opposite of the sun which is the moon but there is much more thought involved to to make the user think about what happens if I click the Switch so I would really try to stick to very simple icons in this case we can add these icons by going to our switching code right here and change that to um we want to change the thumb content and it shouldn't be a normal icon composable the image Vector is now dependent on if the switch is enabled or not content description can be null and this image Vector is dependent on if our switch is checked we can say we use icons default check and if it's not checked oops my keyboard is a little bit lagging if it's not checked then we want to say icons default clubs which is the X icon if we then relaunch this take a look you can see now we have this x if we toggle it on it gets switched with the check mark and last but not least we have so-called radio buttons which are these and I'm pretty sure you've used these somewhere and not necessarily in Android apps but also on websites they are commonly used and radio buttons are not used if the user has to pick one option in exactly one option so while this checkbox option here could for example mean which types of files do you want to regularly synchronize or so and obviously you could theoretically synchronize them all or only two of them or only one of them or none of them that is a use case for checkboxes down here this could be a Chooser for the user to decide where to save a specific file so they can only choose one place where this file gets saved and they have to pick one place because they can't just say I don't want to save this file at all that would be just a cancel option but if they save it then they have to save it somewhere so there has to be a default option pick for radio buttons and then when the user you know selects another one then the previously one gets the unselected and in code we can pretty much just take our checkbox composable because the radio button one is um much more simple but similar I'm going to copy this oops and then paste it in here want to take a look what we need first of all rename this to radio buttons I'll also rename this checkboxes state to radio buttons radio buttons and I'll leave the options the same now we need to make sure that one option of this is initially checked that is a rule of radio buttons so let's say we check photos initially we don't have a Tri-State radio button so we can remove this this as well so we just have our radio buttons we also don't have this start indentation so we can remove this padding if we click this um it's the same rule as four check boxes everything should be clickable so the whole container in this case so if we click on the radio button what we want to do is want to say radio buttons that replace all since we now need to Loop over these radio buttons and set them all to unchecked except for the one we clicked on so in here we get each radio button info we can say we create a copy of that and we update these is check state with it the text being equal to info that text so we just find the radio button um where the text is equal to the text we clicked on and if that was the button then we change is check to true and in all other cases of all other buttons we change it to false and we can then copy this because we need to do the same for our actual radio button we of course need to change this here to a radio button for radio button it's called selected for some reason so let's choose that um uncheck change is called on click and here we also don't get the info whether it's checked or not because if we click a radio button we know it must be checked because we can uncheck a radio button and then here we do the same if we now go up and actually add these radio buttons here as well we can copy the spacer paste it here and then have our radio buttons launch the app that we should hopefully see something similar to this the different color scheme yes we have radio buttons our photos one is initially selected and then we can select other ones here by clicking on them and then the previously selected one always gets unselected so as a little recap choose checkboxes if you have something in multiple choice style so the user can choose zero to multiple different options of a related set so all these need to belong together and you can use an optional Tri-State to toggle them all on or off use switches if you want to toggle on or off one independent option that is typically used for settings and it's important that the user should directly notice an effect after toggling it on or off such as changing dark mode and last but not least we talked about radio buttons where only one option can and has to be selected so this could also be something like male or female so I think the idea gets clear if you not want to learn more about jetpack compose then I got a free PDF for you in which you will learn about the 20 big mistakes you can do with jetpack compose so I really go through 20 mistakes in very detail every single mistake gets its own PDF page and you get code Snippets code Solutions how we can fix the mistake so you can make sure that your Japan compose outperformed well if that sounds good to you then you can get it for free by clicking the link below and other than that thanks for watching I wish you an amazing rest of your week see you back in the next video bye bye foreign [Music]

Channel: Philipp Lackner

Views: 11,004

Keywords:

Id: NYWTQZODr74

Length: 24min 2sec (1442 seconds)

Published: Mon Jul 31 2023