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
![imageView_sample.jpg](https://qiita-image-store.s3.amazonaws.com/0/245077/b7ff3f60-451f-39d3-ddef-16ea2a13f759.jpeg)
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**.

```xml: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