View source for Android-app-using-Kotlin/C2/Getting-started-with-Hello-World-app/English


{| style="border-spacing:0;"
| style="background-color:#c0c0c0;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Visual Cue'''
| style="background-color:#c0c0c0;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Narration'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 1:

| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Welcome to the spoken tutorial on''' Getting started with Hello World App.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 2:

Learning Objectives
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In this tutorial we will learn to

* Explore the '''Android Studio interface'''
* Create a simple '''Kotlin App'''
* Run the '''App''' to see the output in an '''Android''' phone

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 3:

System requirement
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| For 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'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 4:

Pre-requisites

| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| To follow this tutorial, you should have working knowledge of '''Java''' programming language.

You should also have '''Android Studio''' installed on your system.

If not, please refer to the relevant tutorials in this series on this website.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Press Ctrl,Alt, t keys
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.

For this, open the '''terminal''' by pressing '''Ctrl, Alt''' and '''T''' keys simultaneously.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Type,'''

cd '''android-studio/bin'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Go to the folder where '''Android Studio '''has been installed.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Type ./studio.sh >> Enter
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Type''' ./studio.sh''' and press '''Enter'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| We can see '''Android Studio''' has launched.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| If you are an '''Ubuntu Linux user''', you can lock '''Android Studio''' to the '''launcher'''. 

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Right click on the '''Android Studio '''icon >> Select '''Lock from launcher.'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Right-click on the '''Android Studio icon '''in the left '''launcher '''panel.

Select '''Lock to Launcher.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''Android Studio '''in the launcher.
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Next time, we can open '''Android Studio''' by double-clicking on the '''icon '''in the '''launcher'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| If you are a '''Windows user''', then the '''Android Studio icon '''will be visible on the '''Desktop '''itself.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''Start a new Android Studio project'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''Start a new Android Studio project''' to create a new '''project'''. 

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Create Android Project '''window appears
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Create Android Project '''window appears where we have to enter certain details.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Type '''Hello World App '''in application name
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Enter a new '''application''' name. 

By default, it shows '''My Application.'''

I’ll change this text to '''Hello World App.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the company domain
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The next field is '''Company Domain'''. 

<nowiki>By default, it shows <</nowiki>'''username>.example.com.'''

Here it shows '''spoken.example.com.'''

If you wish to change, then you can give your own '''domain''' name as per your preference.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to Project Location
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Next is '''Project location.'''

We will keep the default value.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Check '''Include kotlin support'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Check the option '''Include Kotlin support.'''

It helps''' Android Studio''' to download '''plugins, dependencies''' and configure the '''project''' with '''Kotlin.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''Next '''button
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Then click on the '''Next '''button at the bottom.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Check the '''Phone and Tablet '''check box.
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In the '''Target Android Devices '''window, check the '''Phone '''and''' Tablet '''checkbox.

This option provides a way to run the '''apps''' on '''handset Android devices''' very easily and quickly.
|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''Next '''button
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the '''Next''' button at the bottom of the window.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''Add an Activity to mobile'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The next window is to choose the type of '''Activity''' that you want to select for the '''project'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Select '''Empty Activity >> '''click on the '''Next''' button.
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| I’ll select '''Empty Activity '''and then click on the '''Next''' button at the bottom of the window.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now, let us create a new '''Activity'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Activity Name''' field >> type '''FirstActivity '''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In the '''Activity Name''' field, I will type '''FirstActivity.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to Layout Name
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The '''Layout Name''' also changes with respect to the '''Activity Name.'''

Keep all the options as default.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''Next''' button
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| And then click on the '''Next''' button at the bottom of the window.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''Finish '''button
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| All the components for the layout gets installed now.

Lastly, click on the '''Finish''' button.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the status bar to show the building process
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now '''Android Studio''' starts '''building''' the first '''project'''.

Wait until it finishes the process. 

Make sure that '''Internet connectivity''' is available while '''building''' a '''project'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the window
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now the '''building''' of '''project''' is completed.

You can see a pop-up window which shows '''Tip of the day.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Uncheck the checkbox for '''Tip of the day'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Uncheck the checkbox, if you don’t want to see this message next time when you open the '''project'''.
|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the '''Close '''button
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Then click on the '''Close''' button of this pop-up window.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the bottom of the window
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Notice the message at the bottom of the window and wait until the loading is completed.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''IDE''' window
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now the '''IDE''' window opens.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''Project Explorer'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The left panel is called the '''Project Explorer.'''

It contains the '''project code files''' and the '''resources''' required for the '''User Interface'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''Code Editor '''window
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The right panel is called the '''Code Editor '''window.

Here, we write the code required for the '''App'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the bottom panel
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The bottom panel will show the status of '''building''' and '''running''' the '''project'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| You may also get some errors while '''building''' the '''project'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide:5 

Error: Read timed out /

Gradle project sync failed
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Read timed out''' error is due to drop or break in the '''Internet connection'''.

So the '''building''' of the '''project '''may not get completed.

In such cases, click on the '''Try again''' link at the top right of the window, to '''build''' it again.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide:5 

Error: Read timed out /

Gradle project sync failed
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| For any other error,

* Click on the '''File''' menu in the menu bar and
* Select '''Invalidate Caches/ Restart '''menu.
|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The '''Android Studio interface '''is ready for us to work. 

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the '''Run''' button
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The triangular green button at the top right, is the''' Run '''button to run the '''App'''.

This button will be grey in colour, if there is any error or if the '''module''' is still '''building'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the '''FirstActivity.kt '''file
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''FirstActivity.kt '''is the '''Kotlin''' file which is created automatically.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Highlight the code
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| This contains the pre-written code to load the default '''layout'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''activity_first.xml''' tab
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Next click on the '''activity_first.xml''' tab.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The''' Layout Editor''' appears when you open an '''XML layout''' file.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''"Hello world!"'''

| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| It contains a '''TextView element '''with the text '''"Hello world!".'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the Palette and the tools as per narration

Point to the tools and the views as per narration

| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| We can see different panels in the '''Layout Editor'''.

At the top left is the '''Palette'''. 

It has some common tools such as '''Text, Buttons, Widgets,''' etc.

Each tool has different types of '''views'''. 

For example, '''Text''' has '''TextView, Plain Text, Password, '''etc.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Demo of drag and drop
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| You can drag and drop the tools in the '''Layout Editor '''to design the '''User interface'''.
|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the Component Tree
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Below the '''Palette''' is the '''Component Tree.'''

This helps us to view the hierarchy of the '''layout'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the Design Editor
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The middle panel is called the '''Design Editor.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the blue color icon at the top right corner.
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the blue color icon at the top left corner.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''Design, Blueprint, Design+Blueprint'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| We can see three options here - '''Design, Blueprint, Design+Blueprint.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Select the option '''Design'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The view can be changed with these options. 

Let us select the option '''Design'''.

Click on the '''Hello World TextView.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the Attributes window and different attributes
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The right panel is called the '''Attributes''' window.

Here we can set the '''attributes''' for the selected '''view'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to '''TextView''' for '''HelloWorld'''. 

| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In our case, we can see a default '''TextView''' for '''HelloWorld'''. 

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the attributes as per narration
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Attributes''' such as '''ID, Layout_width, Layout_height, Text''' for the '''Textview''' can be set here.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now the default setting for''' HelloWorld App''' is ready to '''run'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Next we will see how to setup the '''Android''' phone for testing and debugging.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide:

Enable USB debugging on Android Phone
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
* Check for your '''phone model''' and 

* Search in the '''Internet''' on how to enable '''USB debugging'''. 

* Follow the steps provided there and do the '''setup'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Image: Android phone screen
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Take your '''Android''' phone in which you want to run the '''app'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Phone Settings:

Select Settings>>About Phone>> Build number
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Open '''Settings''' in your '''Android''' phone. 

Then go to '''About Phone''' section.

Click on the '''MIUI version''' seven times.

Or until you see a message '''You are a developer!'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Select Settings>>Developer options
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Go back to '''Settings''' and find a new option under '''Additional Settings''' called '''Developer options.'''
|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Open Developer options. 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Open '''Developer options. '''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Debugging>> USB debugging
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Go to the '''Debugging''' panel and find '''USB debugging''' option.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Enable the option 

Pop-up message '''Allow USB debugging '''appears.
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Enable the option.

On your phone, a pop-up message '''Allow USB debugging '''appears.

Click on the '''OK '''button.

Enable the option '''Install via USB.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Connect your '''Android phone''' to your laptop using a '''USB''' cable
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now connect your '''Android phone''' to your '''laptop''' using a '''USB cable'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Image: Android phone screen

Point to the message
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| You should see a notification on your phone which says ‘'''USB debugging connected'''’.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the '''Run''' button.
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In the '''Android Studio interface''', click on the '''Run''' button.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Select the checkbox '''Always allow from this computer '''>> click on '''OK'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| On your phone, a pop message '''Allow USB debugging''' appears.

Select the checkbox '''Always allow from this computer.'''

Then click on the '''OK '''button.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Select the Phone from the list
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In the '''Android Studio interface, Connected Devices '''pop up window appears.

Select your phone from the list in the '''Connected Devices''' window.

Click on the '''Ok''' button at the bottom.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Instant Run''' dialog box >> Select '''Proceed without Instant run'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Instant Run''' dialog box appears.

Select '''Proceed without Instant Run '''button.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Install via USB''' pop up window appears on your phone.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Select '''Remember my choice'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Select '''Remember my choice '''and then select '''Install.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to the message at the bottom
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In the '''Android Studio interface, '''we can see the message '''Gradle build finished '''at the bottom of the window.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Show the output
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now '''Hello World App''' is successfully installed and launched on the phone.

Click on the icon to see the output in an '''Android''' phone.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Let us change the position of the text box '''Hello World''' and see the changes in the '''app'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Drag and drop the text box
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Drag and drop the text box in another place of the '''Design''' window.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Run the '''App''' again
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Run the '''App''' again to see the difference.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Next we will see how to change the default text '''Hello World''' to '''Welcome to Spoken Tutorial.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on '''Hello World''' '''TextView'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the '''Hello World TextView''' in the '''Design Editor'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Attributes '''window appears
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| '''Attributes '''window appear on right side of the '''Design Editor'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Change the '''ID''' field to '''myFirstTextView'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Now change the '''ID''' field to some unique name, say '''myFirstTextView,''' and press '''Enter'''.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the tab '''FirstActivity.kt''' 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Click on the tab '''FirstActivity.kt''' to open the '''Kotlin''' file.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| click the cursor at the end of the '''onCreate method '''and press Enter key
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In the '''onCreate method''', at the end, add a new line by pressing the '''Enter''' key.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Type

'''myFirstTextView.'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Type '''myFirstTextView dot(.) ='''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Point to all the attributes >> select '''text'''
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The '''IDE''' will show all the '''attributes''' of the '''TextView'''. 

Select '''text '''from the given suggestions.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Type =”Welcome to spoken tutorial”
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Then type '''is equal to''' within double quotes''' Welcome to Spoken Tutorial'''.

It sets the '''text attribute''' of '''TextView''' and assigns a new '''string''' dynamically.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Run the App
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Run the '''App''' again to see the changes.

We can see '''Welcome to Spoken Tutorial.'''

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| This brings us to the end of this tutorial. Let us summarize.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Summary
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| In this tutorial, we have learnt to

* Explore the '''Android Studio interface'''
* Create a simple '''Kotlin App'''
* Run the '''App''' to see the output in an '''Android''' phone

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Assignment
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| As an assignment,

1. Change the text of '''TextView''' to “'''Thank you”.'''

2. Run the '''App''' to see the changes.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 12:

About Spoken Tutorial project.
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 13:

Spoken Tutorial workshops
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| The''' Spoken Tutorial Project''' Team conducts workshops and gives certificates.

For more details, please write to us.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 15:

Forum for specific questions:

| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| * Please post your timed queries in this forum. 

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 14:

Acknowledgement
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 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.

|}