Create a Time-Management App – Layout

Create a Time-Management App – Layout

The first thing we start out with in our App, is building the Layout itself. It won’t be the final layout, but a very basic startingpoint for us, to focus our efforts on coding the app itself first. To start off, change the standard ConstraintLayout to a LinearLayout.

Also, make sure that you create an android:orientation tag above the android:layout_width tag, and set it to vertical.

android:orientation="vertical"

The main element is going to be a listView. We want our TimeSpans, such as "Today", "Tomorrow" etc. to stack up on top of each other in the first view.
Add this element to your activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.rechunk.checkmark.MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView">
    </ListView>

</LinearLayout>

Make sure to set the layout_width and layout_height to match_parent, so that the listView fills the entire screen. Also, I have it an id of listView. Now, go into your MainActivity.kt file.

What we want to do, is populate our ListView with all the timeSpans we intend to use. For this, we will be using an ArrayAdapter. The ArrayAdapter takes an Array and converts it into listView items. We start by declaring and initializing our array of time spans:

 

var timeSpans: Array<String> = arrayOf("Today", "Tomorrow", "Later this Week", "Sometime Soon")

 

Before we can move on, we have to create an actual view that is able to display each element in the array the way we want. For this, create a new file in the layout folder. I call mine row_layout.

I simply added some very basic and ugly styles to a TextView. It will be enough for now.

 

Okay, go back to MainActivity.kt. We can now create our ListAdapter:

val adapter: ListAdapter = ArrayAdapter<String>(this, R.layout.row_layout, R.id.customTextView, timeSpans)

we declare a ListAdapter, and set it equal to an ArrayAdapter of Strings, as our Array only contains Strings (for now). Then, we pass in the context, which is the current state of the application using this, specify the row_layout we just created, the customTextView inside of the row_layout and finally pass it the timeSpans-Array.

 

Then, we want to find our listView itself and set the adapter:

 

val listView = findViewById(R.id.listView) as ListView
listView.adapter = adapter

 

Finally, we want to be able to detect clicks. This is the code for it, which currently is not Kotlin-Optimized just yet:

listView.setOnItemClickListener(object : AdapterView.OnItemClickListener {
    override fun onItemClick(parent: AdapterView<*>, view: View, position: Int, id: Long) {

        
    }
})

Inside of the OnItemClick method, we later want to be able to navigate to the proper view.
Now, just run the program (make sure you set up your emulator or have a physical device connected), and you should see something along those lines:

 

Ugly, but good enough for us to understand how we can make it look good 🙂

AND good enough, for us to be able to start coding the functionality in the next part.

 

Stay tuned 🙂

2 Replies to “Create a Time-Management App – Layout”

Leave a Reply

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