Android-app-using-Kotlin/C2/Creating-a-Registration-form/English

Visual Cue	Narration
Slide 1:	Welcome to the Spoken Tutorial on Creating a Registration form.
Slide 2: Learning Objectives	In this tutorial we will learn to Create a simple Registration form with TextView, Plain Text and Buttons. Run the Kotlin app to see the output in an Android phone
Slide 3: System requirement	To record this tutorial, I am using Ubuntu Linux 16.04 operating system Android Studio version 3.x and Android Phone with minimum of Android OS version 4.03
Slide 4: Pre-requisites	To follow this tutorial, you should have basic knowledge Java programming language and Android Studio If not, then go through the relevant tutorials on this website.
Slide 5:	In this tutorial, we will design a form as shown here.
Open the Android studio from the launcher bar.	Let us open Android Studio.
Click on Start a new Android project.	Click on Start a new Android Studio project to create a new project.
Type SimpleForm.	Enter a new Application name as RegistrationForm.
Show the demo on the interface	Repeat all the steps as we did earlier.
Enter the Activity name as FirstActivity	Enter the Activity name as FirstActivity.
Click on the Finish button	Click on the Finish button at the bottom of the window.
Point to the IDE	Now the Android Studio IDE opens.
Click on activity_first.xml	Click on activity_first.xml file.
Delete the default Hello World TextView	First we will delete the default Hello World TextView. Select the TextView in the Layout Editor and press the Delete key on the keyboard.
Point to the Textview in the Palette Drag the TextView and drop it in the design editor window	Now let us add a TextView. 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.
Type the text “Registration Form”	In the attribute panel, change the text attribute of TextView as Registration Form and press Enter.
Point to Text Appearance Change the Text Appearance as Material.Large	Look at Text Appearance now. By default, it is Material.Small. Change the Text Appearance as Material.Large to increase the font size for better clarity.
narration only	Let us see how to align and resize a view in ConstraintLayout.
(Show a demo of alignment and resizing of the TextView) Point to the four circles	There are four circles in the axes of the TextView which are called as constraints. 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.
(Show a demo of resizing)	For resizing, we can drag the dot at the four corners of the TextView.
narration	Let us place the TextView at the top center of the Layout Editor.
Click on the top circle of the TextView and drag towards the top	For that, click on the top circle of the TextView and drag towards the top. It will now be aligned to the top of the Layout Editor.
Demo of the alignment of the TextView in the top centre of the Layout Editor	Next, click on the left circle of the TextView and drag towards the left border. 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 and drop it in the design editor window	Next let us add two more TextViews Drag the TextView tool and place it below the Registration Form Textview in the Layout Editor.
Type the text “Welcome to Spoken Tutorial”	In the attribute panel, change the text attribute of TextView as Spoken Tutorial and press Enter. Change the Text Appearance as Material.Medium
Show a demo of the alignment	Click on the top circle of this TextView. 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.
Drag the textview	Likewise drag the TextView tool for the label Name. Place it below the Spoken Tutorial TextView.
Type the text “Name”	In the attribute panel, change the text attribute of TextView as Name and press Enter.
Show a demo of the alignment	Align the TextView to the left and top of the Layout Editor as shown.
Demonstration: Drag and drop the Plain Text tool below the TextView	Now click and drag the tool Plain Text from the Palette and place it below the Name TextView. Plain text represents TextView in which you can edit the text.
Remove the Name from the text attribute	Note that in the Attributes panel, it is specified as EditText. 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.
Demonstration: Align the EditText to the Layout Editor	Now we will add constraints for this EditText.
Change the ID of EditText to nameTextBox	Change the ID of this EditText to a unique name say, nameTextBox. Note the capital letters T and B in the name nameTextBox.
Add Button to Layout Editor Demo of alignment.	Now we will add a Button in the Layout editor. 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.
Adding constraints to Button tool	Now add the constraints for this tool as demonstrated here.
Change the ID of this Button as mySendButton. Change the text property to Click Here.	Now change the ID of this Button as mySendButton. Change the text property to Click Here, which will change the text of the button in the Layout Editor.
narration only	Now our design of the Registration form is ready to run.
Connect your phone	Connect your Android phone to the USB port of your computer.
Click on the play button Show the demo	In the Android Studio interface, click on the Play button at the top right, to run the app. Follow the same steps as we did earlier to run the app on the phone.
Show the output on the phone	Select the RegistrationForm icon 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.
Go to Android studio Interface.	Let us go back to the Android Studio interface.
Click on FirstActivity.kt file	Now go to FirstActivity.kt file. Here we will add the code for getting the text input from the user.
Type var name = “”	In onCreate method, at the end press Enter. We will first declare a variable “name” of type string. Assign an empty string as shown here.
Type, name = nameTextBox.text.toString()	Now on the next line type as shown. 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.
Adding code for Button press Type // handle button click//	Next we will write the code for the Button. 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.
Type mySendButton.setOnClickListener{ //---code here }	Type the code as shown. 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.
Copy and paste Highlight according to narration name=nameTextBox.text.toString() Toast.makeText(applicationContext,name,Toast.LENGTH_SHORT).show()	Type the below code within the mySendButton.setOnClickListener block. 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.
Text box - In Editing	All the codes are available in the Code files link of this tutorial. You can make use of it when you are practicing.
Demo to run the app	Run the app to see the output in the phone.
Demo on the phone	In the Android phone window, launch the RegistrationForm app.
Enter a name. Point to the output.	I will enter a name. Click on the button "CLICK HERE" to see the output. The name we typed in EditText is shown as popup message.
Switch back to the Android studio Interface.	Switch back to the Android studio interface.
	We will create a new activity to send the text to the new page when the button is clicked.
App>> New>>Activity>>Empty Activity	On the left panel, in the Project explorer, right click on the app folder. From the menu, select New and then Activity and then Empty Activity.
Enter the name of the Activity as “SecondActivity”. Click on Finish.	Configure Activity window pops up. Enter the name of the activity as SecondActivity. Keep all the remaining fields as default. Click on Finish button.
Point to the layout for the SecondActivity	The IDE creates a new activity. The code file is SecondActivity.kt and the design file is activity_second.xml
	Now let us design the user interface for Second Activity.
click on activity_second.xml	Click on 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.
Change the Id to welcomeTextView	Change the ID property to some unique name say “welcomeTextView”.
narration only	When the user clicks on the Click Here button from first activity, the second activity is launched.
Click on FirstActivity.kt.	Click on FirstActivity.kt.
Write code to create intent for SecondActivity	Write the code as shown below the Toast line. New activities are launched through objects called Intent. This function creates a intent containing the SecondActivity as parameter.
Narration only	Next, we will send the data that we collected on the first activity to the second activity.
Highlight code according to narration var intent = Intent( this, SecondActivity::class.java).apply { putExtra("Refername", name) }	Type the code after the Intent object as shown. 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.
Type, startActivity(intent)	Type, startActivity(intent) This will start the new activity when the button is clicked.
	Our task is to obtain this data in the SecondActivity.
Click on the SecondActivity.kt.	Click on the SecondActivity.kt.
Write code to create new variable var obtainedName = ""	Inside onCreate method at the end press Enter. Create a new empty string variable as shown here.
Type, obtainedName = intent.getStringExtra("Refername")	Next we will write code to get the name passed from FirstActivity. Type the code as shown. This method will save the name that was received from the FirstActivity in the variable obtainedName.
Type, welcomeTextView.text = obtainedName	Type welcomeTextView.text = “Welcome ” + obtainedName Here we change the text attribute of welcomeTextView.
Run the App.	Run the Kotlin app to see the output on the phone.
Point to the output	Enter a name. 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.
	This brings us to the end of this tutorial. Let us summarize.
Slide 5: Summary	In this tutorial we learnt to Create a Registration form with TextView, Plain Text and Buttons. Run the Kotlin App to see the output in an Android phone
Slide 6: Assignment	As an assignment, In the activity_second.xml, add two TextView in the layout editor In the first TextView, change the text attribute to Registration Form In the second TextView, change the text attribute to Spoken Tutorial Remove the existing constraint and align the tools Run the Kotlin App to see the output.
Show a screen shot	After completing the assignment, your app should show the output as shown here.
Slide 7: About Spoken Tutorial project	The video at the following link summarises the Spoken Tutorial project. Please download and watch it
Slide 8: About workshops	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
Slide 15: Forum for specific questions:	Please post your timed queries in this forum.
Slide 14:	Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at this link.
	The Android app and the script for this tutorial was contributed by Abhishek Shah. And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off. Thanks for watching.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat