Android ImageView Tutorial
View more Tutorials:
ImageView is a view used to display images, in which image files can be sourced on application, device, or from a URL.

We will start with a simple example, an ImageView displaying the image in the "drawable" directory of the project.

Create a Project named AndroidImageView.
- File > New > New Project > Empty Activity
- Name: AndroidImageView
- Package name: org.o7planning.androidimageview
- Language: Java

You need some image files for this example:
triceratops_1.png | triceratops_2.png |
Copy the images and paste to drawable folder of project.



Apps interface:

If you are interested in the steps to design this application interface, please see the appendix at the end of the article.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:id="@+id/imageView" android:layout_width="375dp" android:layout_height="207dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="17dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/ic_launcher_foreground" tools:ignore="VectorDrawableCompat" /> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:orientation="horizontal" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView"> <Space android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Show Image 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Show Image 2" /> <Space android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.androidimageview; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageView; public class MainActivity extends AppCompatActivity { private ImageView imageView; private Button button1; private Button button2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.imageView = (ImageView) this.findViewById(R.id.imageView); this.button1 = (Button) this.findViewById(R.id.button1); this.button2 = (Button) this.findViewById(R.id.button2); this.button1.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { showImage1(); } }); this.button2.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { showImage2(); } }); } private void showImage1() { this.imageView.setImageResource(R.drawable.triceratops_1); } private void showImage2() { this.imageView.setImageResource(R.drawable.triceratops_2); } }
You can also display images from a URL to the ImageView. The principle is that you need to download the image file from the URL, and then displays it on ImageView:
URL url = new URL(imageUrl); HttpURLConnection httpConn = (HttpURLConnection) url.openConnection(); httpConn.connect(); int resCode = httpConn.getResponseCode(); if (resCode == HttpURLConnection.HTTP_OK) { InputStream in = httpConn.getInputStream(); Bitmap bitmap = BitmapFactory.decodeStream(in); this.imageView.setImageBitmap(bitmap); }
Getting data from URL sources related to network programming in Android, you can find examples that display images from a URL on ImageView in documentation guides to program Android here:
You can also display an image file on the device to ImageView, such as images in memory card. First of all, you need to authorize to read and write data on the device:
Add the following configuration in AndroidManifest.xml:
Add the following configuration in AndroidManifest.xml:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
File imgFile = new File("/sdcard/Images/mypicture.png"); if(imgFile.exists()) { Bitmap myBitmap = BitmapFactory.decodeFile(imgFile.getAbsolutePath()); this.imageView.setImageBitmap(myBitmap); }
- TODO
Add components to the interface:


Set ID, Text for components on the interface.
