Kickstart your Android development journey part I
The article was originally posted at clintpaul.dev
Hi all,
First of all, apologies for the delay. I know at least a few of you were waiting for this tutorial to publish. Due to my super tight schedule last month, I couldn’t concentrate on anything else. We shall resume the journey without any more lag. If you are reading my blog for the first time or want to brush up on what we talked about last time, please click on the following links.
So, today, we will set out on a journey towards Android development. In the end, I can guarantee you that both of us will learn something out of this. I will be there to give you a helping hand if needed. Do ping me if you are stuck at anything. I know it is not easy to play around with Android development as a beginner. There are tons of stuff out there, and it will be confusing and scary at the onset. I’m trying to pick out the basic things you need to start with, and then you can connect the dots by yourself. It is not easy. But, it is not impossible as well. If I’m able to learn it, then you are more than capable.
Install Android Studio
Please go to the following link to install the Android studio. The documentation is more than enough to install it by yourself. It has options to install the IDE in Mac OS, Linux, and Windows.
Link: https://developer.android.com/studio?gclsrc=ds&gclsrc=ds&gclid=CKu6lbyUyvMCFZWWjgodTocOeQ
My Android studio version ( at the time of writing this article ): Android Studio Arctic Fox | 2020.3.1 Patch 1
What we are going to build
We are going to build a Movie decider app. The concept of this app is straightforward. If you are confused about what new movies or series to watch, then don’t look elsewhere. The movie decider app will help you to find something to watch randomly. Consider, you have a movie list like the following, [‘Inception,’ ‘Lord of the rings,’ ‘Good will hunting,’ ‘Gone baby gone,’ ‘The departed’ ]. And, each time when you click on the ‘Decide Movie’ button, it will select a movie randomly from your list of movies. Also, you can add new movies of your liking to your movie list as well. Simple enough, right? Then, let’s start building our first app. I’m super excited. 😍
PS: Movie decider is not an app that I have invented for this course. There must be several examples on the internet using the same app idea.
Create our first project on Android studio
- Open Android Studio and click on the ‘New Project’ button.
- Select ‘Empty Activity’ and click next.
3.
a. Enter the project name as ‘MovieDecider.’
b. A package name should be always unique. Try to replace the ‘.example’ with your company name. Please check this link to know more about the package name.
c. Select the preferred language as Kotlin.
d. You can choose your min SDK as you prefer. But, normally we choose min SDKs that run on the maximum number of devices. Here, Lollipop runs on at least 94% of devices. Please click on ‘help me choose’ to know more about it.
e. Click on finish.
4. Wait for the project to complete the gradle sync.
You might be confused about what is gradle and what’s its purpose? One thing I can tell you is that there are things you should have a deep understanding and there are others that you only need to know how to switch on and off. Gradle comes to the second category. For the time being, think of Gradle as something that helps Android studio convert our app into an APK. If you are a bit more curious, then check out this link to know more about it.
Introducing the basics
I hope you have completed the building of the project by now. It is time for us to get to know about the fundamentals.
- Activity
In simple words, Activity is the starting point. Whenever a user starts using your app, it can happen only with Activities help. So, the basic working and principles of an Activity are a must-have for an Android developer. Also, the navigation in our app happens through the connection between our different Activities. Open the MainActivity.Kt file.
class MainActivity : AppCompatActivity()Our MainActivity is extending (:) AppCompatActivity. Underneath the AppCompatActivity, it is an Activity only. Android extensively uses the ‘Inheritance’ concept of Object-oriented programming. So, you will see many more instances of a class inheriting another class to use its properties. If you need more info about it, refer to this link.
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main)
}onCreate() method is where you initialize your activity. There is a parameter called ‘savedInstanceState,’ which is of the type Bundle. We will come back to it later.
setContentView(R.layout.activity_main)setContentView() method helps our Activity to find its UI design. As simple as that. Upon expanding, all the Activities must have a UI designed for them in the XML design format. What setContentView() does is that it will find that design accordingly and attach to the current Activity.
2. XML file
As you might have guessed, we use XML to create the UI design. It provides lots of options to build beautiful screens. We will learn about it in detail soon. For the time being, note that all the XML files will have a root element, and you can add additional widgets( TextView, Button, etc. ) under it. Now, go to activity_main.xml.
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView
android:id="@+id/textViewSelectedMovie" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Here, we are using ConstraintLayout as the root view. We will talk about layouts and different types of root views in the later chapters.
3. AndroidManifest
Every Android project must have a manifest file. It contains all the essential details of our app. Like, package name, app icon, label, theme, etc. Also, details of all the different components present in our app like activities, services, broadcast receivers, etc. Finally, we will add permission requests to our manifest file, such as internet permission, storage permission, etc. So, it is better to think of the manifest file as a rule book or a registry of our app.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.clint.moviedecider">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.MovieDecider"><activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter>
</activity>
</application>
</manifest>
4. res folder
Please check out the ‘res’ folder on the left-hand side of the project pane. It contains many subfolders such as drawable, layout, mipmap, and values. We can use them accordingly to store and fetch the static contents needed in our app. Imagine you want to show an image in your app. We shouldn’t keep it in our code. Instead, we should give these sorts of responsibilities to our res folder. So, we can maintain them independently. So, let us think of it as a separate repository where we can store and fetch the static resources for our app.
5. build.gradle
Click on the ‘Gradle Scripts’ and expand it. There are two types of build gradle files. One is for the project, and the other is for the module.
Project-level build.gradle
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
google()
mavenCentral()
}
dependencies {
classpath "com.android.tools.build:gradle:7.0.1"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.30-RC"
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}An app can have multiple modules. So, there is a chance that each of those modules has different needs. But, if all of those modules have some common requirement, they should be declared in the project-level build.gradle. One such requirement is the Kotlin plugin.
Module-level build.gradle
plugins {
id 'com.android.application'
id 'kotlin-android'
}
android {
compileSdk 30
defaultConfig {
applicationId "com.clint.moviedecider"
minSdk 21
targetSdk 30
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures {
viewBinding = true
}
}
dependencies {
implementation 'androidx.core:core-ktx:1.6.0'
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.1'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}Currently, our app has only one module. So, we have only one module-level build.gradle file. We define many details of things like SDK, plugins, build types, etc. Also, most importantly, we define android or third-party library details here as dependencies. We will use many such libraries soon.
Let’s do some coding
- Update some colors
I’m going to add some new colors to our app. Go to this link to pick some nice colors.
I have picked the following colors,
Cyan primary: #b2ebf2
Cyan primary dark: #81b9bf
Cyan primary light: #e5ffff
Now, let’s add these colors to our colors.xml file. res->values->colors.xml
PS: Honestly, I’m not a guy with great aesthetic sense. It is better you choose your own colors.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="cyan_primary">#b2ebf2</color>
<color name="cyan_primary_dark">#81b9bf</color>
<color name="cyan_primary_light">#e5ffff</color>
</resources>2. Design our XML
- Open the activity_main.xml file. I’m going to change the name of the text from ‘hello world’ to a movie name.
Note: Please make sure you are at the design tab and enable the attributes tab. - Click on the text view ‘hello world’ and, it will show some attributes available for that particular widget on the attributes screen. Find the attribute ‘text’ under the ‘common attributes.’ And, give it a name. I’m naming it as ‘Godfather.’
- Next, change its text size and color. Find the attributes, ‘textSize’ and ‘textColor.’ Give it a ‘textSize’ of 30 sp and the ‘textColor’ as black.
- Now, let's customize its font style as well. Find the attribute named, ‘fontFamily’ and scroll down and click on ‘More fonts…’ Find a nice font of your liking and click ‘Ok.’ I chose the font named, ‘Biriyani’ semi-bold style.
- If we have to use this text view in our code, then we have to give it some unique ID. Find the ‘id’ attribute and give it a name. I have named it, ‘textViewSelectedMovie.’ A good rule of thumb is to follow the format, ‘widget name + description.’ Here, the widget is a ‘text view’ and the description can be it is the name of the selected movie.
- Finally, we are going to change the whole background color of our Main activity screen. Click on the outer part of our text view, and it will select our constraint layout and show its attributes. Find the attribute named, ‘background.’ Change its color to cyan_primary_light just like you changed the text color earlier.
Our app will look like this now,
Wow. This is great. At the end of the day, as I said at first, we learned something new. I think this is where we should take a break. I’ll finish writing the second part as soon as possible. Meanwhile, you can play around with it and maybe do some research with all the new info you have gathered.
If you want the source code, please go to this GitHub repo. The part_1 branch has the complete code which we have discussed here.
Don’t forget to ping me if you are stuck.
Always remember this quote by Robin Sharma,
Success lies in a masterful consistency around the fundamentals.
