Category Archives: View

This class represents the basic building block for user interface components. A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.). The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.

Using Views

All of the views in a window are arranged in a single tree. You can add views either from code or by specifying a tree of views in one or more XML layout files. There are many specialized subclasses of views that act as controls or are capable of displaying text, images, or other content.

Source: View

Custom Toast

In this tutorial we are going to show you how you can create easily a Toast message with a custom layout like below.

Custom Toast Message

Step 1 – Create new project

Our first step is to create a whole new project. For this, launch Android Studio. If you see the “Welcome page”, then click on the “Start a new Android Studio project”. If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.

Here select the “Empty Activity” option. In the next window, we should provide some information about the newly created app.

This tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language.

From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.

If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉

When the build has been finished, then you should see the open MainActivity::class and next to this the activity_main.xml files.

Step 2 – Create a simple layout

For this simple demo application we will create also a simple layout. It will contain only an EditText and two Buttons. One for the default Toast message, and one for the Toast message with our custom layout.

So, open the activity_main.xml file from the res->layout folders and replace there the XML code with the below one.

The layout

You can close the layout file, because we won’t need it anymore in this tutorial.

Step 3 – Create a default Toast

First of all, before we gonna show you, how you can create a custom Toast, we should talk about, how you can create a deafult Toast message. It is very easy.

What you need, is only

      • the context,
      • the message
      • and the duration of the Toast‘s visibility.

So, copy and paste the below code after the onCreate() method of the MainActivity.

Default Toast message

This method will take a String, what will be the message of the Toast. So, what we should do now, is to call this method inside of the click listener of the default Toast‘s Button. Paste the below few lines at the end of the onCreate() method.

Click listener

Run the app

Run the app, enter a message into the EditText, then click on the “Default Toast” Button. At the bottom of the screen you should have the Toast message with the text from the EditText.

Step 4 – Position the default Toast

In the next step, we are going to talk about how we can change the default position of a Toast message. As you saw in the very last step, the default position of a Toast is at the bottom of the screen with some margin.

We can change it using by setting its gravity attribute. For this we can use the Gravity::class. This class has many singleton integer variables, but now we gonna use only four

      • TOP: It sets the Toast to the top of the screen
      • BOTTOM: This sets to the bottom.
      • LEFT: … to the left
      • RIGHT: and to the right.

So, copy and paste the below method after the onCreate() method.

Positioning the Toast


      1. We created an instance about the Toast without showing it
      2. We set its gravity to the top of the screen with 300 pixels offset in vertical orientation.

Note also, that we are using apply extension function on the toast variable. With it we can reach its attributes in one code block.

More info: apply

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.In the click listener of the button, which is in the onCreate() method, change the fired method from showDefaultToast() to showPositionedToast().

Run the app

Run again the app, enter a text into the EditText and press the Button. The result should look like as on this picture at the right side.

Step 5 – Make a custom Toast

To create a custom Toast, we have to define a layout, set the message, the gravity and the duration. Looks easy, right? 😎

Custom Toast Message

Create a new icon

Our custom Toast will have a green done mark. So, click with the right mouse button on the res->drawable file, select New and Vector Assets.

In the popup window, click on the Android icon in the row of “Clip Art” and search for the “done” icon. Then, name the icon as “ic_done_green”. Set the color of the icon: #78C257, then click on the “Next” and “Finish” buttons.

Shape of the Toast

As you can see, the Toast has rounded corners, a green border and a light green background. To achieve this effect, we have to create an xml file, where we can define them.

So, click again on the res->drawable folders with the right mouse button, select New and the Drawable resource file option. Name the file as “shape_roundedcorners”.

Next, replace there the code with the below one.

Shape of the background

Thenafter, define the below colors in the colors.xml file, what you can find in the res -> values folders.

      • green: #78C257
      • light_green: #B9D7AC

Create the layout

To create a new layout, click with the right mouse button on the layout folder, what you can find in the res directory. Then select New, and Layout Resource File. In the popup window name the new xml layout as “custom_toast”. Then, copy and paste the below lines into our new layout file.

Layout of the custom Toast

Show the custom Toast

Before we can test again the app, we have to do two more things.

Create the Toast

First, as we have done it before, we are going to define a new method, which needs a String message as the only argument. So, open the MainActivity::class and paste the below method after the onCreate() method.



      1. We have to inflate the previously created layout using the layoutInflater which is available because of the Activity::class.
      2. After, when we have already the inflated layout, we can find its view. In our case we will set the text of the TextView of the messsage.
      3. The last step is to create a new instance about the Toast::class. Then, using its apply extension function we set the gravity, the duration and the layout. Inside of apply, we can call the show() method as well.

Add the click listener

Next, we have to call the above method when we click on the “Custom Toast” Button. For this, we will implement its click listener inside of the onCreate() method.

Click listener of the button

Run the app

Run again the app, enter a text into the EditText and click on the “Custom Toast” Button. The result should look like on this picture.

Use extension function

After figuring out how we can create and show our custom Toast message, we are going to change the game a bit.

Kotlin has many features, which help the programmers’ life. One from them is extension functions. We can extend a class and create new functionality without having to inherit from the class. This is done via special declarations called extensions. Such functions are available for calling in the usual way as if they were methods of the original class.

Using extension function, we can use the same function everywhere in our application.

Create new package and file

Our first task is to create a new package. So click with the right mouse button on the name of the project’s package, then select New and the Package option. In the popup window name it as util.

Then in the same way, create a new file, called ViewExt.kt.

Extend the Toast class

Next, we are going to extend the Toast::class. The body will be almost the same, what have defined in the showCustomToast() method above. The difference is, that we have to pass the context, and insteed of Toast(this), we can just use this and call on it the apply scope function.

So, the code looke like below.

The extension function

Usage of the extension function

Now, open the MainActivity and go to the click listener of the custom Toast Button. Comment out there the call of the showCustomToast() method and paste after that the below lines.

Usage of the extension function

Note how we can use our own extension function. We can call it on the Toast::class by passing in the message and the context.

The Toast::class class has 2 public constructor. From them we use here, which needs only the context.

Run the app

Finally, run again the app. It should work like before. The difference is, that we can use this extension funtion in other activities and fragments as well.


The source code is available on GitHub.



I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉 Have a nice a day! 🙂

Follow and like us:

RecyclerView – Swipe+delete and reorder items

In this chapter of the RecyclerView andorid tutorial we are going to implement how we can swipe+delete and reorder items inside of the list.

It means, when we swipe the item to the left or to the right, then this item gonna be deleted. When we tap the item a bit longer, then the item will be transparent, and we can move it everywhere inside the list.

Continue reading RecyclerView – Swipe+delete and reorder items

Follow and like us:

RecyclerView – The FloatingActionButtons

In this chapter of the RecyclerView Andorid tutorial we are going to add actions and animations for the FloatingActionButtons. It means, when we click on the FAB, then 2 more FABs will be visible. They are the buttons to open the bottom sheet of searchand  the dialog to add a new ToDo.

Our user interface already contains the FABs. So, what we will do in this chapter is the definition of the distance of the upwards move, then the animation, and finally the click listener to open the dialogs.

So, let’s start coding! 😎 Continue reading RecyclerView – The FloatingActionButtons

Follow and like us:

RecyclerView – Search and filter

In this chapter of the RecyclerView andorid tutorial we are going to implement how we can search in the titles of the items, which means we gonna implement a filter function.

First in this chapter, we are going to create a new fragment. This fragment will be a BottomSheetDialogFragment. It means, when we click on the Search FloatingActionButton, then the fragment slides up with the search fields.

Continue reading RecyclerView – Search and filter

Follow and like us:

RecyclerView – Add new items

In this chapter of the RecyclerView Andorid tutorial we are going to add new items to the list. Our application already contains the RecyclerView, the action buttons, and the user interface of the dailog, where we can add the detailes of the new ToDo item.

In the very last chapter (Adapter + ViewHolder) we have created the adapter, which handels the items of the list. We have created the view holder as well. The view holder’s task is to set the itemss’ values and to handle the click listeneres.

We are going to add the action for the Send button. This will call a method inside of the viewmodel, which will update the list and the RecyclerView, that a new item had been inserted.

So let’s start coding. 😎

Continue reading RecyclerView – Add new items

Follow and like us:

RecyclerView – Modify item

In this chapter of the RecyclerView andorid tutorial we are going to implement how we can modify an item of the list. When we the tap an item, then the same dialog will popup, what we can use to create a new item.

In this case, the dialog will be filled out with the data of the clicked item, and the action button of Modify will change the properties of the item and notify the RecyclerView about the change.

Continue reading RecyclerView – Modify item

Follow and like us: