Android-app-using-Kotlin/C2/Getting-started-with-Hello-World-app/English-timed

From Script | Spoken-Tutorial
Revision as of 16:11, 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 Getting started with Hello World App.
00:07 In this tutorial we will learn to
00:10 Explore the Android Studio interface
00:13 Create a simple Kotlin App
00:16 Run the App to see the output in an Android phone
00:21 For this tutorial, I am using
00:24 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:39 To follow this tutorial, you should have working knowledge of Java programming language.
00:46 You should also have Android Studio installed on your system.
00:51 If not, please refer to the relevant tutorials in this series on this website.
00:57 Let us open Android Studio.
01:00 For this, open the terminal by pressing Ctrl, Alt and T keys simultaneously.
01:08 Go to the folder where Android Studio has been installed.
01:13 Type dot forward slash studio dot sh and press Enter.
01:22 We can see Android Studio has launched.
01:26 If you are an Ubuntu Linux user, you can lock Android Studio to the launcher.
01:32 Right-click on the Android Studio icon in the left launcher panel.
01:38 Select Lock to Launcher.
01:41 Next time, we can open Android Studio by double-clicking on the icon in the launcher.
01:48 If you are a Windows user, then the Android Studio icon will be visible on the Desktop itself.
01:55 Click on Start a new Android Studio project to create a new project.
02:01 Create Android Project window appears where we have to enter certain details.
02:08 Enter a new application name.
02:11 By default, it shows My Application.

I’ll change this text to Hello World App.

02:20 The next field is Company Domain.
02:23 By default, it shows username dot example dot com.
02:28 Here it shows spoken dot example dot com.
02:33 If you wish to change, then you can give your own domain name as per your preference.
02:39 Next is Project location.
02:42 We will keep the default value.
02:45 Check the option Include Kotlin support.
02:49 It helps Android Studio to download plugins, dependencies and configure the project with Kotlin.
02:57 Then click on the Next button at the bottom.
03:02 In the Target Android Devices window, check the Phone and Tablet checkbox.
03:08 This option provides a way to run the apps on handset Android devices very easily and quickly.
03:16 Click on the Next button at the bottom of the window.
03:20 The next window is to choose the type of Activity that you want to select for the project.
03:27 I’ll select Empty Activity and then click on the Next button at the bottom of the window.
03:35 Now, let us create a new Activity.
03:39 In the Activity Name field, I will type FirstActivity.
03:44 The Layout Name also changes with respect to the Activity Name.
03:49 Keep all the options as default. And then click on the Next button at the bottom of the window.
03:57 All the components for the layout gets installed now.
04:02 Lastly, click on the Finish button.
04:06 Now Android Studio starts building the first project.
04:11 Wait until it finishes the process.
04:15 Make sure that Internet connectivity is available while building a project.
04:22 Now the building of project is completed.
04:25 You can see a pop-up window which shows Tip of the day.
04:30 Uncheck the checkbox, if you don’t want to see this message next time when you open the project.
04:37 Then click on the Close button of this pop-up window.
04:42 Notice the message at the bottom of the window and wait until the loading is completed.
04:48 Now the IDE window opens.
04:51 The left panel is called the Project Explorer.
04:55 It contains the project code files and the resources required for the User Interface.
05:01 The right panel is called the Code Editor window.
05:05 Here, we write the code required for the App.
05:09 The bottom panel will show the status of building and running the project.
05:14 You may also get some errors while building the project.
05:18 Read timed out error is due to drop or break in the Internet connection.
05:24 So the building of the project may not get completed.
05:28 In such cases, click on the Try again link at the top right of the window, to build it again.
05:35 For any other error,

Click on the File menu in the menu bar and Select Invalidate Caches/ Restart menu.

05:44 The Android Studio interface is ready for us to work.
05:49 The triangular green button at the top right, is the Run button to run the App.
05:55 This button will be grey in colour, if there is any error or if the module is still building.
06:02 FirstActivity.kt is the Kotlin file which is created automatically.
06:09 This contains the pre-written code to load the default layout.
06:14 Next click on the activity underscore first dot xml tab.
06:20 The Layout Editor appears when you open an XML layout file.
06:25 It contains a TextView element with the text "Hello world!".
06:30 We can see different panels in the Layout Editor.
06:34 At the top left is the Palette.
06:37 It has some common tools such as Text, Buttons, Widgets, etc.
06:45 Each tool has different types of views.
06:49 For example, Text has TextView, Plain Text, Password, etc.
06:57 You can drag and drop the tools in the Layout Editor to design the User interface.
07:03 Below the Palette is the Component Tree.

This helps us to view the hierarchy of the layout.

07:10 The middle panel is called the Design Editor.
07:14 Click on the blue color icon at the top left corner.
07:19 We can see three options here - Design, Blueprint, Design+Blueprint.
07:27 The view can be changed with these options.
07:31 Let us select the option Design.
07:34 Click on the Hello World TextView.
07:37 The right panel is called the Attributes window.
07:41 Here we can set the attributes for the selected view.
07:46 In our case, we can see a default TextView for HelloWorld.
07:52 Attributes such as ID, Layout width, Layout height, Text for the Textview can be set here.
08:02 Now the default setting for HelloWorld App is ready to run.
08:08 Next we will see how to setup the Android phone for testing and debugging.
08:15 Check for your phone model and
08:17 Search in the Internet on how to enable USB debugging.
08:22 Follow the steps provided there and do the setup.
08:27 Take your Android phone in which you want to run the app.
08:31 Open Settings in your Android phone.
08:34 Then go to About Phone section.
08:38 Click on the MIUI version seven times.
08:43 Or until you see a message You are a developer!
08:48 Go back to Settings and find a new option under Additional Settings called Developer options.
08:57 Open Developer options.
09:00 Go to the Debugging panel and find USB debugging option.
09:06 Enable the option.
09:08 On your phone, a pop-up message Allow USB debugging appears.
09:15 Click on the OK button.
09:18 Enable the option Install via USB.
09:23 Now connect your Android phone to your laptop using a USB cable.
09:29 You should see a notification on your phone which says ‘USB debugging connected’.
09:36 In the Android Studio interface, click on the Run button.
09:41 On your phone, a pop message Allow USB debugging appears.
09:47 Select the checkbox Always allow from this computer.

Then click on the OK button.

09:55 In the Android Studio interface, Connected Devices pop up window appears.
10:01 Select your phone from the list in the Connected Devices window.
10:06 Click on the Ok button at the bottom.
10:10 Instant Run dialog box appears.
10:14 Select Proceed without Instant Run button.
10:19 Install via USB pop up window appears on your phone.
10:24 Select Remember my choice and then select Install.
10:31 In the Android Studio interface, we can see the message Gradle build finished at the bottom of the window.
10:40 Now Hello World App is successfully installed and launched on the phone.
10:46 Click on the icon to see the output in an Android phone.
10:51 Let us change the position of the text box Hello World and see the changes in the app.
10:57 Drag and drop the text box in another place of the Design window.
11:03 Run the App again to see the difference.
11:09 Next we will see how to change the default text Hello World to Welcome to Spoken Tutorial.
11:16 Click on the Hello World TextView in the Design Editor.
11:21 Attributes window appear on right side of the Design Editor.
11:26 Now change the ID field to some unique name, say myFirstTextView and press Enter.
11:34 Click on the tab FirstActivity dot kt to open the Kotlin file.
11:40 In the onCreate method, at the end, add a new line by pressing the Enter key.
11:47 Type myFirstTextView dot , the IDE will show all the attributes of the TextView.
11:55 Select text from the given suggestions.
11:58 Then type is equal to within double quotes Welcome to Spoken Tutorial.
12:05 It sets the text attribute of TextView and assigns a new string dynamically.
12:12 Run the App again to see the changes.
12:17 We can see Welcome to Spoken Tutorial.
12:21 This brings us to the end of this tutorial. Let us summarize.
12:27 In this tutorial, we have learnt to

Explore the Android Studio interface

12:33 Create a simple Kotlin App
12:36 Run the App to see the output in an Android phone
12:41 As an assignment,

Change the text of TextView to “Thank you”.

12:47 Run the App to see the changes.
12:51 The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

12:59 The Spoken Tutorial Project Team conducts workshops and gives certificates online tests

For more details, please write to us.

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

More information on this mission is available at this link.

13:28 The Android app and the script for this tutorial was contributed by Abhishek Shah.
13:35 And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.

Contributors and Content Editors

PoojaMoolya