Android app development: Kotlin, ImageView & ImageButton

Kotlin: 1.2.71 (Don't forget to enable Kotlin-Android-Extensions
Now, let's learn about ImageView and ImageButton.

ImageView

What is it?

It's a view for showing Image. As it says.

How to use?

Before describing this, there are some ways to specify an Image depends on some cases
1: Just want to show the image saved on drawable or mipmap
2: Want to show the images saved on device's local folder
3: Want to show the thumbnail downloaded from server (Like when using API
4: Or, maybe you want to show the image generated programmatically
5: Or, maybe more?

Does ImageView supports all those cases in one way?

OF COURSE NOT!

So, let's see from No.1. Which is the most easiest way to show an Image. If you don't have any images, get something and put it into resource(drawable or mipmap) folder.

1: Show an image on Resource folder

There are 2 ways to show. Set image programmatically or specify image resource on XML file
To set image programmatically, just do this.

imageView.setImageResource(R.drawable.my_wife)

In mycase: (Replace the name by your own
The drawable means drawable folder. So when choosing from mipmap folder, it's R.mipmap.something

When I run it on the emulator, it shows like this. My sweetheart, so pretty... (But it's anime..
And android:src="@drawable/filename" is the way to specify image resource on XML. (If the resource is on mipmap, simply replace drawable to mipmap.

imageView_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:contentDescription="@string/image"
        android:scaleType="fitCenter"
        android:src="@drawable/my_wife" />

    <ImageButton
        android:id="@+id/do_something"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:adjustViewBounds="true"
        android:background="#FFFFFF"
        android:contentDescription="@string/image"
        android:scaleType="fitCenter"
        android:src="@drawable/baseline_add_24" />
</LinearLayout>

By the way, my image my_wife is bigger than 1000x1000. So I don't actually need to use adjustViewBound and scaleType to make this layout. (Size of ImageView depends on the size of Image when using wrap_content)

Also, ImageView will fill the image automatically even without using adjustViewBound and scaleType (But not clean as when using

2: Show an image on device's local storage

imageView.setImageURI(Uri)

To show item on storage, you have to specify the FilePath by Uri. Like

Uri.parse("Specify Uri with string")
Uri.fromFile(File()) //Create File instance

3: Show thumbnail with URL provided by Server (Like API

For this, I use Picasso
You can use like this (Note that you have to do this on background

Picasso.with(context).load(url)

Then .get() to get Bitmap, .into(imageView) to throw result(Image) into imageView.

4: Show programmatically generated Image

First, generate image to show

//Drawable
val drawable = Drawable.createFromPath("Path")
val drawable = BitmapDrawable.createFromPath("Path")

//Bitmap (have to specify the source by Bitmap or Picture
val bitmap = Bitmap.createBitmap(bitmap, and options)
val bitmap = Bitmap.createScaledBitmap(bitmap, and options)

Then put into imageView

imageView.setImageDrawable(drawable)

imageView.setImageBitmap(bitmap)

That's all I know and use(rarely) for ImageView

ImageButton

What is it?

Almost same as ImageView and has Button feature.

How to use?

The way to set image is same as ImageView.
And Button feature is same as Button feature.
So, when setting onClickListener() to ImageButton (The resource is from imageView_layout.xml on above

Simply

do_something.setOnClickListener { viewModel.doSomething() }

Note:

ImageButton is almost same as ImageView, but you have to note
・ImageButton does not resize the image automatically to fit frame size.
So if you don't use like this

android:scaleType="fitCenter"
android:adjustViewBounds="true"

The tiny image such as baseline_add_24(on my resource) will be tiny on bigger frame, and large image such as my_wife(on my resource) will over the frame size and we can see only a part of image.
Learn more: https://stackoverflow.com/questions/15116393/fit-image-in-imagebutton-in-android

・If you want to set background color of ImageButton to same as screen's background color, you need to specify background on EACH ImageButtons. Otherwise Button's background will be gray. (This is ridiculous

<ImageButton
    android:id="@+id/do_something"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:adjustViewBounds="true"
    android:background="#FFFFFF"               // this line
    android:contentDescription="@string/image"
    android:scaleType="fitCenter"
    android:src="@drawable/baseline_add_24" />

Project:

Code: https://github.com/GalaxyDevGamer/Android-Samples/blob/master/app/src/main/java/galaxysoftware/androidsamples/fragment/ImageViewSampleFragment.kt
Layout: https://github.com/GalaxyDevGamer/Android-Samples/blob/master/app/src/main/res/layout/imageview_layout.xml
Remember: Don't change anything to master.

That's all from myself. Have a try