Lesson 8 – Control ImageButton

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

We have seen the creation of objects of the Button class, now we will see another class very similar to the previous called ImageButton that has the same philosophy of handling with the difference that can show an image on its surface.

problem:

Arrange an ImageButton class object that displays an image of a phone. When you press the “Calling” message in a TextView control.

First, we will create a project called Project007 and then we should look for an image in png format that represents a phone of 50 * 50 pixels.

File name: telephone.png(it is mandatory that the filename of the image must always be in lowercase and not have special characters, we will see that a variable name with that name is generated).

Now we copy the file to the folder resources of our project: Project007 / app/src/main/res/mipmap-mdpi 

We can do this from the file manager of the Windows operating system.
In the “Project” window we change to “Project Files” view and navigate to the folder where we copy the file, we see that the file is in the folder:

Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton -
This is only to see that the project is updated with the resource files that we copy to the mipmap-mdpi folders.

Now insert the object of the ImageButton class in the window of our application. The ImageButton class is located in the “Images” tab.

After arranging the object opens a dialog where we must select the image to display:

Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton -
When closing the dialog the property “srcCompact” is loaded the reference to the image (we can modify the image by changing this property)

Initialize the Id property with the name boton1:

Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton -
Add a TextView to our application and set its Id properties (with tv1) and text. Then the visual interface should be similar to:

Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton -
Source code:

package com.coding180.project001


import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageButton
import android.widget.TextView

class MainActivity: AppCompatActivity () {
//coding180.com
    override fun onCreate (savedInstanceState: Bundle?) {
        super.onCreate (savedInstanceState)
        setContentView (R.layout.activity_main)

        var tv1 = findViewById (R.id.tv1) as TextView
        var boton1 = findViewById (R.id.boton1) as ImageButton
        boton1.setOnClickListener {
            tv1.text = "Calling"
        }
    }
}

Extra comments on this control.

When we copied the file we made it to the folder:

mipmap-mdpi

But we saw that there are other folders with similar names:

 
mipmap-mdpi
mipmap-hdpi
mipmap-xhdpi
mipmap-xxhdpi
mipmap-xxxhdpi

The purpose of these other folders is to save the same images but with a higher resolution if we save them in mipmap-hdpi.

This is done if we want our application to be more flexible if it runs on a cell phone, a tablet, a TV, etc.

We must take into account these sizes:

In the folder res / mipmap-mdpi /
(save image with original size)

In the folder res / mipmap-hdpi /
(we saved the image with the size of 150% with respect to that of the folder mipmap-mdpi)

In the folder res / mipmap-xhdpi /
(save the image with the size of 200% with respect to the folder mipmap-mdpi)

In the folder res / mipmap-xxhdpi /
(we saved the image with the size of 300% with respect to the folder mipmap-mdpi)

In the folder res / mipmap-xxxhdpi /
(we saved the image with the size of 400% with respect to the folder mipmap-mdpi)

 Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton - Lesson 8 - Control ImageButton -

About The Author

Related posts

Leave a Reply