Home   Courses   Blog   About

Registration continues (simplest way to setup spinner and radio button)

This is part two of registration form blog about making a registration form. We will show how to collect gender with RadioButtons and State with Spinner.

You can start this in new activity or project or just continue with previous blog part. I will start from beginning with creating a new project.

1. First we will create a new project and add empty activity.
   ○ Check our blog on how to start a new project

2. We will just go ahead and use ConstraintLayout for this sample, check for all the constraints after you are finished, picture of our layout will be below after last step.

3. Add TextView for title "Gender"
   ○ Set text to "Gender"
   ○ This one should have 3 constraints one to the top of the screen, second to left border and third to right border

4. Add RadioGroup (you can find it in Containers)
   ○ Name it “gender” (id=...)
   ○ Set orientation to “horizontal” (you will have to switch to All attributes to find it)
   ○ This one should have 3 constraints one to the bottom of first TextView, second to left border and third to right border

   ○ Add first RadioButton inside this group (it will be precise job to put it inside)
      ■ Name it “female” (id=...)
      ■ Set text to “Female”

   ○ Add second RadioButton for male gender
      ■ Name it “male” (id=...)
      ■ Set text to “Male”

   ○ In component tree you should get something like this


5. Add another TextView Set text to “state”
   ○ This one should have 3 constraints one to the bottom of RadioGroup, second to left border and third to right border

6. Add a Spinner
   ○ Name it “state”
   ○ Set entries to “@array/states” (this is a list we will add to strings.xml later)
   ○ This one should have 3 constraints one to the bottom of TextView (state), second to left border and third to right border

7. Add last TextView
   ○ Name this one to “status”
   ○ Set text to “(status)”
   ○ Set marginTop to 32 (this way it will be a little bit lower than other controls)


8. Add array of states. You will do this in strings.xml 


   ○ Start with string-array (after app name, check the whole xml code on the end of this step)

   ○ Inside you will put items for states, this is one item for state Slovenia

item (Slovenia)

   ○ My complete xml now looks like this

strings.xml (final)

9. Run your app and it should look something like this

First run

10. We have prepared status TextView and we will use it to show what our user has selected. For Female user we will get text “Lady from Germany”. For that we need a little bit of code.

11. Add variables for controls we have added in LayoutEditor


12. Initialize all the values by finding controls on our Activity, do this inside onCreate method

find all the controls

13. Next we will add code, that will listen for every change of state in spinner. For each change we will call method that we will implement in the end (for now it will stay red)

   ○ Beware to set right listener (don’t select onItemClickListener ;) )
   ○ It looks like a lot of code, but almost everything have been done for you by Android Studio. You only need to add two lines of code one inside onItemSelected and one inside onNothingSelected. It is a call for our method updateStatus();

14. We want to change status code if gender changes as well, that’s why we will add another listener

   ○ Again we will just call our method updatedStatus(); inside

15. So what will our updateStatus method do? It will set a text to status TextView


   ○ We start with empty status and check for gender, we will compare selected RadioButton with R.id.female (our radio button for female) and set text accordingly
   ○ Then we add a state name with getSelectedItem() for spinner.
   ○ Last thing to do is to set text for our status TextView
   ○ The result should look something like this

Result on activity

16. The final code looks like this

Final code (Register form 2)

17. For further practice you could:
   ○ Change welcome message for one country. You can translate a message in that case (for e.g. make it in Polish for Poland)
   ○ Count number of state selection changes and append it to status text
   ○ Check if gender was selected (this is kind of tricky question. How to do it?)