Android-app-using-Kotlin/C2/Creating-a-Registration-form/English-timed
From Script | Spoken-Tutorial
| |
|
| 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. |
