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

From Script | Spoken-Tutorial
Revision as of 16:14, 13 October 2020 by PoojaMoolya (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
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