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.
<?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