Android-app-using-Kotlin/C2/Getting-started-with-Hello-World-app/English
| Visual Cue | Narration |
| Slide 1: | Welcome to the spoken tutorial on Getting started with Hello World App. |
| Slide 2:
Learning Objectives |
In this tutorial we will learn to
|
| Slide 3:
System requirement |
For this tutorial, I am using
|
| Slide 4:
Pre-requisites |
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. |
| Press Ctrl,Alt, t keys | Let us open Android Studio.
For this, open the terminal by pressing Ctrl, Alt and T keys simultaneously. |
| Type,
cd android-studio/bin |
Go to the folder where Android Studio has been installed. |
| Type ./studio.sh >> Enter | Type ./studio.sh and press Enter. |
| We can see Android Studio has launched. | |
| If you are an Ubuntu Linux user, you can lock Android Studio to the launcher. | |
| Right click on the Android Studio icon >> Select Lock from launcher. | Right-click on the Android Studio icon in the left launcher panel.
Select Lock to Launcher. |
| Point to Android Studio in the launcher. | Next time, we can open Android Studio by double-clicking on the icon in the launcher. |
| If you are a Windows user, then the Android Studio icon will be visible on the Desktop itself. | |
| Click on Start a new Android Studio project | Click on Start a new Android Studio project to create a new project. |
| Create Android Project window appears | Create Android Project window appears where we have to enter certain details. |
| Type Hello World App in application name | Enter a new application name.
By default, it shows My Application. I’ll change this text to Hello World App. |
| Point to the company domain | The next field is Company Domain.
By default, it shows <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. |
| Point to Project Location | Next is Project location.
We will keep the default value. |
| Check Include kotlin support | Check the option Include Kotlin support.
It helps Android Studio to download plugins, dependencies and configure the project with Kotlin. |
| Click on Next button | Then click on the Next button at the bottom. |
| Check the Phone and Tablet check box. | 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. |
| Click on Next button | Click on the Next button at the bottom of the window. |
| Point to Add an Activity to mobile | The next window is to choose the type of Activity that you want to select for the project. |
| Select Empty Activity >> click on the Next button. | I’ll select Empty Activity and then click on the Next button at the bottom of the window. |
| Now, let us create a new Activity. | |
| Activity Name field >> type FirstActivity | In the Activity Name field, I will type FirstActivity. |
| Point to Layout Name | The Layout Name also changes with respect to the Activity Name.
Keep all the options as default. |
| Click on Next button | And then click on the Next button at the bottom of the window. |
| Click on Finish button | All the components for the layout gets installed now.
Lastly, click on the Finish button. |
| Point to the status bar to show the building process | 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. |
| Point to the window | Now the building of project is completed.
You can see a pop-up window which shows Tip of the day. |
| Uncheck the checkbox for Tip of the day | Uncheck the checkbox, if you don’t want to see this message next time when you open the project. |
| Click on the Close button | Then click on the Close button of this pop-up window. |
| Point to the bottom of the window | Notice the message at the bottom of the window and wait until the loading is completed. |
| Point to IDE window | Now the IDE window opens. |
| Point to Project Explorer | The left panel is called the Project Explorer.
It contains the project code files and the resources required for the User Interface. |
| Point to Code Editor window | The right panel is called the Code Editor window.
Here, we write the code required for the App. |
| Point to the bottom panel | The bottom panel will show the status of building and running the project. |
| You may also get some errors while building the project. | |
| Slide:5
Error: Read timed out / Gradle project sync failed |
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. |
| Slide:5
Error: Read timed out / Gradle project sync failed |
For any other error,
|
| The Android Studio interface is ready for us to work. | |
| Point to the Run button | 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. |
| Point to the FirstActivity.kt file | FirstActivity.kt is the Kotlin file which is created automatically. |
| Highlight the code | This contains the pre-written code to load the default layout. |
| Click on activity_first.xml tab | Next click on the activity_first.xml tab. |
| The Layout Editor appears when you open an XML layout file. | |
| Point to "Hello world!" | It contains a TextView element with the text "Hello world!". |
| Point to the Palette and the tools as per narration
Point to the tools and the views as per narration |
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. |
| Demo of drag and drop | You can drag and drop the tools in the Layout Editor to design the User interface. |
| Point to the Component Tree | Below the Palette is the Component Tree.
This helps us to view the hierarchy of the layout. |
| Point to the Design Editor | The middle panel is called the Design Editor. |
| Click on the blue color icon at the top right corner. | Click on the blue color icon at the top left corner. |
| Point to Design, Blueprint, Design+Blueprint | We can see three options here - Design, Blueprint, Design+Blueprint. |
| Select the option Design | The view can be changed with these options.
Let us select the option Design. Click on the Hello World TextView. |
| Point to the Attributes window and different attributes | The right panel is called the Attributes window.
Here we can set the attributes for the selected view. |
| Point to TextView for HelloWorld. | In our case, we can see a default TextView for HelloWorld. |
| Point to the attributes as per narration | Attributes such as ID, Layout_width, Layout_height, Text for the Textview can be set here. |
| Now the default setting for HelloWorld App is ready to run. | |
| Next we will see how to setup the Android phone for testing and debugging. | |
| Slide:
Enable USB debugging on Android Phone |
|
| Image: Android phone screen | Take your Android phone in which you want to run the app. |
| Phone Settings:
Select Settings>>About Phone>> Build number |
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! |
| Select Settings>>Developer options | Go back to Settings and find a new option under Additional Settings called Developer options. |
| Open Developer options. | Open Developer options. |
| Debugging>> USB debugging | Go to the Debugging panel and find USB debugging option. |
| Enable the option
Pop-up message Allow USB debugging appears. |
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. |
| Connect your Android phone to your laptop using a USB cable | Now connect your Android phone to your laptop using a USB cable. |
| Image: Android phone screen
Point to the message |
You should see a notification on your phone which says ‘USB debugging connected’. |
| Click on the Run button. | In the Android Studio interface, click on the Run button. |
| Select the checkbox Always allow from this computer >> click on OK | On your phone, a pop message Allow USB debugging appears.
Select the checkbox Always allow from this computer. Then click on the OK button. |
| Select the Phone from the list | 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. |
| Instant Run dialog box >> Select Proceed without Instant run | Instant Run dialog box appears.
Select Proceed without Instant Run button. |
| Install via USB pop up window appears on your phone. | |
| Select Remember my choice | Select Remember my choice and then select Install. |
| Point to the message at the bottom | In the Android Studio interface, we can see the message Gradle build finished at the bottom of the window. |
| Show the output | Now Hello World App is successfully installed and launched on the phone.
Click on the icon to see the output in an Android phone. |
| Let us change the position of the text box Hello World and see the changes in the app. | |
| Drag and drop the text box | Drag and drop the text box in another place of the Design window. |
| Run the App again | Run the App again to see the difference. |
| Next we will see how to change the default text Hello World to Welcome to Spoken Tutorial. | |
| Click on Hello World TextView | Click on the Hello World TextView in the Design Editor. |
| Attributes window appears | Attributes window appear on right side of the Design Editor. |
| Change the ID field to myFirstTextView | Now change the ID field to some unique name, say myFirstTextView, and press Enter. |
| Click on the tab FirstActivity.kt | Click on the tab FirstActivity.kt to open the Kotlin file. |
| click the cursor at the end of the onCreate method and press Enter key | In the onCreate method, at the end, add a new line by pressing the Enter key. |
| Type
myFirstTextView. |
Type myFirstTextView dot(.) = |
| Point to all the attributes >> select text | The IDE will show all the attributes of the TextView.
Select text from the given suggestions. |
| Type =”Welcome to spoken tutorial” | 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. |
| Run the App | Run the App again to see the changes.
We can see Welcome to Spoken Tutorial. |
| This brings us to the end of this tutorial. Let us summarize. | |
| Summary | In this tutorial, we have learnt to
|
| Assignment | As an assignment,
1. Change the text of TextView to “Thank you”. 2. Run the App to see the changes. |
| Slide 12:
About Spoken Tutorial project. |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
| Slide 13:
Spoken Tutorial 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:
Acknowledgement |
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. |
