Android applications often rely upon data supplied by users.

This tutorial walks you through

the creation and use of a number of the most common controls for collecting data from the
user.

For this tutorial, you will design and implement a membership registration form. Whether
you’re in charge of recruiting members for an app, an event, or a club, a simple and well-
designed member registration form will speed up the registration process, hence encouraging
more users to sign up.

App Overview
Layouts in Android define the structure of the user interface (UI) of your application. The UI
consists of elements which are built using a hierarchy of views and view groups. A view
consists of UI components such as buttons, text boxes, checkboxes, radio buttons, images,
etc. See the diagram below representing a standard application layout.
Before you begin the design process, you need to give some thought to what kind of data you
want to collect from the user. Consider the types of data you want to collect and choose the
appropriate types of control.

Our membership form will be for a gym and will collect the following information:

 full name
 gender
 current weight
 height
 goal weight
 age
 phone
 address

Getting Started
Open Android Studio and create a new project with an empty activity. Wait for Android Studio
to finish creating your project, and then open app > res > layout > activity_main.xml. This
file defines the layout for the user interface (UI).

A UI in Android is defined in XML files. The easiest way to build a UI in Android Studio is with
the Android Studio Layout Editor. The Layout Editor writes the XML for you as you drag and
drop views to build your layout.

In this project, we will use the ConstraintLayout . A ConstraintLayout is a layout that provides a
flexible way for creating views.

Add a Title to the Layout

In the Palette panel, click Text and add it to the design. You might need to move it around so
that it stays at the top of the layout.
Any time you drag an element in the visual editor of Android Studio,
you will see an error immediately: “This view is not constrained…”.
This error simply means that the element is not Constrained and
therefore won’t render correctly when you run the App. This only
applies to Constraint Layouts.

This TextView control will display the form's description and purpose to the user. This control
displays a string resource called @string/member_title , which must be defined within
the /res/values/strings.xml string resource file.

1 <resources>
2 <string name="app_name">LEXO</string>
3 <string name="title">Membership Form</string>

5 </resources>

The XML for the TextView should look like this:

1 <TextView
2 android:id="@+id/title"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginTop="28dp"
6 android:text="@string/title"
7 android:textColor="#D500F9"
8 android:textSize="28sp"
9 app:layout_constraintEnd_toEndOf="parent"
10 app:layout_constraintHorizontal_bias="0.436"
11 app:layout_constraintStart_toStartOf="parent"
12 app:layout_constraintTop_toTopOf="parent" />
Notice the id attribute on the text view; it is recommended that each control element is
assigned an id so that it's easy to reference from the Java files.

Add a Full Name Field

An EditText element is used to enter and modify text. Add an EditText control for the name
just below the TextView. You must also specify the input type attribute. In this case, we will
use android:inputType="text" for plain text. Here is the full XML.

1 <EditText
2 android:id="@+id/names"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginTop="96dp"
6 android:ems="10"
7 android:hint="@string/name"
8 app:layout_constraintEnd_toEndOf="parent"
9 app:layout_constraintHorizontal_bias="0.184"
10 app:layout_constraintStart_toStartOf="parent"
11 app:layout_constraintTop_toTopOf="parent" />
Advertisement

Add the Gender Controls

First, add a TextView for the gender label.

1 <TextView
2 android:id="@+id/gender"
3 android:layout_width="83dp"
4 android:layout_height="32dp"
5 android:layout_marginTop="172dp"
6 android:text="Gender"
7 android:textSize="18sp"
8 app:layout_constraintEnd_toEndOf="parent"
9 app:layout_constraintHorizontal_bias="0.118"
10 app:layout_constraintStart_toStartOf="parent"
11 app:layout_constraintTop_toTopOf="parent" />

Radio buttons allow the user to select one option from a set. They should be grouped together
to ensure only one radio button is selected at any given time; this is done by grouping them
inside a RadioGroup . Here is the XML for gender selection.

1 <RadioGroup
2 android:id="@+id/radioGroup"
3 android:layout_width="205dp"
4 android:layout_height="32dp"
5 android:layout_marginTop="172dp"
6 android:orientation="horizontal"
7 app:layout_constraintEnd_toEndOf="parent"
8 app:layout_constraintHorizontal_bias="0.834"
9 app:layout_constraintStart_toStartOf="parent"
10 app:layout_constraintTop_toTopOf="parent">

11

12

13 <RadioButton
14 android:id="@+id/radioButton"
15 android:layout_width="45dp"
16 android:layout_height="33dp"
17 android:text="M"
18 app:layout_constraintEnd_toEndOf="parent"
19 app:layout_constraintStart_toStartOf="parent"
20 app:layout_constraintTop_toTopOf="parent"
21 android:onClick="radioButtonhandler"/>

22
23 <RadioButton
24 android:id="@+id/female"
25 android:layout_width="45dp"
26 android:layout_height="33dp"
27 android:text="F"
28 app:layout_constraintEnd_toEndOf="parent"
29 app:layout_constraintHorizontal_bias="0.655"
30 app:layout_constraintStart_toStartOf="parent"
31 app:layout_constraintTop_toTopOf="parent"
32 android:onClick="radioButtonhandler"/>

33

34 <RadioButton
35 android:id="@+id/other"
36 android:layout_width="96dp"
37 android:layout_height="33dp"
38 android:text="Other"
39 app:layout_constraintEnd_toEndOf="parent"
40 app:layout_constraintHorizontal_bias="0.949"
41 app:layout_constraintStart_toStartOf="parent"
42 app:layout_constraintTop_toTopOf="parent"
43 android:onClick="radioButtonhandler"/>
44 </RadioGroup>

Add the Current Weight and Height Fields

Add two EditTexts from the palette. These will act as fields for the current weight and height.
Since we want numbers to be displayed when the user starts entering data, we will
use number as the input type. Set the hint attribute to supply a string to display in
the EditText control when it’s empty. Here is the XML for both controls on the same line.

1 <EditText
2 android:id="@+id/current_weight"
3 android:layout_width="164dp"
4 android:layout_height="46dp"
5 android:layout_marginTop="260dp"
6 android:ems="10"
7 android:hint="@string/currrent_weight"
8 android:inputType="number"
9 app:layout_constraintEnd_toEndOf="parent"
10 app:layout_constraintHorizontal_bias="0.151"
11 app:layout_constraintStart_toStartOf="parent"
12 app:layout_constraintTop_toTopOf="parent" />

13

14 <EditText
15 android:id="@+id/height"
16 android:layout_width="157dp"
17 android:layout_height="44dp"
18 android:layout_marginTop="260dp"
19 android:ems="10"
20 android:hint="@string/height"
21 android:inputType="number"
22 app:layout_constraintEnd_toEndOf="parent"
23 app:layout_constraintHorizontal_bias="0.919"
24 app:layout_constraintStart_toStartOf="parent"
25 app:layout_constraintTop_toTopOf="parent" />

Add Goal Weight and Age Fields

Add another pair of plain text fields for the goal weight and age. The attribute for both input
controls will be android:inputType="number" . This will ensure that a numeric keyboard is shown
when the user starts entering data. Both input controls will be on the same line. These will be
on the same line as above. Apply both vertical and horizontal constraints to it.

1 <EditText
2 android:id="@+id/goal_weight"
3 android:layout_width="175dp"
4 android:layout_height="52dp"
5 android:layout_marginTop="344dp"
6 android:ems="10"
7 android:hint="@string/goal_weight"
8 android:inputType="number"
9 app:layout_constraintEnd_toEndOf="parent"
10 app:layout_constraintHorizontal_bias="0.156"
11 app:layout_constraintStart_toStartOf="parent"
12 app:layout_constraintTop_toTopOf="parent" />

13

14 <EditText
15 android:id="@+id/age"
16 android:layout_width="140dp"
17 android:layout_height="48dp"
18 android:layout_marginTop="348dp"
19 android:ems="10"
20 android:hint="Age"
21 android:inputType="number"
22 app:layout_constraintEnd_toEndOf="parent"
23 app:layout_constraintHorizontal_bias="0.863"
24 app:layout_constraintStart_toStartOf="parent"
25 app:layout_constraintTop_toTopOf="parent" />
Advertisement

Add a Phone Number Field

Add another EditText below the goal weight and age. This EditText will be used to fill in the
phone number. The attribute for this element will be android:inputType="phone" . Setting
the EditText to inputType to phone is helpful since it will be easy to add digits. When the user
touches this field, they will be presented with the screen below.
Phone input type

The rest of the XML looks like this:

1 <EditText
2 android:id="@+id/Phone"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginTop="428dp"
6 android:ems="10"
7 android:hint="@string/phone"
8 android:inputType="phone"
9 app:layout_constraintEnd_toEndOf="parent"
10 app:layout_constraintHorizontal_bias="0.194"
11 app:layout_constraintStart_toStartOf="parent"
12 app:layout_constraintTop_toTopOf="parent" />

Add an Address Field to the Layout

Add another EditText below the phone field. This EditText will be used for the address of the
user. You might also want to increase the space provided for the address field. The attribute
for this element will be android:inputType="text" .

1 <EditText
2 android:id="@+id/address"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginTop="500dp"
6 android:ems="10"
7 android:hint="@string/address"
8 android:inputType="text"
9 android:maxLines="2"
10 app:layout_constraintEnd_toEndOf="parent"
11 app:layout_constraintHorizontal_bias="0.194"
12 app:layout_constraintStart_toStartOf="parent"
13 app:layout_constraintTop_toTopOf="parent" />

Add an "Accept Membership Rules" Checkbox

Next, add a CheckBox control below the address field. This checkbox control is a mandatory
field that lets the user accept the membership rules and conditions before submitting their
details. You can choose to apply a background color to the checkbox to give it an emphasis.

1 <CheckBox
2 android:id="@+id/conditions"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginTop="580dp"
6 android:backgroundTint="#D500F9"
7 android:buttonTint="#D500F9"
8 android:text="@string/conditions"
9 app:layout_constraintEnd_toEndOf="parent"
10 app:layout_constraintHorizontal_bias="0.964"
11 app:layout_constraintStart_toStartOf="parent"
12 app:layout_constraintTop_toTopOf="parent" />

Add a Submit Button

Lastly, add the submit button. You can change the background color of the button to fit your
brand's identity. The most important attribute of the button is the onClick attribute.

1 <Button
2 android:id="@+id/button"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginTop="684dp"
6 android:backgroundTint="#D500F9"
7 android:onClick="submitbuttonHandler"
8 android:text="SUBMIT"
9 app:layout_constraintEnd_toEndOf="parent"
10 app:layout_constraintHorizontal_bias="0.425"
11 app:layout_constraintStart_toStartOf="parent"
12 app:layout_constraintTop_toTopOf="parent" />

Reading User Input

Now that we are done with the UI, let's implement a user interaction mechanism in our
application. Let's start with the name input field. Open MainActivity.java and use
the findViewById() method to return an instance of the full name on the onCreate() method.

1 public class MainActivity extends AppCompatActivity {

2

5 @Override
6 protected void onCreate(Bundle savedInstanceState) {
7 super.onCreate(savedInstanceState);
8 setContentView(R.layout.activity_main);
9 EditText nameEditText = (EditText) findViewById(R.id.names);
10 String fullName = nameEditText.getText().toString();
11 }

Responding to Radio Button Click Events

Whenever a user clicks on a radio button, the RadioButton object receives an on-click event.
The click event is defined by adding the android:onClick attribute to the radio button in the
XML file. The value of the android:onClick attribute must be the name of the method called in
response to a click event. The method is implemented in the Activity file.

Add the android:onClick attribute to each of the radio buttons in the XML file.

1 <RadioGroup
2 android:id="@+id/radioGroup"
3 android:layout_width="205dp"
4 android:layout_height="32dp"
5 android:layout_marginTop="172dp"
6 android:orientation="horizontal"
7 app:layout_constraintEnd_toEndOf="parent"
8 app:layout_constraintHorizontal_bias="0.834"
9 app:layout_constraintStart_toStartOf="parent"
10 app:layout_constraintTop_toTopOf="parent">

11

12

13 <RadioButton
14 android:id="@+id/radioButton"
15 android:layout_width="45dp"
16 android:layout_height="33dp"
17 android:text="M"
18 app:layout_constraintEnd_toEndOf="parent"
19 app:layout_constraintStart_toStartOf="parent"
20 app:layout_constraintTop_toTopOf="parent"
21 android:onClick="radioButtonhandler"/>

22

23 <RadioButton
24 android:id="@+id/female"
25 android:layout_width="45dp"
26 android:layout_height="33dp"
27 android:text="F"
28 app:layout_constraintEnd_toEndOf="parent"
29 app:layout_constraintHorizontal_bias="0.655"
30 app:layout_constraintStart_toStartOf="parent"
31 app:layout_constraintTop_toTopOf="parent"
32 android:onClick="radioButtonhandler"/>

33

34 <RadioButton
35 android:id="@+id/other"
36 android:layout_width="96dp"
37 android:layout_height="33dp"
38 android:text="Other"
39 app:layout_constraintEnd_toEndOf="parent"
40 app:layout_constraintHorizontal_bias="0.949"
41 app:layout_constraintStart_toStartOf="parent"
42 app:layout_constraintTop_toTopOf="parent"
43 android:onClick="radioButtonhandler" />
44 </RadioGroup>

Implement the method in the Java file.

1 public void radioButtonhandler(View view) {

2
3 // Decide what happens when a user clicks on a button
4 }
5
6
7

Next, use the findByview() method to return an instance of the rest of the EditText elements
on the Oncreate() method. Then use the getText() method to get the values from the input
fields.

1 public class MainActivity extends AppCompatActivity {

2

5 @Override
6 protected void onCreate(Bundle savedInstanceState) {
7 super.onCreate(savedInstanceState);
8 setContentView(R.layout.activity_main);
9 EditText nameEditText = (EditText) findViewById(R.id.names);
10 String fullName = nameEditText.getText().toString();

11

12 EditText currentWeightEditText = (EditText) findViewById(R.id.current_weight);

13 String currentWeight = currentWeightEditText.getText().toString();

14

15 EditText heightEditText = (EditText) findViewById(R.id.height);

16 String Height = heightEditText.getText().toString();

17

18 EditText goalWeightEditText = (EditText) findViewById(R.id.gol_weight);

19 String GoalWeight = goalWeightEditText.getText().toString();

20

21 EditText ageEditText = (EditText) findViewById(R.id.age);

22 String age = ageEditText.getText().toString();

23

24 EditText phoneEditText = (EditText) findViewById(R.id.names);

25 String phone = phoneEditText.getText().toString();

26

27 EditText addressEditText = (EditText) findViewById(R.id.names);

28 String address = addressEditText.getText().toString();
29 }

Read Input From a Checkbox

An Android checkbox generally has two states: checked and unchecked. The methods
implemented by a checkbox are:

 public boolean isChecked()

 public void setChecked(boolean status)

We will use the isChecked() method to check the current state of the checkbox. The state is a
boolean value, either true or false. If a checkbox is checked, it returns true; otherwise, it
returns false.

1 //initiate a check box

2 CheckBox conditionsCheckBox = (CheckBox) findViewById(R.id.conditions_CheckBox);
3

4 //check current state of the check box

5 Boolean checkBoxState = conditionsCheckBox.isChecked();

Listening to Button Click Events

Since we already defined an onClick attribute called submitbuttonHandler on the submit
button, we will implement a method called submitbuttonHandler() in MainActivity.java.

1 public void submitbuttonHandler(View view) {

2 //Decide what happens when the user clicks the submit button

4 }

Here is the final app.

Generate the Appropriate Email Details
Now that you’ve got all your form data, you’re ready to craft a message. Simply process all
the data fields and build an appropriate feedback message. For example, you might use some
fields in the message subject and others in the message body. You can use format strings to
help build the appropriate strings, the specifics of which will be discussed in an upcoming
quick tip.

Conclusion
In this tutorial, you learned how to use various input controls to design a membership form
within an Android application. The EditText control is versatile and powerful, allowing for
many different types of text and input forms. Radio buttons allow the user to choose only one
of the given choices at a time. The CheckBox controls help limit the user’s input to a specific
set of responses. The Button control is a simple way to generate an event to process the form
input.

There are many other controls worth exploring for use within forms. There's a lot more we
could cover regarding good form design, how form controls fit into the Activity lifecycle, and
how input methods and such factor into things, but for now, we've focused on gaining a good
handle on the basics of form controls and how to use them.