Built your simple Android App with Kotlin

 Developing an interactive Android application with Kotlin programming language is one of the most popular ways to develop an app. Kotlin is a programming language that runs on the Java Virtual Machine and is interoperable with Java. Kotlin officially supports Java and is one of the most preferred languages for android app development. 

In this article, we have given Kotlin tutorials for android app development in simple steps. Follow the step-by-step guide to building a simple and functional application. This will also give you an idea of how to use the Kotlin program to develop a user-friendly application. Kotlin is a preferred programming language among Android developers. 

Step 1: Install Android Studio

                                                  Source: instructables.com

• First, you are required to install Android Studio to get started.

• Use the instructions to download and install Android Studio to your system and build your first mobile application. 

Step 2: Create your first project

                                             Source: developer.android.com

                                            Source: developer.android.com

• Start Android Studio

• A new dialog box will open, click on the ‘Start a new Android Studio Project’ option.

• Click on the ‘Basic Activity’ option and then click ‘Next.’

• Give your application a name like “My First App.” 

• Check whether the programming language is set to Kotlin. 

• Leave all the other activities as default. 

• Click on the ‘Finish’ button. 

Note: Now that you created a new project, you must go through the menu and activities to understand the format better. There are many elements in there hence explore the layout and project structure first. This will help your Android app development with Kotlin more interactive. 

                                                                Source: developer.android.com

Step 3: Create a virtual device (emulator)

                                              Source: developer.android.com

• Click on ‘Tools’ and navigate to ‘AVD Manager’ in the Android Studio. 

• Now, click on the ‘+Create Virtual Device’ button. In case you have already created a virtual device before, it will show all the devices and ‘+Create Virtual Device’ at the bottom. 

• Select the device definition like ‘Pixel 2’ and click on the ‘Next’ button. 

• Select the latest release from the ‘Recommended’ tab in the ‘System Image.’ 

• If you see the download link next to the latest release then you are yet to download it. After downloading, click on ‘Next.’

• Accept the defaults and click ‘Finish.’

Step 4: Run your application on a new emulator

•  In Android Studio, go to ‘Run’ and then ‘Run app’ or you just go to the toolbar and tap on the ‘Run’ icon. 

• Click on ‘Select Device’ in the ‘Run’ icon under ‘Available devices’ and choose the virtual device that you just configured. 

• The emulator will boot similarly to that of the physical device. The boots might take a while depending on the speed of your computer. 

Note: You can run this app on any device you want but make sure to run it on an Android device. This is the simplest Kotlin app example with a few icons or widgets you selected in the template. 

Step 5: Use the Layout editor

• On the left side of the Project panel, click on App> Res> Layout. Open the layout folder. 

• Click on the ‘fragment_first.xml’ file and open it.  

• In the top right corner of the Design above ‘Attributes’ you could see a three-lined icon that looks like the below-given image. 

• You can select the different modes which take into account your work style and screen size. You can also switch between ‘Design’ and ‘Code’ or stay in the ‘Split’ view. 

• Use ‘+’ and ‘-’ and set your screen size present at the bottom of the Design editor. 

• Select the Design and Blueprint option in the layout menu. 

• Change the orientation of the layout by using the orientation icon. This will allow you to test the layout that fits your app. 

• Go to the ‘Device menu’ to review the orientation of each device. 

• Review ‘Component Tree’ in ‘fragment_first.xml’. If it is not showing in the tree switch to ‘Design’ instead of ‘Code’ or ‘Split.’ 

Step 6: Explore the hierarchy and change the property value

                                                 Source: developer.android.com

• In the tree, the view hierarchy view will be a ‘ContraintLayout’ view.

• Below is the XML code format of the root element.

<androidx.constraintlayout.widget.ConstraintLayout

  ... >

   <TextView

      ...  />

   <Button

      ...  />

</androidx.constraintlayout.widget.ConstraintLayout>

• The below will help you examine ‘TextView’ element.

<TextView

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:text="Hello first fragment"

   ... />

• Click on the string property to change the text into a string. 

android:text="@string/hello_first_fragment"

• Right-click on the property and tap to ‘Go To’ then ‘Usage’ or ‘Declaration.’

<string name="hello_first_fragment">Hello first fragment</string>

• Change the value of the string to “Hello World!”

You can make these changes in the ‘Attribute’ section and run your app on an Android device and test whether the changes are visible or not. 

You can also choose the color code and add it to the Attributes to make your app more presentable. 

                                                 Source: developer.android.com