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 used to collect data from the user.
Getting Started
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 view and view groups . A view consists of UI component such as buttons and 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 want kind of data you want to collect from the user. Consider the types of data you want to collect and choose the appropriate type of controls.
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 and wait for Android studio to finish creating your project. 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 by use of 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 Text View control will display the form 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.
<resources>
<string name="app_name">LEXO</string>
<string name="title">Membership Form</string>
</resources>
The XML for the Text View should look like this:
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="@string/title"
android:textColor="#D500F9"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.436"
app:layout_constraintStart_toStartOf="parent"
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 its 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 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.
<EditText
android:id="@+id/names"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="96dp"
android:ems="10"
android:hint="@string/name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.184"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Add the Gender Controls
First, add a TextView for the gender label.
<TextView
android:id="@+id/gender"
android:layout_width="83dp"
android:layout_height="32dp"
android:layout_marginTop="172dp"
android:text="Gender"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.118"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Radio buttons allow the user to select one option from a set. Radio buttons 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.
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="205dp"
android:layout_height="32dp"
android:layout_marginTop="172dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.834"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="@+id/radioButton"
android:layout_width="45dp"
android:layout_height="33dp"
android:text="M"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:onClick="radioButtonhandler"/>
<RadioButton
android:id="@+id/female"
android:layout_width="45dp"
android:layout_height="33dp"
android:text="F"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.655"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:onClick="radioButtonhandler"/>
<RadioButton
android:id="@+id/other"
android:layout_width="96dp"
android:layout_height="33dp"
android:text="Other"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.949"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:onClick="radioButtonhandler"/>
</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.
<EditText
android:id="@+id/current_weight"
android:layout_width="164dp"
android:layout_height="46dp"
android:layout_marginTop="260dp"
android:ems="10"
android:hint="@string/currrent_weight"
android:inputType="number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.151"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/height"
android:layout_width="157dp"
android:layout_height="44dp"
android:layout_marginTop="260dp"
android:ems="10"
android:hint="@string/height"
android:inputType="number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.919"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Add Goal Weight and Age Fields
Add another pair of plain text for the goal weight and age. The attribute for both input controls will be android:inputType="number" . This will ensure that an 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.
<EditText
android:id="@+id/goal_weight"
android:layout_width="175dp"
android:layout_height="52dp"
android:layout_marginTop="344dp"
android:ems="10"
android:hint="@string/goal_weight"
android:inputType="number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.156"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/age"
android:layout_width="140dp"
android:layout_height="48dp"
android:layout_marginTop="348dp"
android:ems="10"
android:hint="Age"
android:inputType="number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Add a Phone Number Field
Add another EditText below the goal weight and age. This EditText will be used to fill 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.
The rest of the XML looks like this:
<EditText
android:id="@+id/Phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="428dp"
android:ems="10"
android:hint="@string/phone"
android:inputType="phone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.194"
app:layout_constraintStart_toStartOf="parent"
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".
<EditText
android:id="@+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="500dp"
android:ems="10"
android:hint="@string/address"
android:inputType="text"
android:maxLines="2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.194"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Add a Accept Membership Rules Check Box
Next, add a CheckBox control below the address field. This checkbox control is a mandatory field that lets the user accept membership rules and conditions before submitting their details. You can choose to apply a background color to the checkbox to give it an emphasis.
<CheckBox
android:id="@+id/conditions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="580dp"
android:backgroundTint="#D500F9"
android:buttonTint="#D500F9"
android:text="@string/conditions"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.964"
app:layout_constraintStart_toStartOf="parent"
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 brands identity. The most important attribute of the button is the onClick attribute.
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="684dp"
android:backgroundTint="#D500F9"
android:onClick="submitbuttonHandler"
android:text="SUBMIT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.425"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Reading User Input
Now that we are done with the UI, lets implement user interaction mechanism in our application. Lets start with the name input field, Open MainActivity.java and use findViewById() method to return an instance of full name on the onCreate() method.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
EditText nameEditText = (EditText) findViewById(R.id.names);
String fullName = nameEditText.getText().toString();
}
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.
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="205dp"
android:layout_height="32dp"
android:layout_marginTop="172dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.834"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="@+id/radioButton"
android:layout_width="45dp"
android:layout_height="33dp"
android:text="M"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:onClick="radioButtonhandler"/>
<RadioButton
android:id="@+id/female"
android:layout_width="45dp"
android:layout_height="33dp"
android:text="F"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.655"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:onClick="radioButtonhandler"/>
<RadioButton
android:id="@+id/other"
android:layout_width="96dp"
android:layout_height="33dp"
android:text="Other"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.949"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:onClick="radioButtonhandler" />
</RadioGroup>
Implement the method in the Java file.
public void radioButtonhandler(View view) {
// Decide what happens when a user clicks on a button
}
Next, use findByview() method to return 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.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
EditText nameEditText = (EditText) findViewById(R.id.names);
String fullName = nameEditText.getText().toString();
EditText currentWeightEditText = (EditText) findViewById(R.id.current_weight);
String currentWeight = currentWeightEditText.getText().toString();
EditText heightEditText = (EditText) findViewById(R.id.height);
String Height = heightEditText.getText().toString();
EditText goalWeightEditText = (EditText) findViewById(R.id.gol_weight);
String GoalWeight = goalWeightEditText.getText().toString();
EditText ageEditText = (EditText) findViewById(R.id.age);
String age = ageEditText.getText().toString();
EditText phoneEditText = (EditText) findViewById(R.id.names);
String phone = phoneEditText.getText().toString();
EditText addressEditText = (EditText) findViewById(R.id.names);
String address = addressEditText.getText().toString();
}
Read Input from A Checkbox
An android checkbox generally has 2 states; checked and unchecked. Methods implemented by 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 check box is checked, it returns true; otherwise, it returns false.
//initiate a check box CheckBox conditionsCheckBox = (CheckBox) findViewById(R.id.conditions_CheckBox); //check current state of the check box Boolean checkBoxState = conditionsCheckBox.isChecked();
Listening to Button Click events
Since we already defined an onClick attribute called submitbutonHandler on the submit button, we will implement a method called submitbutonHandler() in MainActivity.java.
public void submitbuttonHandler(View view) {
//Decide what happens when the user clicks the submit button
}
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 allows 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 is 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, focus on gaining a good handle on the basics of form controls and how to use them.
