PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Creating a Registration form.''' |-..."

2020-10-13T10:44:52Z

Created page with " {| border=1 | <center>'''Time'''</center> | <center>'''Narration'''</center> |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Creating a Registration form.''' |-..."

New page

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

|}

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

PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the''' Spoken Tutorial''' on''' Creating a Registration form.''' |-..."