Difference between revisions of "Android-app-using-Kotlin/C2/Creating-a-Registration-form/English"

Learning Objectives

• Create a simple Registration form with TextView, Plain Text and Buttons.
• Run the Kotlin app to see the output in an Android phone

System requirement

• Ubuntu Linux 16.04 operating system
• Android Studio version 3.x and
• Android Phone with minimum of Android OS version 4.03

Pre-requisites

• Java programming language and
• Android Studio

If not, then go through the relevant tutorials on this website.

Select the TextView in the Layout Editor and press the Delete key on the keyboard.

Drag the TextView and drop it in the design editor window

Drag the TextView tool and place it in the center of the Layout Editor.

This TextView represents the label. Here, the text is not editable.

Change the Text Appearance

as Material.Large

By default, it is Material.Small.

Change the Text Appearance as Material.Large to increase the font size for better clarity.

Point to the four circles

Each constraint represents a connection or alignment to another view or the parent layout.

The Layout Editor uses constraints to determine the position of a UI element within the layout.

It will now be aligned to the top of the Layout Editor.

Then click on the right circle of the TextView and drag towards the right border.

To remove a particular constraint, keep the mouse pointer on the circle.

You can see the constraint highlighted in red color. Click on it. It will remove the constraint.

I’ll add the right constraint as I did before.

Now the TextView is placed at the top center.

Drag the TextView tool and place it below the Registration Form Textview in the Layout Editor.

Change the Text Appearance as Material.Medium

Then drag the arrow to the bottom circle of the Registration Form TextView.

Align the left and right of the TextView to the centre of the Layout Editor as shown.

Place it below the Spoken Tutorial TextView.

Drag and drop the Plain Text tool below the TextView

Plain text represents TextView in which you can edit the text.

It helps to enter any data in a text field.

In the Attributes panel, remove the text attribute of PlainText and press Enter.

Let it be empty. So that a user can enter the name during runtime.

Align the EditText to the Layout Editor

Note the capital letters T and B in the name nameTextBox.

Demo of alignment.

In the Palette, click on Buttons.

On the side panel, find a tool called Button and drag it to the center of the Layout Editor.

Change the text property to Click Here.

Change the text property to Click Here, which will change the text of the button in the Layout Editor.

Show the demo

Follow the same steps as we did earlier to run the app on the phone.

We can see the design of the interface on the phone.

If you want to change the position of the tools, drag and align accordingly.

Here we will add the code for getting the text input from the user.

var name = “”

We will first declare a variable “name” of type string.

Assign an empty string as shown here.

name = nameTextBox.text.toString()

This assigns the value of nameTextBox to the variable name by calling its text method.

Note that, the nameTextBox is the ID which we have given to the EditText.

This is equivalent to getText() in Java.

Now the name variable will get any input given by the user.

Type

// handle button click//

Type the comment statement as shown.

Whenever the button is clicked, some action has to be executed.

For this, we have a method called setOnClickListener.

mySendButton.setOnClickListener{

//---code here

}

You may see an error or warning in the code, which is highlighted in red color.

To resolve this, keep the cursor on the code and press Alt+Enter keys.

Select the appropriate option to quick fix the errors.

Errors like missing imports, variable assignments, missing reference etc are fixed using this.

Any code written between these blocks get executed when the button is clicked.

Highlight according to narration

name=nameTextBox.text.toString()

Toast.makeText(applicationContext,name,Toast.LENGTH_SHORT).show()

This code will store the value which the user has entered in the textbox to the variable name.

Toast is a class which provides a popup message with the given text for the given duration.

Show() method will show the output.

You can make use of it when you are practicing.

Point to the output.

Click on the button "CLICK HERE" to see the output.

The name we typed in EditText is shown as popup message.

From the menu, select New and then Activity and then Empty Activity.

Click on Finish.

Enter the name of the activity as SecondActivity.

Keep all the remaining fields as default. Click on Finish button.

The code file is SecondActivity.kt and the design file is activity_second.xml

Drag a TextView to the center of the layout editor.

Join the constraint circles as shown here.

Change the Text Appearance as Material.Large to increase the font size for better clarity.

New activities are launched through objects called Intent.

This function creates a intent containing the SecondActivity as parameter.

var intent = Intent(

this, SecondActivity::class.java).apply {

putExtra("Refername", name)

}

The putExtra method adds the EditText's value to the intent.

In this method, we pass the data by giving it a specific reference name.

This is indicated by the variable Refername.

We can access this data in the new activity by giving the reference name.

This code will send our data in name variable to next activity.

startActivity(intent)

startActivity(intent)

This will start the new activity when the button is clicked.

var obtainedName = ""

Create a new empty string variable as shown here.

obtainedName = intent.getStringExtra("Refername")

Type the code as shown.

This method will save the name that was received from the FirstActivity in the variable obtainedName.

welcomeTextView.text = obtainedName

welcomeTextView.text = “Welcome ” + obtainedName

Here we change the text attribute of welcomeTextView.

Click on the button “Click Here” to see the output.

We will see an output as Welcome and the name which we have given in the EditTextView.

Summary

• Create a Registration form with TextView, Plain Text and Buttons.
• Run the Kotlin App to see the output in an Android phone

Assignment

1. In the activity_second.xml, add two TextView in the layout editor
2. In the first TextView, change the text attribute to Registration Form
3. In the second TextView, change the text attribute to Spoken Tutorial
4. Remove the existing constraint and align the tools
5. Run the Kotlin App to see the output.

About Spoken Tutorial project

Please download and watch it

About workshops

For more details, please write to us.

Forum for specific questions:

More information on this mission is available at

this link.

And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.