hello and welcome to another java and android studio tutorial my name is cal and in this
tutorial we're going to be looking at radio groups and radio buttons we're just going to implement a
fairly basic radio group with four different radio buttons each being a different genre of music
and we're just going to take the value of the radio button that's selected and put it into a
text view so pretty basic also in this video we're going to do a whole bunch of customisation and
make the radio group look and feel the way that we want so we're going to dabble into some styles
as well as changing the colors and the whole look and feel of just your standard radio group
and make it look and feel the way that we like i've just chosen these colors and the borders
and all that sort of thing but it's really just an example of how you can customise the radio
group to look and feel exactly how you want you don't just have to stick with the generic android
implementation so yeah with all that said there is a link in the description to the source code and
let's get started creating a new android studio project empty activity giving it a name of custom
radio group tutorial java is our programming language the first thing we'll do is head into our
main xml and just make the text a little bigger and the color black and then remove that top
constraint and give it a little bit of margin to the top 10dp giving our textview an id so just
calling it textview below our text view we're going to create a radio group i'm just going to
give it a width of 250dp and a height of wrap content and then i'm going to copy down the to
the left of and to the right of parent constraint as well giving our radio group top to bottom of
our textview as well just giving our radio group margin top 10 dp and then inside our radio group
i'm going to create a radio button for this example we're going to use music genres so i'm
just giving the first one an id and then i'm going to create a new resource file i'm going to call it
styles.xml and then i'm going to right click on our styles.xml and say split vertically just so
we can have that on the screen at the same time as our main activity so inside our styles.xml i'm
going to define a new style i'm going to call it radio button style this style we're going to apply
to all of our radio buttons and it's just going to store all of the common attributes so
we're going to start with with each radio button is going to have the same width so it's just
easier to put it in here and that way if you need to change it in the future it's all in one place
you don't have to go through and change each value individually and then inside our radio button i'm
going to call our style so i'm just going to say style is equal to style and radio button style and
i'm just going to give our radio button a little bit of text so that we can see what's going on i'm
going to give our styles text color to be black as well as a text size to be 30 sp next we're going
to remove the default radio button the android button is null you can see it removed the little
button there we're going to give our style the gravity of center as well as an on click and i'm
just going to call it radio tap and then just to create that method i'm just going to head into our
radio button and create that radio tapped method and then just remove it again this seems like
the easiest way to do it and then i'm just going to copy down that radio button three more times
and change the text and the ids in this radio group example we're going to have a radio button
for metal music a radio button for classical music and a radio button for pop music as well as
a radio button for jazz music and while we're changing text values we can probably change our
hello world to something a bit more informative so i'm just going to say favourite genre next i'm
just going to extract each of those strings to a string resource create some background styles for
our radio group a new drawable resource file i'm going to call this radio group background and then
right click on our drawable folder once more and calling this one radio on and then third time as
well calling this one radio off and then we're going to click on our radio group background
and just change it to shape and then our shape is going to be a rectangle then we're going to add in
a solid color and i'm going to create a new color for this i'm going to call it light grey and it is
going to be e6 e6 e6 giving our solid that color of light grey our stroke is going to have a width
of 2dp as well as a color of black and the corners we're going to give it a radius of 5 dp to make
things nice and easy we're just going to copy what we've done here and put it into our radio on.xml
except we're going to change the color to be white and we're going to do the same thing so paste that
again into radio off we're actually going to get rid of everything except for the shape nice so
heading back into our main xml we're just going to call android background and give our background
of our radio group radio group background and then from each of our radio buttons we're going to give
it a background of drawable radio off except for one we're going to give it radio on and looking
at our design view on the right there we can see that our custom radio group layout is all looking
good nice so next we can start on our java class i'm just going to create a text view naming it
textview next we're going to declare four radio buttons classical pop and jazz next we're going
to declare a simple method called init widgets and we're just going to find each of our widgets
so our text view and our radio buttons we're going to find each of them by the appropriate
id so i'm just calling textview and finding the view by textview and then metal and metal
and so on and so forth cool and then right down the bottom i'm going to create another method
i'm going to call this update radio group and it's going to take a radio button i'm going to
call this selected and then we're just going to say metal dot set background to context compact
dot get drawable and then i'm going to give it the application context as well as our id of our radio
off and then i'm going to copy and paste that down for all four of our radio buttons so we're
just going to set the to look off for every single one of our radio buttons and then below this we're
going to say selected background and set it to on so turn all four of our radio buttons off and then
turn the one that was selected turn it back on to look selected string selected string is equal to
get string find our favourite genre and new line as well as selected . get text set our textview
to our selected string and in our on create i'm just going to call this update radio group method
and pass it in metal but you can choose any of the radio buttons you like in our radio tab i'm just
going to say int id is equal to view dot get id if selected id is equal to r.id dot metal as in
this method is being called from our metal radio button we're going to update our radio group and
passing it in our radio button which is metal and then we're going to copy and paste that down
and just say else if and give it classical and pass our update radio group with classical we're
going to do the exact same thing but for pop and jazz if we build and run this now
you should be able to see that we've got a pretty sweet looking custom radio group i'm
just going to center that text alignment but yeah there you have it that was a custom radio
group tutorial in android studio using java and i'll catch you guys in the next tutorial