Categories
Coding Project Tutorial

KitKat – Android/Nodejs/Git Tutorial part 3 Building our first app and putting it on git

Hi,

This is the third part in a tutorial for building a full stack android application:

I made this tutorial series cause I’ve been moving to web dev stuff recently and want a way to get back to android development quickly.

All the code for this tutorial is available at https://github.com/humaidk2/KitKat

In this tutorial I’ll be going over the following,

  • Creating a first android project
  • Putting an android project on Github
  • Running an android project
    • on emulator
    • on device
      • on Scrcpy
  • Understanding the files created by default
  • Simple personal projects git workflow
  • Implementing Lifecycle methods to see when they run
  • Committing and pushing changes to Github
  • Viewing changes on Github

If you prefer watching videos, you can go over this video that I recorded.

So last time I covered installing git. Then I covered the android architecture, the MVC model, and the Android activity lifecycle.

You can think of an Android Activity as a page in your application and the lifecycle is the different functions that get called when the Android operating system interacts with the page.

This time we’re going to be building our first application and putting it on git.

First off, if you haven’t done so already you’ll need to install:

I might make a tutorial on these if you request it.

Once installed, Run Android Studio, You should see a screen as follows:

If you have created an android project before, you can select the following from the top navigation bar
File —> New —> New Project

Next Android will ask you what type of opening activity do you want?

Remember an Activity is just a page in your application.

Here we will just select an empty Activity and Click Next

Next you’ll screen as follows

  • The first item in the list is the name of your project, my app is called KitKat.
  • The package name is the Java package where all your classes will reside. You can call this whatever you like, I’m just gonna stick to default.
  • The save location is where the project will be stored. The default location is fine or you can put it in your own folder.
  • We’ll be working with Java so select that as the language. Newer applications have started using Kotlin, but I’m not covering that here.

The most important part in this page is the minimum SDK version. Min SDK(Software development kit) tells android what Android versions will you support.

If you pick a newer versions, you will have access to more functions like the fingerprint scanner, but that also means you’ll have a larger target android market.

If you pick an older version, you will have to access to a large target android market, but you won’t have access to many functions.

I like to pick Android 6.0, it’s worked well for me and I’ll have a target of 84.9%, which is pretty good.

Fill in the details and click finish

Once done it’ll show a page like this:

Wait for the gradle to finish building which you can see progrssing at the bottom of the page

Once completed, the first thing I want you to do is select tools at the top of the page and select the SDK manager

Now you should see a screen as follows

Here you’ll need to select and install the appropriate Android SDK. Without the SDK, you won’t be able to create and run Android apps.

So select the appropriate android version based, ensuring it’s above the minimum SDK version you selected previously.

Select the version and click apply

This will take some time to download, once complete Click OK to continue

To run and test your android applications, you have 2 options:

  • Connect your own android phone and run the application on that
    • Connect your phone using an usb cable, you may need an usb driver
    • Enable USB debugging on your phone
      • Go to settings on your phone
      • Look for and select about phone, it may be under system settings
      • Select the build number in the about phone seven times, a toast informing of developer options is available should show up
      • Now go back and look for and select developer options
      • Select developer options and enable USB debugging
  • Using an emulator
    • You can use a custom emulator, might be slightly faster e.g. GenyMotion(https://www.genymotion.com/)
      • Not covering this in this tutorial
    • You can use android’s default emulator
      • Will cover this below

I recommend having the emulator installed, as well as setting up your own device. The emulators are usually slow and slow down your computer too.
So…
Usually I run the app on my own phone, then run a tool called
scrcpy to share my phone screen. You can find the application here
https://github.com/Genymobile/scrcpy. For windows, just download and extract the zip and run the scrcpy.exe while your phone is connected.

To install the default android emulator
Click tools and select AVD manager

Click + Create Virtual Device…

Pick a phone that supports your target android versions

Select the device that you’d like to emulate and click next

Make sure your API level is above your Minimum sdk version you selected earlier

I chose SDK 23 so Nougat is fine for me.

Select an operating system for your phone and click next

Give your device a name and click finish

It will take some time to install
once complete, it will show up in the menu below

If you’re using the android emulator, you can click the play icon to start running the device.

What is our Android application?

Android applications can be broken in to 4 parts

  • Manifests
    • This is what android thinks your application is broken up into.
  • Java (Code)
    • This is where your code will reside. In the MVC model, this will be where the model and controller will reside.
  • Res(Resources)
    • This will be where your images, your layouts, your hardcoded strings, colors, and styles will reside.
  • Gradle Scripts
    • This will be where the program build procedure resides. If you ever need to add an external library, you’ll need to modify this.

Next, We’ll go over these with our own project

First off, Gradle Scripts

If you open Gradle Scripts –> build.gradle (Module:app) from the project folder on the left, you’ll see the following

You can see the build settings including the minimum SDK version that we set earlier. You can always change it here.

Next, as I mentioned the manifests file is what android thinks of your project.

So If you open manifests –>AndroidManifest.xml from the project folder on the left, you’ll see the following.

From here, we can see that Android has an application that has certain properties such as the icon, label, theme.

Within this application, we have an activity. Remember think of an activity as a page in your application. When we create more pages, they’ll show up here. The name of our current empty activity is MainActivity.

Within the Activity, we can also see that we have an intent filter. This tells android that when the application launches, it should launch this page(activity) as the first page(activity).

Later on, if you want to make another page(activity) your first page(activity), then you can cut lines 13-17 and paste it inside the other activity.

Next If you either Ctrl+Click on MainActivity or
Click Java–>com.example.kitkat–>MainActivity from the project folder on the left, you’ll see the MainActivity file as follows:

The first thing to note that MainActivity extends from AppCompatActivity that is how we define an Activity(Page) in Android

This will give let Android know that this class is a child of the Activity class and has some predefined functions such as the ones from the Activity life cycle that we covered last time.

If you remember the first function that gets called is when the activity(page) gets created, this is the onCreate function. Most of the time, we’ll be using this function to connect elements to the view(layout).

Here, by default, android has written an onCreate function. Within this function, the first thing you should always do is call super.onCreate as this will call any parent onCreate functions. Basically AppCompatActivity already has an onCreate function and we are trying to add to that function so we simply call that onCreate using super.onCreate() and add more code to it. The savedInstanceState is a way of saving and loading data for the page.

setContentView(R.layout.activity_main): This line sets the View of the activity(page) to be the layout activity_main. So that when this page(activity) loads, it displays activity_main.

Next we’re going to look at this layout file so either Ctrl+click on R.layout.activity_main or navigate to app–>res->layout–>activity_main.xml

Here we can see what the page will look like, the layout(View). Right now the default empty activity has a Constraint Layout with a textView, a piece of text that displays “Hello World”, within it. We’ll go over layouts in our next tutorial so don’t worry about them right now.

Now that we know about the main folders that we will look at(Resources, Java, manifest, and build scripts), we’re going to push our first code to Github.

If you haven’t done so already, please create a Github account(https://github.com/join) before continuing.

To do so, in the top navigation bar, click VCS–>Import into Version Control–>ShareProject on Github

Then Enter your Github Credentials and press ok

A popup for asking for project details shows

  • Enter the repository name – “KitKat”
  • You an make it private so only you can see the project, but it doesn’t really matter if the project doesn’t have a license, no one is entitled to use the application.
  • Leave the remote as is for now, I will explain this later – “origin”
  • Enter a description of what your application does – “Android application that tracks pet information”
  • Click share

You’ll be asked to “commit” all the files, Click add

There you have it, your first github project, Ready to go, Great Work!

You can view it at www.github.com/[username]/[project name]
so for me www.github.com/humaidk2/kitkat

You can then click 1 commit and click initial commit and see what changes were made to the project

So lets go over what just happened?

A standard git process can be broken into 3 parts:

  • git add (filename) – which tells git that all changes to this file need to be tracked – you run this when u create a file that git needs to know of
  • git commit -m “[message]” – which tells git that all current changes should be stored under the “message” in your local computer – you should run this when you complete a method or just every hour or so if you’re stuck
  • git push origin master – which moves all commits from your local computer to the github origin – you should run this at the end of the end day or once you have completed many tasks


As an example:

  1. We add the file to git using git add so git can keep track of file changes
  2. We write some method or code e.g. x++
  3. We commit x++ explaining what it does and why
  4. We continue writing code and write x–
  5. Once completed, we commit x– under a commit message explaining it’s behavior
  6. Once we have a lot of commits completed or a specific feature completed. We push all our code to github using git push origin master

We have done something very similar when we pushed our code to github. Android studio created a new github project for us, added all our files to git, committed them under a message called “Initial commit”, and pushed it to github.

For the last part of the tutorial we will simply be creating a toast that shows when different activity(page) life-cycle methods are called so that you have a better understanding.

In your MainActivity.java file and add the following line of code to the onCreate method.
Toast.makeText(this, “onCreate”. Toast.LENGTH_SHORT).show()

This method(Toast.makeText) takes 3 arguments:

  1. context, which is the current object instance (important for object oriented programming) – this
  2. text, to be displayed in the toast – “onCreate”
  3. length of the toast – we are using a default LENGTH_SHORT which tells the toast to disappear after 3 seconds

Upon creating the toast, we call the method .show() to display it.

As you see in the image, every time we start the activity, a toast showing onCreate is displayed

Since we’ve completed a method, we can commit our changes to git. So hit ctrl+k or VCS –> git –> commit file

Here you can see the changes we made.
Add a commit message, “Added a toast to show when the onCreate method is called to understand the android activity lifecycle”
And click on commit

Similarly, we can add toasts (logs) for the other lifecycle methods and commit those changes based on our diagram from last time.

Once completed, you can run your application and see when the toasts show up. Try different things like split screening your device or flip to landscape mode and you’ll notice some odd things.

If you flip to landscape, you’ll notice the activity destroys and recreates itself. These are the important cases where these methods come in handy. For example, imagine you’re filling up a form and you decide to flip your phone for keyboard convenience and since the activity gets destroyed all your filled information would get deleted, providing poor user experience. In this scenario, you’ll have to save the filled data in some localstorage onStop and load it up onStart.

Now that we are done with the coding part of this tutorial, you can push your committed changes to github.
So click VCS –> git –> push

This pushes all your changes to github so once it completes head over to the commits section of your github repo(github url)

For me, it was github.com/humaidk2/KitKat/commits/master

Here you can see all the commits with their relevant messages. If you click the hash of any of the commits, you can see the changes it made.

Phew, So that’s about it for the stuff I wanted to cover. I know it’s a lot of details, but I wanted to cover a bit here or else I would end up with 10-12 tutorials.
Anyway so what have we learned,

  • We learned how to create a new android project
  • We learned how to run an android application
    • With our phone
      • With scrcpy
    • With the emulator
  • We learned git workflow for our own personal projects
  • We learned the most important android files that come with the default application
    • Manifests – outline of android project
    • Java (Code) – model and controller of our android activities(pages)
    • Res(Resources) – Views – images, colors, strings, layouts – what your activities(pages) will look like
  • We built an android application that shows how the lifecycle works
  • We learned how to commit changes and push them to github for our android project

For the next tutorial, I’m gonna cover a better git workflow, it’s an optional tutorial so you could skip it but it’s really important for collaboration.

After which, I’ll cover building the pet details page.
All the code for this tutorial is available at https://github.com/humaidk2/KitKat

If you have any questions or any feedback for me or liked my tutorial or just wanna chat, leave a comment below or send me an email at humaidk2@gmail.com

By humaidk2

Humaid is a full stack developer who has a passion for building applications with artificial intelligence. You can get more info at humaidkhan.com

Leave a Reply

Your email address will not be published. Required fields are marked *