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


{| border=1
| <center>'''Time'''</center>
|  <center>'''Narration'''</center>

|-
|  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.

|}