Category: Structure

Create a Time-Management App in Kotlin – Overview

Create a Time-Management App in Kotlin – Overview

Before we can start building anything, for practise or for production, we have to know what we want to build. This is a very professional multi-million dollar Widget I built in a couple of minutes inside of Adobe Experience Design. Have a look:

Okay, bare with me. We ain’t winning any design award with this, but it’s okay for now. This is the rough outline of what we want our app to be able to do on a very high level:

 

Said in words, we want to select the date it needs to be done, we get all the tasks on that date, can add new ones, delete existing ones or check them as done. Pretty simple right? Let’s get a bit deeper into the objects we need to create for this. The most obvious one, is the ‘Task’ object (call it whatever you want).

class Task(val name: String, val description: String, val creationTime: Date, val done: Boolean)

Okay, fair enough, we modeled out the most important object (Make sure to put the object in a seperate file for organization purposes).

Let’s further think about howe we want to build this. We are fine putting our first view inside of the MainActivity. For simplicity, instead of using proper
routing we will use the setContentView() function to navigate to our next view for now.

Somehow, we have to be able to store all the tasks for every single date we want to be able to save them in. This is one purpose for creating the next object:

class TimeSpan(val name: String, val tasks: MutableList<Task>)

We might be able to come up with a better name later. For now, the name and the properties are good enough.

Now, we can use this object to make the user add a new timespan as well. So, our highest level is the timespan, and clicking on the timespan we get the indiviual tasks inside of it.

Before wrapping up our overview, let’s take a look at the basic components we need in our layouts:

 

Layout 1)

  • ListView
  • “Add New Timespan” Button
  • ListAdapter to display all the timespans on the screen
  • Little minus to remove the timespan

Layout 2)

  • ListView
  • “Add New Task” Button
  • ListAdapter to display all the tasks from selected timespan on the screen
  • Ability to remove a task
  • Checkmark the task as done
  • (Customize the task by adding different colours that have a meaning) -> Not part of the MVP

 

I hope you now have a decent understanding of what we will start creating in the next episode. Part two will be all about creating the layout(s). Instead of starting off with the functionality, we will use mock-tasks to imitate a user who has added them manually and be able to use them with a ListAdapter.

Until then,

Cheers.

Why Java and Kotlin can work together

Why Java and Kotlin can work together

If you are new to Java or Kotlin, you might be wondering what creates the good flow between those two languages. Before we get to the advanced and more awesome stuff, it is important for a beginner to grasp the concept of how it works behind the hood. I will explain it to you in the matter of two minutes of your lifetime: Inside of Android Studio for example, you can seamlessly convert between the two languages and even combine them. This obviously has a reason.

The JVM

The JVM (Java Virtual Machine) is a virtual machine (who would have guessed it?), which runs beneath Java and Kotlin. Java and Kotlin are smart. They use what is called Bytecode. Bytecode is a set of instructions, which are platform independent. This means, that they can be reused on Linux, Windows or Macintosh.

As soon as you compile Java or Kotlin, instead of looking at the machine you are running on and having to spit out different instructions for different machines, they convert the language to Bytecode Instructions, which can be used anywhere.

Now comes the JVM into play.

The JVM is reponsible for converting Bytecode into the machine specific instructions. It looks on which machine it is running and then converts the Bytecode instructions to chip-specific ones. This can be a reason why Java and Kotlin have a bit of a delay between actually compiling your program and executing it on your machine.

 

 

This is a simplified graph-flow, which illustrates what I just explained to you. But despite all things going on, the JVM itself is pretty quick. A reason for this is, that it is able to take in all instructions and seamlessly convert them, without having to go through a syntax check.

And this very simple yet important concept is why Java and Kotlin work together: They get converted into the exact same Bytecodes, which then get processed by the JVM. Thus, giving us the power we need to create applications.

But it is really a good idea to mix Java and Kotlin together?

From my point of view, it is not. Why should you? Java is old and robust, but Kotlin gives us the power to achieve results in a more conventient way, and allowing us to do so, while preseventing us from runtime errors. The good thing is, that inside of Android Studio you can go from a Java file to a Kotlin file in the click of a button.

Not interfering with any behaviour of your program!

Create Android Apps with Kotlin – Structure

Create Android Apps with Kotlin – Structure

I assume you have Android Studio already installed. If not, head over to the official android website, download it and follow the procedure. As soon as you create a new project, set the name of it and click next. You can skip the next window and click on Finish.

If you have never seen Android Studio before, it will look intimidating. But before we start, let’s actually enable Kotlin support!

Go to File -> Settings and now click on Install Jetbrains plugin…

 

 

In the search which will appear on the top, search for Kotlin and click install.

Now, go to Tools in your toolbar, go down to Kotlin, and click on Configure Kotlin in Project

 

Your settings should be okay, just make sure you’re using the latest version of Kotlin and click on Okay. If you see a yellow bar popping up on top of your Editor, go to the right and click on Sync Now. The final step is to click on Code -> Convert Java to Kotlin File.

Congratulations, everything worked fine. I hope so.

 

But obviously, we want to be able to see what we are building on an actual device! In case you have an Android device, just plug it into your computer, wait a second and then you’re able to click the green play button on top of Android Studio.

 

 

In case you don’t have an Android Phone to your disposal, go to Tools -> Android -> AVD Manager and Create a Virtual Device by clicking on the bottom left.

 

Okay, we’re good to go now!

 

The first thing you’ll see some code. (If not, click on the tab called “MainActivity.kt”).

 

 

The onCreate function is called as soon as we start the application. The highlighted line of code is responsible for bootstraping your view. It sets our activity_main.xml file as the current view.

By clicking on activity_main.xml right next to MainActivity.kt, you’ll be able to take a look at this window:

 

 

this is the design represantation of our file. You see a screen, a palette with availabe widgets and layouts on the top left and a wireframe represantation on the right of the phone. Click on the “Text” on the very bottom left.

 

 

What you see now is the actual xml file.

Note: The Design Window is just a visual represantation of the actual xml file and will convert any change you do manually into xml code.

which means, that we can switch between the Design and Text window, while I would still recommend doing the majority of your work inside of the Text window, as it gives you a clearer understanding of what is actually going on.

 

At this point, you have a very brief understanding of what is going on in our application, although we haven’t written any code yet. On the next part of this series we will tackle writing a very basic any minimalistic app and walk you through how to access widgets in code with Kotlin, handling onClick events, sending little toast messages to your users and more.

I hope you stay tuned for the next part.

 

Cheers.