Difference between revisions of "Android-app-using-Kotlin/C2/Creating-a-Registration-form/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| <cent...")
 
 
Line 14: Line 14:
 
Learning Objectives
 
Learning Objectives
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| In this tutorial we will learn to
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| In this tutorial we will learn to
 
 
 
* Create a simple '''Registration''' form with '''TextView, Plain Text '''and''' Buttons.'''
 
* Create a simple '''Registration''' form with '''TextView, Plain Text '''and''' Buttons.'''
 
* Run the '''Kotlin app''' to see the output in an '''Android''' phone
 
* Run the '''Kotlin app''' to see the output in an '''Android''' phone
Line 24: Line 22:
 
System requirement
 
System requirement
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| To record this tutorial, I am using
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| To record this tutorial, I am using
 
 
 
* '''Ubuntu Linux 16.04''' operating system  
 
* '''Ubuntu Linux 16.04''' operating system  
 
* '''Android Studio''' version 3.x and
 
* '''Android Studio''' version 3.x and
Line 120: Line 116:
  
 
Point to the four circles
 
Point to the four circles
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| There are four circles in the axis of the '''TextView''' which are called as '''constraints'''.  
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| There are four circles in the axes of the '''TextView''' which are called as '''constraints'''.  
  
 
Each '''constraint''' represents a connection or alignment to another '''view''' or the '''parent layout'''.
 
Each '''constraint''' represents a connection or alignment to another '''view''' or the '''parent layout'''.
Line 337: Line 333:
  
 
Any '''code''' written between these '''blocks''' get executed when the button is clicked.
 
Any '''code''' written between these '''blocks''' get executed when the button is clicked.
 
|-
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"|
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| All the '''codes''' are available in the '''Code files''' link of this tutorial.
 
 
You can make use of it when you are practicing.
 
  
 
|-
 
|-
Line 353: Line 343:
 
Toast.makeText(''applicationContext'',name,Toast.''LENGTH_SHORT'').show()
 
Toast.makeText(''applicationContext'',name,Toast.''LENGTH_SHORT'').show()
  
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| Type the below '''code''' within the '''mySendButton.setOnClickListener '''block'''.'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| Type the below '''code''' within the '''mySendButton.setOnClickListener '''block.
  
 
This '''code''' will store the value which the user has entered in the '''textbox '''to the '''variable name.'''
 
This '''code''' will store the value which the user has entered in the '''textbox '''to the '''variable name.'''
Line 379: Line 369:
  
 
Point to the output.
 
Point to the output.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| I’ll enter a name here.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| I will enter a name.
 +
 
 +
Click on the button '''"CLICK HERE"''' to see the output.
 +
 
  
The name we typed in '''EditText''' is shown as a popup message.
+
The name we typed in '''EditText''' is shown as popup message.
  
 
|-
 
|-
Line 398: Line 391:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| Enter the name of the Activity as “'''SecondActivity'''”.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| Enter the name of the '''Activity''' as “'''SecondActivity'''”.
  
 
Click on Finish.
 
Click on Finish.
Line 405: Line 398:
 
Enter the name of the '''activity''' as '''SecondActivity'''.
 
Enter the name of the '''activity''' as '''SecondActivity'''.
  
Keep all the remaining fields as default. click on '''Finish '''button.
+
Keep all the remaining fields as default. Click on '''Finish '''button.
  
 
|-
 
|-
Line 434: Line 427:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| '''narration only'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| '''narration only'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| When the '''user''' clicks on the '''Click Here button''' from '''first activity''', the '''second activity''' is launched.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| When the '''user''' clicks on the '''Click Here''' button from '''first activity''', the '''second activity''' is launched.
  
 
|-
 
|-
Line 442: Line 435:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| '''Write code to create intent for SecondActivity'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| '''Write code to create intent for SecondActivity'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| Write the '''code''' below the '''Toast''' line.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.044cm;padding-right:0.191cm;"| Write the '''code''' as shown below the '''Toast''' line.
  
 
New '''activities''' are launched through '''objects''' called '''Intent.'''
 
New '''activities''' are launched through '''objects''' called '''Intent.'''
Line 465: Line 458:
  
  
The[https://developer.android.com/reference/android/content/Intent.html#putExtra(java.lang.String,%20java.lang.String)  ]'''putExtra method''' adds the '''EditText's''' value to the '''intent'''.
+
The '''putExtra method''' adds the '''EditText's''' value to the '''intent'''.
  
 
In this '''method''', we pass the data by giving it a specific '''reference name'''.
 
In this '''method''', we pass the data by giving it a specific '''reference name'''.
Line 473: Line 466:
 
We can access this data in the new '''activity''' by giving the '''reference name'''.
 
We can access this data in the new '''activity''' by giving the '''reference name'''.
  
This '''code''' will send our data in '''variable name '''to the new activity.
+
This '''code''' will send our data in '''name variable '''to next activity.
  
 
|-
 
|-

Latest revision as of 18:31, 19 February 2019

Visual Cue
Narration
Slide 1: Welcome to the Spoken Tutorial on Creating a Registration form.
Slide 2:

Learning Objectives

In this tutorial we will learn to
  • Create a simple Registration form with TextView, Plain Text and Buttons.
  • Run the Kotlin app to see the output in an Android phone
Slide 3:

System requirement

To record this tutorial, I am using
  • Ubuntu Linux 16.04 operating system
  • Android Studio version 3.x and
  • Android Phone with minimum of Android OS version 4.03
Slide 4:

Pre-requisites

To follow this tutorial, you should have basic knowledge
  • Java programming language and
  • Android Studio

If not, then go through the relevant tutorials on this website.

Slide 5: In this tutorial, we will design a form as shown here.
Open the Android studio from the launcher bar. Let us open Android Studio.
Click on Start a new Android project. Click on Start a new Android Studio project to create a new project.
Type SimpleForm. Enter a new Application name as RegistrationForm.
Show the demo on the interface Repeat all the steps as we did earlier.
Enter the Activity name as FirstActivity Enter the Activity name as FirstActivity.
Click on the Finish button Click on the Finish button at the bottom of the window.
Point to the IDE Now the Android Studio IDE opens.
Click on activity_first.xml Click on activity_first.xml file.
Delete the default Hello World TextView First we will delete the default Hello World TextView.

Select the TextView in the Layout Editor and press the Delete key on the keyboard.

Point to the Textview in the Palette

Drag the TextView and drop it in the design editor window

Now let us add a TextView.

Drag the TextView tool and place it in the center of the Layout Editor.

This TextView represents the label. Here, the text is not editable.

Type the text “Registration Form In the attribute panel, change the text attribute of TextView as Registration Form and press Enter.
Point to Text Appearance

Change the Text Appearance

as Material.Large

Look at Text Appearance now.

By default, it is Material.Small.

Change the Text Appearance as Material.Large to increase the font size for better clarity.

narration only Let us see how to align and resize a view in ConstraintLayout.
(Show a demo of alignment and resizing of the TextView)

Point to the four circles

There are four circles in the axes of the TextView which are called as constraints.

Each constraint represents a connection or alignment to another view or the parent layout.

The Layout Editor uses constraints to determine the position of a UI element within the layout.

(Show a demo of resizing) For resizing, we can drag the dot at the four corners of the TextView.
narration Let us place the TextView at the top center of the Layout Editor.
Click on the top circle of the TextView and drag towards the top For that, click on the top circle of the TextView and drag towards the top.

It will now be aligned to the top of the Layout Editor.

Demo of the alignment of the TextView in the top centre of the Layout Editor Next, click on the left circle of the TextView and drag towards the left border.

Then click on the right circle of the TextView and drag towards the right border.

To remove a particular constraint, keep the mouse pointer on the circle.

You can see the constraint highlighted in red color. Click on it. It will remove the constraint.

I’ll add the right constraint as I did before.

Now the TextView is placed at the top center.

Drag the TextView and drop it in the design editor window Next let us add two more TextViews

Drag the TextView tool and place it below the Registration Form Textview in the Layout Editor.

Type the text “Welcome to Spoken Tutorial” In the attribute panel, change the text attribute of TextView as Spoken Tutorial and press Enter.

Change the Text Appearance as Material.Medium

Show a demo of the alignment Click on the top circle of this TextView.

Then drag the arrow to the bottom circle of the Registration Form TextView.

Align the left and right of the TextView to the centre of the Layout Editor as shown.

Drag the textview Likewise drag the TextView tool for the label Name.

Place it below the Spoken Tutorial TextView.

Type the text “Name” In the attribute panel, change the text attribute of TextView as Name and press Enter.
Show a demo of the alignment Align the TextView to the left and top of the Layout Editor as shown.
Demonstration:

Drag and drop the Plain Text tool below the TextView

Now click and drag the tool Plain Text from the Palette and place it below the Name TextView.

Plain text represents TextView in which you can edit the text.

Remove the Name from the text attribute Note that in the Attributes panel, it is specified as EditText.

It helps to enter any data in a text field.

In the Attributes panel, remove the text attribute of PlainText and press Enter.

Let it be empty. So that a user can enter the name during runtime.

Demonstration:

Align the EditText to the Layout Editor

Now we will add constraints for this EditText.
Change the ID of EditText to nameTextBox Change the ID of this EditText to a unique name say, nameTextBox.

Note the capital letters T and B in the name nameTextBox.

Add Button to Layout Editor

Demo of alignment.

Now we will add a Button in the Layout editor.

In the Palette, click on Buttons.

On the side panel, find a tool called Button and drag it to the center of the Layout Editor.

Adding constraints to Button tool Now add the constraints for this tool as demonstrated here.
Change the ID of this Button as mySendButton.

Change the text property to Click Here.

Now change the ID of this Button as mySendButton.

Change the text property to Click Here, which will change the text of the button in the Layout Editor.

narration only Now our design of the Registration form is ready to run.
Connect your phone Connect your Android phone to the USB port of your computer.
Click on the play button

Show the demo

In the Android Studio interface, click on the Play button at the top right, to run the app.

Follow the same steps as we did earlier to run the app on the phone.

Show the output on the phone Select the RegistrationForm icon on the phone.

We can see the design of the interface on the phone.

If you want to change the position of the tools, drag and align accordingly.

Go to Android studio Interface. Let us go back to the Android Studio interface.
Click on FirstActivity.kt file Now go to FirstActivity.kt file.

Here we will add the code for getting the text input from the user.

Type

var name = “”

In onCreate method, at the end press Enter.

We will first declare a variable “name” of type string.

Assign an empty string as shown here.

Type,

name = nameTextBox.text.toString()

Now on the next line type as shown.

This assigns the value of nameTextBox to the variable name by calling its text method.

Note that, the nameTextBox is the ID which we have given to the EditText.

This is equivalent to getText() in Java.

Now the name variable will get any input given by the user.

Adding code for Button press

Type

// handle button click//

Next we will write the code for the Button.

Type the comment statement as shown.

Whenever the button is clicked, some action has to be executed.

For this, we have a method called setOnClickListener.

Type

mySendButton.setOnClickListener{

//---code here

}

Type the code as shown.

You may see an error or warning in the code, which is highlighted in red color.

To resolve this, keep the cursor on the code and press Alt+Enter keys.

Select the appropriate option to quick fix the errors.

Errors like missing imports, variable assignments, missing reference etc are fixed using this.

Any code written between these blocks get executed when the button is clicked.

Copy and paste

Highlight according to narration

name=nameTextBox.text.toString()

Toast.makeText(applicationContext,name,Toast.LENGTH_SHORT).show()

Type the below code within the mySendButton.setOnClickListener block.

This code will store the value which the user has entered in the textbox to the variable name.

Toast is a class which provides a popup message with the given text for the given duration.

Show() method will show the output.

Text box - In Editing All the codes are available in the Code files link of this tutorial.

You can make use of it when you are practicing.

Demo to run the app Run the app to see the output in the phone.
Demo on the phone In the Android phone window, launch the RegistrationForm app.
Enter a name.

Point to the output.

I will enter a name.

Click on the button "CLICK HERE" to see the output.


The name we typed in EditText is shown as popup message.

Switch back to the Android studio Interface. Switch back to the Android studio interface.
We will create a new activity to send the text to the new page when the button is clicked.
App>> New>>Activity>>Empty Activity On the left panel, in the Project explorer, right click on the app folder.

From the menu, select New and then Activity and then Empty Activity.

Enter the name of the Activity as “SecondActivity”.

Click on Finish.

Configure Activity window pops up.

Enter the name of the activity as SecondActivity.

Keep all the remaining fields as default. Click on Finish button.

Point to the layout for the SecondActivity The IDE creates a new activity.

The code file is SecondActivity.kt and the design file is activity_second.xml

Now let us design the user interface for Second Activity.
click on activity_second.xml Click on activity_second.xml

Drag a TextView to the center of the layout editor.

Join the constraint circles as shown here.

Change the Text Appearance as Material.Large to increase the font size for better clarity.

Change the Id to welcomeTextView Change the ID property to some unique name say “welcomeTextView”.
narration only When the user clicks on the Click Here button from first activity, the second activity is launched.
Click on FirstActivity.kt. Click on FirstActivity.kt.
Write code to create intent for SecondActivity Write the code as shown below the Toast line.

New activities are launched through objects called Intent.

This function creates a intent containing the SecondActivity as parameter.

Narration only Next, we will send the data that we collected on the first activity to the second activity.
Highlight code according to narration

var intent = Intent(

this, SecondActivity::class.java).apply {

putExtra("Refername", name)

}

Type the code after the Intent object as shown.


The putExtra method adds the EditText's value to the intent.

In this method, we pass the data by giving it a specific reference name.

This is indicated by the variable Refername.

We can access this data in the new activity by giving the reference name.

This code will send our data in name variable to next activity.

Type,

startActivity(intent)

Type,

startActivity(intent)

This will start the new activity when the button is clicked.

Our task is to obtain this data in the SecondActivity.
Click on the SecondActivity.kt. Click on the SecondActivity.kt.
Write code to create new variable

var obtainedName = ""

Inside onCreate method at the end press Enter.

Create a new empty string variable as shown here.

Type,

obtainedName = intent.getStringExtra("Refername")

Next we will write code to get the name passed from FirstActivity.

Type the code as shown.

This method will save the name that was received from the FirstActivity in the variable obtainedName.

Type,

welcomeTextView.text = obtainedName

Type

welcomeTextView.text = “Welcome ” + obtainedName

Here we change the text attribute of welcomeTextView.

Run the App. Run the Kotlin app to see the output on the phone.
Point to the output Enter a name.

Click on the button “Click Here” to see the output.

We will see an output as Welcome and the name which we have given in the EditTextView.

This brings us to the end of this tutorial. Let us summarize.
Slide 5:

Summary

In this tutorial we learnt to
  • Create a Registration form with TextView, Plain Text and Buttons.
  • Run the Kotlin App to see the output in an Android phone
Slide 6:

Assignment

As an assignment,
  1. In the activity_second.xml, add two TextView in the layout editor
  2. In the first TextView, change the text attribute to Registration Form
  3. In the second TextView, change the text attribute to Spoken Tutorial
  4. Remove the existing constraint and align the tools
  5. Run the Kotlin App to see the output.
Show a screen shot After completing the assignment, your app should show the output as shown here.
Slide 7:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

Slide 8:

About workshops

The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

Slide 15:

Forum for specific questions:

Please post your timed queries in this forum.
Slide 14: Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

The Android app and the script for this tutorial was contributed by Abhishek Shah.

And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat