Create Android Apps with Kotlin – Basics of Layout

Create Android Apps with Kotlin – Basics of Layout

The most important part of any app is the layout. Because, what do we do without it? Our code won’t do anything if we don’t allow the user to call it. Let’s learn the basics of it by building a small application. We want to create an application that calculates how long we’ll have to keep working in our job to achieve a certain amount of money, keeping in mind the increase in salary every month.

So, first things first, change the Layout of your application to a LinearLayout by changing the standard layout of your activity_main.xml and add the android:orientation tag:

 

 

Doing so, our widgets will stack up on top of each other. This is an example with buttons that I just dragged into the window:

 

 

You might wonder why my background is grey. Go into your AndroidManifest.xml file inside of app -> src -> main and change the android:theme tag to this:

 

 android:theme="@style/Theme.AppCompat.NoActionBar">

 

Add a new color tag inside of colors.xml in app -> src -> main -> res -> values:

 

<color name="darkGrey">#2C2C2C</color>

 

Now, all that is left to do is alter the android:background tag inside of your activity_main.xml text file:

 

 

But back to our application concept:

On the top left of the Design window, click on “Text” and drag three Plain Text Widgets into the Editor. The first one lets the user enter their goal of money, the second one their current salary, and the third one the increase in salary each year in %. Make sure to replace the hint in the properties window with correspondant text (hard-coding is generally bad practise, but good enough for this very basic example where we don’t need to translate our text into other languages) and remove the “Name” from the text property, to make sure the textview is empty at the beginning.

 

 

Next, we add a Button and a TextView, in order to display the result of our calculation. Additionaly, I change the alignment of the text to center.

 

 

This look cluttered, doesn’t it? Everything truncates to the top and there is a whole bunch of white space on the bottom for no reason. Let’s go into the margin property and add some marginTop to each widget. This will add more space on the top of each Widget:

 

This is a bit better, I guess.

But what now? Now should come the part where we actually start coding. The thing is that we haven’t touched on any Kotlin code up until this point. I don’t want to leave you in case you are not familiar with Kotlin, yet. If you are new to Kotlin or programming, make sure to check out my video series on youtube about the basics of the language.

If you are really motivated, try finishing it on your own! It will be awesome practise. You can compare your solution to the problem with mine as soon as it’s there.

Until then, stay tuned for the upcoming series and our coding of this multi-reward winning mobile android application.

 

Cheers.

 

Leave a Reply

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