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

Time	Narration
00:01	Welcome to the Spoken Tutorial on Creating a Registration form.
00:06	In this tutorial we will learn to
00:09	Create a simple Registration form with TextView, Plain Text and Buttons.
00:16	Run the Kotlin app to see the output in an Android phone
00:21	To record this tutorial, I am using
00:23	Ubuntu Linux 16.04 operating system
00:28	Android Studio version 3.x and
00:32	Android Phone with minimum of Android OS version 4.03
00:38	To follow this tutorial, you should have basic knowledge
00:43	Java programming language and Android Studio
00:49	If not, then go through the relevant tutorials on this website.
00:54	In this tutorial, we will design a form as shown here.
00:59	Let us open Android Studio.
01:03	Click on Start a new Android Studio project to create a new project.
01:09	Enter a new Application name as RegistrationForm.
01:14	Repeat all the steps as we did earlier.
01:21	Enter the Activity name as FirstActivity.
01:25	Click on the Finish button at the bottom of the window.
01:29	Now the Android Studio IDE opens.
01:33	Click on activity underscore first dot xml file.
01:39	First we will delete the default Hello World TextView.
01:44	Select the TextView in the Layout Editor and press the Delete key on the keyboard.
01:50	Now let us add a TextView.
01:53	Drag the TextView tool and place it in the center of the Layout Editor.
01:59	This TextView represents the label. Here, the text is not editable.
02:06	In the attribute panel, change the text attribute of TextView as Registration Form and press Enter.
02:14	Look at Text Appearance now.
02:17	By default, it is Material dot Small.
02:21	Change the Text Appearance as Material dot Large to increase the font size for better clarity.
02:29	Let us see how to align and resize a view in ConstraintLayout.
02:35	There are four circles in the axes of the TextView which are called as constraints.
02:42	Each constraint represents a connection or alignment to another view or the parent layout.
02:49	The Layout Editor uses constraints to determine the position of a UI element within the layout.
02:57	For resizing, we can drag the dot at the four corners of the TextView.
03:03	Let us place the TextView at the top center of the Layout Editor.
03:07	Click on the top circle of the TextView and drag towards the top.
03:13	It will now be aligned to the top of the Layout Editor.
03:17	Next, click on the left circle of the TextView and drag towards the left border.
03:23	Click on the right circle of the TextView and drag towards the right border.
03:28	To remove a particular constraint, keep the mouse pointer on the circle.
03:33	You can see the constraint highlighted in red color. Click on it. It will remove the constraint.
03:40	I’ll add the right constraint as I did before.
03:44	Now the TextView is placed at the top center.
03:49	Now let us add two more TextViews
03:53	Drag the TextView tool and place it below the Registration Form Textview in the Layout Editor.
04:00	In the attribute panel, change the text attribute of TextView as Spoken Tutorial and press Enter.
04:09	Change the Text Appearance as Material.Medium
04:13	Click on the top circle of this TextView.
04:15	Then drag the arrow to the bottom circle of the Registration Form TextView.
04:21	Align the left and right of the TextView to the centre of the Layout Editor as shown.
04:28	Likewise drag the TextView tool for the label Name.
04:33	Place it below the Spoken Tutorial TextView.
04:37	In the attribute panel, change the text attribute of TextView as Name and press Enter.
04:44	Align the TextView to the left and top of the Layout Editor as shown.
04:50	Now click and drag the tool Plain Text from the Palette and place it below the Name TextView.
04:58	Plain text represents TextView in which you can edit the text.
05:04	Note that in the Attributes panel, it is specified as EditText.
05:10	It helps to enter any data in a text field.
05:15	In the Attributes panel, remove the text attribute of PlainText and press Enter.
05:22	Let it be empty. So that a user can enter the name during runtime.
05:28	Now we will add constraints for this EditText.
05:33	Change the ID of this EditText to a unique name say, nameTextBox.
05:40	Note the capital letters T and B in the name nameTextBox.
05:46	Now we will add a Button in the Layout editor.
05:50	In the Palette, click on Buttons.
05:54	On the side panel, find a tool called Button and drag it to the center of the Layout Editor.
06:01	Now add the constraints for this tool as demonstrated here.
06:06	Now change the ID of this Button as mySendButton.
06:11	Change the text property to Click Here, which will change the text of the button in the Layout Editor.
06:20	Now our design of the Registration form is ready to run.
06:24	Connect your Android phone to the USB port of your computer.
06:29	In the Android Studio interface, click on the Play button at the top right, to run the app.
06:36	Follow the same steps as we did earlier to run the app on the phone.
06:43	Select the RegistrationForm icon on the phone.
06:47	We can see the design of the interface on the phone.
06:51	If you want to change the position of the tools, drag and align accordingly.
06:56	Let us go back to the Android Studio interface.
07:00	Now go to FirstActivity dot kt file.
07:04	Here we will add the code for getting the text input from the user.
07:10	In onCreate method, at the end press Enter.
07:14	First declare a variable “name” of type string.
07:21	Assign an empty string as shown here.
07:25	Now on the next line type as shown.
07:29	This assigns the value of nameTextBox to the variable name by calling its text method.
07:36	Note that, the nameTextBox is the ID which we have given to the EditText.
07:43	This is equivalent to getText() in Java.
07:47	Now the name variable will get any input given by the user.
07:53	Next we will write the code for the Button.
07:56	Type the comment statement as shown.
08:00	Whenever the button is clicked, some action has to be executed.
08:04	For this, we have a method called setOnClickListener.
08:09	Type the code as shown.
08:12	You may see an error or warning in the code, which is highlighted in red color.
08:18	To resolve this, keep the cursor on the code and press Alt+Enter keys.
08:24	Select the appropriate option to quick fix the errors.
08:29	Errors like missing imports, variable assignments, missing reference etc are fixed using this.
08:38	Any code written between these blocks get executed when the button is clicked.
08:44	Type the below code within the mySendButton dot setOnClickListener block.
08:51	This code will store the value which the user has entered in the textbox to the variable name.
08:59	Toast is a class which provides a popup message with the given text for the given duration.
09:06	Show method will show the output.
09:09	All the codes are available in the Code files link of this tutorial.
09:13	You can make use of it when you are practicing.
09:17	Run the app to see the output in the phone.
09:22	In the Android phone window, launch the RegistrationForm app.
09:27	I will enter a name.
09:30	Click on the button "CLICK HERE" to see the output.
09:34	The name we typed in EditText is shown as popup message.
09:39	Switch back to the Android studio interface.
09:43	We will create a new activity to send the text to the new page when the button is clicked.
09:50	On the left panel, in the Project explorer, right click on the app folder.
09:57	From the menu, select New and then Activity and then Empty Activity.
10:04	Configure Activity window pops up.
10:08	Enter the name of the activity as SecondActivity.
10:13	Keep all the remaining fields as default. Click on Finish .
10:20	The IDE creates a new activity.
10:23	The code file is SecondActivity dot kt and the design file is activity underscore second dot xml
10:33	Now let us design the user interface for Second Activity.
10:38	Click on activity underscore second dot xml
10:43	Drag a TextView to the center of the layout editor.
10:48	Join the constraint circles as shown here.
10:53	Change the Text Appearance as Material dot Large to increase the font size for better clarity.
11:01	Change the ID property to some unique name say “welcomeTextView”.
11:08	When the user clicks on the Click Here button from first activity, the second activity is launched.
11:15	Click on FirstActivity dot kt.
11:19	Write the code as shown below the Toast line.
11:23	New activities are launched through objects called Intent.
11:28	This function creates a intent containing the SecondActivity as parameter.
11:34	Next, we will send the data that we collected on the first activity to the second activity.
11:41	Type the code after the Intent object as shown.
11:46	The putExtra method adds the EditText's value to the intent.
11:52	In this method, we pass the data by giving it a specific reference name.
11:57	This is indicated by the variable Refername.
12:01	We can access this data in the new activity by giving the reference name.
12:07	This code will send our data in name variable to next activity.
12:13	Type, startActivity within parenthesis intent
12:18	This will start the new activity when the button is clicked.
12:22	Our task is to obtain this data in the SecondActivity.
12:27	Click on the SecondActivity dot kt.
12:30	Inside onCreate method at the end press Enter.
12:35	Create a new empty string variable as shown here.
12:40	Next we will write code to get the name passed from FirstActivity.
12:46	Type the code as shown.
12:49	This method will save the name that was received from the FirstActivity in the variable obtainedName.
12:57	Type welcomeTextView.text equal to within double quotes Welcome plus obtainedName
13:05	Here we change the text attribute of welcomeTextView.
13:10	Run the Kotlin app to see the output on the phone.
13:15	Enter a name.
03:17	Click on the button “Click Here” to see the output.
13:21	We will see an output as Welcome and the name which we have given in the EditTextView.
13:28	This brings us to the end of this tutorial. Let us summarize.
13:33	In this tutorial we learnt to Create a Registration form with TextView, Plain Text and Buttons.
13:42	Run the Kotlin App to see the output in an Android phone
13:47	As an assignment, In the activity_second.xml, add two TextView in the layout editor
13:56	In the first TextView, change the text attribute to Registration Form
14:01	In the second TextView, change the text attribute to Spoken Tutorial
14:07	Remove the existing constraint and align the tools
14:10	Run the Kotlin App to see the output.
14:15	After completing the assignment, your app should show the output as shown here.
14:22	The video at the following link summarises the Spoken Tutorial project. Please download and watch it
14:30	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
14:40	Please post your timed queries in this forum.
14:44	Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at this link.
14:56	The Android app and the script for this tutorial was contributed by Abhishek Shah.
15:02	And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off. Thanks for watching.

Contributors and Content Editors

PoojaMoolya