Best way to learn IMO is to just do it!
Step 1. Download and install Android Studio onto your machine, use the link below.
https://developer.android.com/studio
Also take note of the website, there is so much learning to be had here: https://developer.android.com/
Step 2: Start the Android Studio application.
Select, Create New Project -> Empty Project -> Name your Project (leave everything else as is), select Finish. Android studio now starts to gather all the necessary files and generates all the required files and folders for your project.
Step 3: Run the generated mobile app. Simply click on the ‘Play’ button in the top toolbar, this launches a mobile emulator and runs the app. It should look something like this:
Congratulations, you just made an Android Mobile Application!
Not impressed? Well, i didn’t want to impress you, I wanted you to build an app, which is what you did. Now that it’s built and running, let’s see how this app actually got made.
Laying it Out
Let’s see where the actual layout is coming from. Where is the bit we can actually see on the screen in Android Studio? That would be within the layout folder.
We have a file nested away called activity_main.xml, Android Studio automatically generated this layout file for us as we chose to setup a new project with an Empty Activity. Select the file and we can see a visual representation of the view.
Not much, but fine for demonstration purposes. Android studio has lots of ‘widgets’ which you can simple drag and drop into the view allowing you to create a view in minutes. Although there is a better, more accurate way, change the view type to ‘code’ and you can see how the view is made up.
<?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: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>Now, if you’re new to code, or new to XML, don’t panic! This is completely normal. Pretty simple actually, let me explain.
XML or Extensible Markup Language is, well, a markup language. Unlike programming languages where they define interactions and behaviours, a markup language only describes data, in this case we’re describing the layout.
But what does all that code mean?
1 -> the version of xml and it is encoded using UTF-8 Unicode.
2 -> A view type of Constraint Layout, opening tag.
3 to 5 -> Android Studio auto imports these references when needed. Tools attributes and prevention of namespace collision.
6 & 7 -> The width and height of the view both match the parent, in this case that means matches the width and height of the device.
8 – > Adding context to the view. This view is inflated and controlled by the MainActivity.class.
9 -> Another view (widget), within the Constraint Layout, the opening tag for TextView. This simply adds text to the view.
10 & 11 -> The height and width of the TextView. ‘wrap_content’, simply means wrap the width and height no more than the view requires.
12 – > The text to display.
13 to 16 -> These are Constraints. As the TextView is nested within the Constraint Layout, we are required to add constraints to the TextView, otherwise it wouldn’t know where to place itself in the view. By constraining the start, end, top and bottom of the view, the TextView gets place in the centre of its parent (the parent for the TextView is the Constraint Layout)
17 – > Closing Constraint Layout tag.
I hope you have a better understanding of what is going on within the layout file now. If you want to have a slightly more thorough look into XML for Android Studio I have a found a nice article on the topic, worth a read, here. As mentioned before, this layout does not do much but display the word Hello World in the centre of the screen but with a bit of experimenting you can hopefully create something a little more useful. It’s all good having a layout, but how does this layout get inflated onto the screen?
The Code
This can be the most intimidating thing, especially for someone who is new to coding. Now, we’re not going to delve into coding tutorials right now but having a look at some code can help us understand how this app is being created.
First of all, Android applications can be written in either Java or Kotlin. Java is the traditional method however the more modern approach now is to code in kotlin as it is quicker to code in (what 10 lines of code does in java, kotlin may be able to do it in 3), and provides code safety (‘if it is not null‘ checks).
The file name we want to look at is MainActivity.kt.
So why the name MainActivity? Well, ‘Main’ because this is our launching class, the app starts here. ‘Activity’ is basically the window in which the User Interface (UI) is drawn. More about activities here.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}Thats it. Four short lines of text.
Let’s go line by line.
1 -> The class is called MainActivity and it extends the AppCompatActivity class (which is a type of Activity).
2 -> A function called onCreate, which is going to be overriden by us. This simply means, there is a function that belongs to AppCompatActivity (which we’re extending) and we want to modify it.
3 -> This keyword ‘super’ refers to the parent class and it is calling the onCreate function. So, we’re overriding the onCreate function but ensuring that whatever code is in the body of the function in the parent class gets executed.
4 -> And here we’re overriding the function by adding our own line of code. We call a function called ‘setContentView’ and we pass in the name of the layout file to inflate.
Finally, how does the app know to launch the MainActivity first? Sure, we gave it the name “main“Activity but that’s just a word. The activity to be launched is stated in the AndroidManifext.xml. Just like the layout this is in xml so it only describes data.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myfirstapp">
<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.MyFirstApp">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>AndroidManifext.xml
If we look at the activity opening tag we have the name of the activity MainActivity. We then have an intent-filter. The developer documentation describes the intent filter as follows.
“Specifies the types of intents that an activity, service, or broadcast receiver can respond to. An intent filter declares the capabilities of its parent component — what an activity or service can do and what types of broadcasts a receiver can handle.” Link here.
You can see that there is an ‘action’ with the name “android.intent.action.MAIN”. This means, Start as a main entry point, does not expect to receive data. The category is set to android.intent.category.LAUNCHER, which indicates the app that this should be displayed in the top-level launcher.
Thats it! 👏
I would hope you’re a little more confident and curious as to what can be done in the Android Studio IDE and eager to move onto some more topics. I would advise you to play around more in Android Studio and read up on some of the documentation links.
Next steps:
Start to look at some coding tutorials:
https://kotlinlang.org/docs/tutorials/
https://developer.android.com/courses
Play around with the layout file. Try adding different views to the layout and constraining them yourself.
https://www.raywenderlich.com/9475-constraintlayout-tutorial-for-android-complex-layouts
Android development for Beginners 