Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introduction to Android App Development With Kotlin: Layout Editor (Part 4)

DZone 's Guide to

Introduction to Android App Development With Kotlin: Layout Editor (Part 4)

Learn more about developing a nice UI for your Android users with Kotlin.

· Java Zone ·
Free Resource

With our knowledge of activities and fragments, it’s time that we create a nice UI for our users. This lesson will cover the Layout Editor and Androids View widgets.

Lesson 4

Picking up where we left off last week, open the NewMovieFragment in the Project Structure View. Our aim is to update the current layout file in such a way that it will allow our users to input a movie title into an input box and then submit it. In the future lesson, we will learn to store this input (assuming it passes validation!) in a Room database and then display the list of all the movies in a list.

Step 1

Open thefragment_new_movie layout using CMD/Ctrl + Click on the name of the layout file. The Layout Editor will open up.

Image title

Layout Editor has two main modes of operation: Text and Design. Text mode allows you to directly manipulate the XML layout file. Design mode is a WYSIWYG editor that allows you to drag and drop widgets onto the screen. You can switch between the two using tabs at the bottom.

Image title

I, personally, like to use Text mode as, in my opinion, it’s more precise. However, it’s good to be able to use both so that you can decide which one you prefer. Before we get familiar with the Design mode, let’s change the current layout to Linear. Let’s also delete the TextView and add padding to the layout so our text won’t be “touching” the edge of the screen. LinearLayoutrequires that you specify the orientation. In this case, we’ll set it to vertical because we want the items to show one under the other. You can also set it to horizontal if you want the items displayed one next to the other.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:padding="12dp"
              android:orientation="vertical"
              tools:context=".NewMovieFragment">

</LinearLayout>


Now, switch to the Design mode. The top left pane will display a Palette of all of the widgets at your disposal. There’s plenty of them there, but as with most things, Pareto’s Principle will apply and you’ll end up using around 20 percent of them about 80 percent of the time. I’ll briefly explain the ones I’ve used the most in my career.

TextView

Displays text to the user. Full list of attributes

Button

User can tap it or click to perform an action. Full list of attributes

RecyclerView

Displays a limited window of a large set of data (list). Full list of attributes

ImageView

Display image resources. Full list of attributes

Switch

Two state toggle switch that allows users to select between two options. Full list of attributes

There’s many more, but I believe that you’ll find yourself using the ones above the most.

Step 2. Add TextView

Drag and drop the TextView widget to the screen. You should end up with something like this.

Image title

Let’s select the TextView element on the screen above and Attributes window should show on the RHS. In this window, you can set all of the attributes for this view element without moving to the Text mode.

We’ll increase the font size and set the text to “Add new movie” so that the user knows what screen she is currently on.

I set the textSize attribute to 30sp.

Image title

Step 3. Add EditText

In the Palette Pane > Text > Plain Text > Drag & Drop on to the screen, below our TextView.

Image title

Clear the text attribute as that’s what will be pre-populated in the input box. What we do want instead is the hint attribute set to “Title,” which will instantly disappear as the user will focus on this element.

Step 4. Add Button

Last but not least, Drag & Drop the Button on to the screen, below the EditText.

Image title

Set the text attribute to "add".

Let’s run the app, and you should be presented with a stunning view. This UI will allow us to gather user input. For the moment, it doesn’t do very much, so let’s fix that.

Image title

Step 5. Add Button Listener and Get User Input

In order for this UI to be able to do something worthwhile, we must wire it up with the Fragment. Kotlin makes it super easy — all we have to do is to refer to the unique ID of the element in the layout and we can manipulate it in any way we wish.

We will now add a listener to the button and launch a Toast message containing users input.

In order to do this, let’s navigate to the NewMovieFragment.

Override the onViewCreated method:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)


    button.setOnClickListener {
        Toast.makeText(activity, editText.text.toString(), Toast.LENGTH_SHORT).show()
    }
}


button is the ID of our Button. We are setting a listener on it by invoking onSetClickListener{}.

Any code inside the listener will be invoked upon every single click of the button. In our case, we are creating a Toast, which takes in three arguments. First is the context, next is the text to be displayed, and finally, we have the length of time it will be displayed for. Do not forget to call show() to make it show on the screen.

editTextis the ID of our EditText. We are fetching the user input using the text attribute and then converting it to String.

This is quite basic stuff, but if you have any questions regarding this piece of code, do not hesitate to ask questions in the comment section below.

Conclusion

Now you know how to create UI in Android. It’s a breeze, isn’t it? You also understand the importance of ID’s for each of the View widgets and you can make buttons obey your commands! How exciting!

In the next lesson, we will validate user input and do some basic navigation. Meaning, we’ll have an app with multiple screens and fragments!

Until next time, here's the complete code from this lesson — simply check out the code tagged as lesson-4.

Topics:
kotlin ,kotlin 1.3 ,android ,android app deve ,android app ,layout editor ,UI ,Java ,tutorial ,android app development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}