Creating an Android App User Interface - Registration Screen

Estimated time: 30 minutes

Welcome to the lab on building a registration screen user interface in Android Studio. You will use the linear layout along with multiple widgets to build the view. The final result would look something like this:

Objectives

After completing this lab, you will be able to:

• Create a registration screen UI using LinearLayout inside a ScrollView
• Understand the usage of RadioGroup, RadioButton, and CheckBox
• Learn how to use children layouts

Running the lab

This is an instructional lab that does not require a Skills Network lab environment. You will follow this lab on your local machine using Android Studio.

New widgets introduced

Creating a registration screen involves a careful balance of usability and data collection. Users should find the form easy to complete without feeling overwhelmed by too many fields. Registration forms should be straightforward and clear.

Key elements of a good UX include: - Logical grouping of fields - Clear labeling - Appropriate input types to enhance user experience and data integrity

The lab introduces a few new widgets:

• ViewGroup: An invisible container that defines the layout structure for View and other ViewGroup objects.
• ScrollView: A view group that we can use to create vertically scrollable views.
• RadioGroup: A container that holds multiple RadioButton widgets, allowing the user to select only one option at a time.
• RadioButton: A widget that allows users to select one option from a set.
• CheckBox: A widget that allows users to select or deselect an option.

Instructions

Step 1: Open the previous project

You can skip this step if you already have the project from the previous lab open in Android Studio.

1. Open Android Studio.
2. Open the project you created in the previous lab.

Step 2: Create a new Java activity and XML view file for registration

1. In the project tool window, navigate to app > src > main > com > example > loginapplication directory.

2. Right-click on the directory, select New > Activity -> Empty Views Activity.

   

3. Name the activiy RegisterViewActivity and the corresponding view register_view.

   

4. This should creatre a Java files named RegisterViewActivity.java and a corresponding view named register_view.xml

   

5. Open the register_view.xml file in design view.

6. Right click the main layout in the component tree and select Convert view

   

7. You want to convert to ScrollView. This option is not available and you will have type it out.

   

8. You might notice a red flag and an issue "Speakable text not present." This will do away once you add a LinearLayout to the canvas. Drop a LinearLayout from the widget library to the canvas.

Since you have already worked with the drag-and-drop interface in the design view, the lab does not provide any further screenshots. You will however be given all the properties that need to be set for each field.

Step 3: Add LinearLayout

1. Drag a LinearLayout (vertical) from the Palette to the ScrollView.

2. Check the orientation is set to vertical.

Step 4: Add title as TextView

1. Drag a TextView from the Palette to the LinearLayout.

2. In the Attributes panel, set the id to app_title.

3. Set the text to Register.

4. Set the layout_margin to 24dp.

5. Set the textSize to 24sp.

6. Set the gravity to center.

7. Set padding to 16dp.

At the end of this step, you should have a TextView that serves as the title text of your registration screen.

Step 5: Add email EditText

1. Drag an E-mail from the Palette to the LinearLayout, below the TextView. If it is hard to drop it in the linear layout, you can always add it to the component tree.

2. In the Attributes panel, set the id to email.

3. Set minHeight to 48dp.

4. Delete the text attribute if present and set the hint to Email (Username).

5. Confirm that the inputType is textEmailAddress.

6. Set layout_margin to 16dp.

Step 6: Add password EditText

1. Drag an Password item from the Palette to the LinearLayout, below the Email EditText.

2. In the Attributes panel, set the id to password.

3. Delete the text attribute and set the hint to Password.

4. Confirm the inputType is set to textPassword.

5. Set minHeight to 48dp.

6. Set layout_margin to 16dp.

Step 7: Add full name EditText

1. Drag a PlainText from the Palette to the LinearLayout, below the Password EditText.

2. In the Attributes panel, set the id to full_name.

3. Delete the Name from the text attribute and set the hint to Full Name.

4. Confirm that the inputType is text.

5. Set minHeight to 48dp.

6. Set layout_margin to 16dp.

Step 8: Add phone number EditText

1. Drag a Phone text item from the Palette to the LinearLayout, below the Full Name EditText.

2. In the Attributes panel, set the id to phone_number.

3. Set the hint to Phone Number.

4. Confirm that the inputType is phone.

5. Set minHeight to 48dp.

6. Set layout_margin to 16dp.

Step 9: Add gender RadioGroup

1. Drag a TextView from the Palette to the LinearLayout, below the Phone Number EditText.

2. In the Attributes panel, set the text to Gender.

3. Set the layout_margin to 16dp.

4. Drag a RadioGroup from the Palette to the LinearLayout, below the Gender TextView.

5. In the Attributes panel, set the id to gender_group.

6. Add three RadioButton widgets inside the RadioGroup with ids male, female, and other.

7. Set the text for each RadioButton to Male, Female, and Other, respectively.

Step 10: Add Agree CheckBox

1. Drag a CheckBox from the Palette to the LinearLayout, below the RadioGroup.

2. In the Attributes panel, set the id to agree_checkbox.

3. Set the text to Agree? Privacy Notice.

4. Set the layout_margin to 16dp.

Step 11: Add the Register Button

1. Drag a Button from the Palette to the LinearLayout, below the CheckBox.

2. In the Attributes panel, set the id to register_button.

3. Set the text to Register.

4. Set layout_margin to 10dp.

Step 12: Add the "Already have an account?" link

1. Drag a TextView from the Palette to the LinearLayout, below the Register Button.

2. In the Attributes panel, set the id to login_link.

3. Set the text to Already have an account?

4. Set the textColor to a color resource or a hex value to make it look like a link (e.g., #0000FF for blue).

5. Set the textSize to 16sp.

6. Set layout_marginTop to 8dp.

Step 13: Run the application

1. The app/src/main/AndroidManifest.xml file tells Android Studio about what activity to run when the app starts. Open this file and change the following text

   <activity
           android:name=".RegisterViewActivity"
           android:exported="false" />
       <activity
           android:name=".MainActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>

   to

   <activity
           android:name=".RegisterViewActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
       <activity
           android:name=".MainActivity"
           android:exported="true">
       </activity>

2. Ensure your AVD is set up from the previous lab.

3. Select the Run button in Android Studio.

4. Select your AVD and wait for the application to launch.

5. Verify that the registration screen appears as designed.

Once you have tested your application, change back the code to the previous version in app/src/main/AndroidManifest.xml file. This ensures the login screen is first shown when the user launches the application on the phone. This is important for future labs.

You have now successfully created the UI for a registration screen using LinearLayout. This foundational skill will be crucial as you continue to develop more complex UIs in your Android applications.

Solution

If you are really stuck, you can copy the file before into register_view.xml file to get the same screen as the lab.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/app_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="24dp"
            android:gravity="center"
            android:text="Register"
            android:textSize="24sp" />

        <EditText
            android:id="@+id/email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:ems="10"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:minHeight="48dp" />

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:ems="10"
            android:hint="password"
            android:inputType="textPassword"
            android:minHeight="48dp" />

        <EditText
            android:id="@+id/full_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:ems="10"
            android:hint="Full Name"
            android:inputType="text"
            android:minHeight="48dp" />

        <EditText
            android:id="@+id/phone_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:ems="10"
            android:hint="Phone Number"
            android:inputType="phone"
            android:minHeight="48dp" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:text="Gender" />

        <RadioGroup
            android:id="@+id/gender_group"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="16dp">

            <RadioButton
                android:id="@+id/male"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Male" />

            <RadioButton
                android:id="@+id/female"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Female" />

            <RadioButton
                android:id="@+id/other"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Other" />
        </RadioGroup>

        <CheckBox
            android:id="@+id/agree_checkbox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:text="Agree? Privacy Notice" />

        <Button
            android:id="@+id/register_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Register" />

        <TextView
            android:id="@+id/login_link"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Already have an account?"
            android:textColor="#0000FF"
            android:textSize="16sp" />
    </LinearLayout>
</ScrollView>

Author

UL