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)
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. |