How To Use ImageView And VideoView In Android With Java

Introduction

 
In this article, we will learn about ImageView and VideoView in Android with Java Programming Language. We will use Android Studio for writing the code and implement the project.
 
Note
All the code used during the article is attached with the article in form of a zip file. You can find the zip file at the top of the article.
 

ImageView in Android

 
ImageView is a public class in Android that is used to upload and display images in Android Applications. ImageView is used to set the height, width, id, and other attributes of the image in the application according to the screen size of the Android Device.
 
Note
 
ImageView is a predefined public class in Android that extends View Class.
 
public class ImageView extends View
 
java.lang.Object
    android. view.View
        android.widget.ImageView
 

Properties of ImageView in Android

  • android:id
    ID is an attribute that is used to define an ImageView uniquely.
    1. android:id="@+id/image_view" 
  • android: layout_height
    Height is the attribute that is used to set the height of the ImageView. It can be like wrap_content which means ImageView will be the same size as the image that is given by the user, match_parent means ImageView will consume the size of the whole screen. It is not related to the Image of the user, and we can also define the size of the image according to the user in DPs.
    1. android:layout_height="wrap_content" 
  • android:layout_width
    Width is the attribute that is used to set the width of the ImageView. Like the height attribute, it is also can be like wrap_content, which means ImageView will be the same size as the image that is given by the user, match_parent which means ImageView will consume the size of the whole screen. It is not related to the image of the user, and we can also define the size of the image according to the user in DPs.
    1. android:layout_width="wrap_content" 
  • android:layout_centerInParent
    centerInParent is the attribute that is used to set the image in the center of the screen. It is set as true and false by the user.
    1. android:layout_centerInParent="true" 
Note
Here we will create a new project for the ImageView example in Android. Let's start working with Android Studio.
 
Step 1
 
First of all, when we will open the Android Studio and we will choose the first option "Start a new Android Studio project"
 
New project in Android
 
Explanation
 
When we open the Android Studio we will see the screen with many options. We will choose the first option "Start a new Android Studio project".
 
Step 2
 
Android Studio new Project
 
Explanation
 
In the above image, as we can see, there are many examples of the activities we want to create for our project. We will choose an "Empty Activity" for our example project for the ImageView in Android.  
 
Step 3
 
After choosing the activity type we will create our project as shown in the below image.
 
Example Project
 
Explanation
 
We will give the name "ExampleProject" for our project and will click on the "Finish" button.
 
Note
 
Android Studio will create a project named "ExampleProject".  Android Studio will create two files in the project MainActivity.java and activity_main.xml. 
 
Step 4
 
As we know, Android Studio creates two files. Now we will see the activity_main.xml file of the project. The code of this file is listed below.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"    
  4.     xmlns:tools="http://schemas.android.com/tools"    
  5.     android:layout_width="match_parent"    
  6.     android:layout_height="match_parent"    
  7.     tools:context=".MainActivity">    
  8.     
  9.     <TextView    
  10.         android:id="@+id/textView"    
  11.         android:layout_width="wrap_content"    
  12.         android:layout_height="wrap_content"    
  13.         android:layout_margin="10dp"    
  14.         android:padding="8dp"    
  15.         android:text="ImageView Example"    
  16.         android:textAlignment="center"    
  17.         android:textColor="@color/black"    
  18.         android:textSize="25sp"    
  19.         android:textStyle="bold" />    
  20.     
  21.     <ImageView    
  22.         android:id="@+id/image_view"    
  23.         android:layout_width="wrap_content"    
  24.         android:layout_height="wrap_content"    
  25.         android:layout_below="@id/textView"    
  26.         android:layout_centerInParent="true"    
  27.         android:layout_margin="10dp"    
  28.         android:background="@layout/image_border"    
  29.         android:padding="10dp"    
  30.         android:src="@drawable/android" />    
  31.     
  32. </RelativeLayout>    
Explanation
 
In the above code example, as we see Android Studio provides a TextView as an example. Now, let's update the code of the layout file according to our project. In this code example, we have RelativeLayout as the root Layout. We have a TextView with the following attributes-
  • id- for identification of the TextView.
  • height- We set the height of the TextView as wrap_content.
  • width- We set the width of the TextView as wrap_content.
  • margin- Margin of the TextView is 10dp.
  • padding- Paddingof the TextView is 8dp.
  • text- We set the text as "ImageView Example".
  • alignment- Alignment of the text is center.
  • style- The style of the text is bold.
  • color- The color of the text is black.
  • size- The size of the text is 25sp.
We have an ImageView with the following attributes-
  • id- for identification of the ImageView.
  • height- We set the height of the ImageView as wrap_content.
  • width- We set the width of the ImageView as wrap_content.
  • margin- Margin of the ImageView is 10dp.
  • padding- Paddingof the ImageView is 10dp.
  • background- We set the background of the image as a layout file named image_border that is created in our layout folder.
  • src- We upload the image through the src attribute which takes the String value as the location of the image. Our image named android.jpg is stored in the drawable folder of the project.
Note 
As we see we use "android:background="@layout/image_border" this line set the background of the image. We see a blue line around the image that line is created by the background attribute. For setting the background of the image we create a layout file named "image_border" located in layout folder of the Android project.
 
Let's see the image_border.xml file. The code of the file "image_border.xml" is listed below.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:layout_width="match_parent"    
  4.     android:layout_height="match_parent">    
  5.     
  6.     <stroke    
  7.         android:width="8dp"    
  8.         android:color="@color/blue" />    
  9. </shape>    
Explanation
 
In this code file, we use width of the border is 8dp and the color of the border is blue that color is added in the colors.xml file of the project.
 
colors.xml
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <resources>    
  3.     <color name="colorPrimary">#6200EE</color>    
  4.     <color name="colorPrimaryDark">#3700B3</color>    
  5.     <color name="colorAccent">#03DAC5</color>    
  6.     <color name="black">#111212</color>    
  7.     <color name="blue">#2752BD</color>    
  8.     
  9. </resources>    
Step 5
 
Now we will see the MainActivity.java file. The code of the file "MainActivity.java" is listed below.
  1. import androidx.appcompat.app.AppCompatActivity;  
  2.   
  3. import android.os.Bundle;  
  4. import android.widget.ImageView;  
  5.   
  6. public class MainActivity extends AppCompatActivity {  
  7.   
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.   
  13.         // Set the Image in ImageView  
  14.         ImageView imageView = findViewById(R.id.image_view);  
  15.     }  
Explanation
 
This is the code of the MainActivity.java file of our project. Now we will run our ImageView Example project.
 
The above code of our project generates the following output.
 
Output of the Project
 

How to set the image in Android Application through Java code?

 
As we see in the prevoius Android example code that we set the image in the Android project through the xml file, but we also can set the image in Android project through Java file.
 
Here is the example code of MainActivity.java class file.
  1. import androidx.appcompat.app.AppCompatActivity;  
  2.   
  3. import android.os.Bundle;  
  4. import android.widget.ImageView;  
  5.   
  6. public class MainActivity extends AppCompatActivity {  
  7.   
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.   
  13.         // Set the Image in ImageView  
  14.         ImageView imageView = findViewById(R.id.image_view);  
  15.         imageView.setImageResource(R.drawable.csharplogo);  
  16.     }  
Explanation
 
In the following example, we set the image in our Android project through the Java code. We set the image in the project by the line "imageView.setImageResource(R.drawable.android);. 
 
The above code of our project generates the following output. 
 
Output1
 

How to set image on click of the button in Android Studio project?

 
Let's start the process that how to set the image on the Android project through the click of a button. 
 
Now we will see the activity_main.xml file of the project. The code of this file is listed below.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"    
  4.     xmlns:tools="http://schemas.android.com/tools"    
  5.     android:layout_width="match_parent"    
  6.     android:layout_height="match_parent"    
  7.     tools:context=".MainActivity">    
  8.     
  9.     <Button    
  10.         android:id="@+id/button"    
  11.         android:layout_width="match_parent"    
  12.         android:layout_height="wrap_content"    
  13.         android:layout_margin="10dp"    
  14.         android:background="@color/colorAccent"    
  15.         android:padding="10dp"    
  16.         android:text="Set Image"    
  17.         android:textAlignment="center"    
  18.         android:textColor="@color/black"    
  19.         android:textSize="25sp"    
  20.         android:textStyle="bold" />    
  21.     
  22.     <ImageView    
  23.         android:id="@+id/image_view"    
  24.         android:layout_width="wrap_content"    
  25.         android:layout_height="wrap_content"    
  26.         android:layout_below="@id/button"    
  27.         android:layout_centerInParent="true"    
  28.         android:layout_margin="10dp"    
  29.         android:padding="10dp" />    
  30.     
  31. </RelativeLayout>    
Explanation
 
In this code example, first we will create a button with the following attributes-
  • id- for the identification of the button.
  • width- We set the width of the Button as match_parent.
  • height- We set the height of the Button as wrap_content.
  • margin- Margin of the Button is 10dp.
  • padding- Padding of the Button is 10dp.
  • text- We set the Button as "Set Image".
  • alignment- Alignment of the Image is center.
  • style- The style of the Button is bold.
  • color- The color of the Button is black.
  • size- The size of the Button is 25sp.
We have an ImageView with the following attributes-
  • id- for the identification of the image.
  • width- We set the width of the image as wrap_content.
  • height- We set the height of the image as wrap_content.
  • layout_below- This attribute set the image below the button.
  • margin- Margin of the image is 10dp.
  • padding- Padding of the image is 10dp.
  • alignment- Alignment of the image is center.
Now we will see the Java file. The code of the Java file is listed below.
  1. import android.graphics.drawable.Drawable;  
  2. import android.os.Bundle;  
  3. import android.view.View;  
  4. import android.widget.Button;  
  5. import android.widget.ImageView;  
  6.   
  7. public class MainActivity extends AppCompatActivity {  
  8.   
  9.     @Override  
  10.     protected void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.activity_main);  
  13.   
  14.         Button button = findViewById(R.id.button);  
  15.         button.setOnClickListener(new View.OnClickListener() {  
  16.             @Override  
  17.             public void onClick(View view) {  
  18.                 // Set the Image in ImageView on button click  
  19.                 ImageView imageView = findViewById(R.id.image_view);  
  20.                 imageView.setImageResource(R.drawable.csharplogo);  
  21.             }  
  22.         });  
  23.     }  
Explanation
 
In the following code, first we create the object of button class and then set the click listener of the button. When we click on the button the image will be visible below the button. 
 
The above code generates the following output.
 
Output2
 
Explanation
 
In this image, we saw a button "Set Button" is visible on the screen of the device. when we will click on the button the image will be show. Here is the second image.
 
Output3
 
Explanation
 
In this image, when we click the button the image is visible on the screen.
 

VideoView in Android

 
VideoView is used to display and play a video file in Android project. It can load images from different sources to compute its measurement from the video so that it can be used to provide display choices such as scaling and tinting for any layout manager.
 
Note
 
Here we will create a project for our VideoView example in Android. Let's start working with VideoView in Android Studio.
 
Step 1
 
Now we will see the activity_main.xml file of the project. The code of this file is listed below.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"    
  4.     xmlns:tools="http://schemas.android.com/tools"    
  5.     android:layout_width="match_parent"    
  6.     android:layout_height="match_parent"    
  7.     tools:context=".MainActivity">    
  8.     
  9.     <VideoView    
  10.         android:id="@+id/video_view"    
  11.         android:layout_width="match_parent"    
  12.         android:layout_height="match_parent"    
  13.         />    
  14.     
  15. </RelativeLayout>    
Explanation
 
In this XML file, as a root layout we use RelativeLayout. For working with VideoView we add a VideoView in the XML file with following attributes-
  • id- Id is used for identification of the VideoView.
  • width- We set the width of the VideoView is match_parent.
  • height- We set the height of the VideoView as match_parent.
Step 2
 
Now we will see the Java file of the project. Here is the code of the Java file.
  1. package manigautam.apps.exampleproject;  
  2.   
  3. import androidx.appcompat.app.AppCompatActivity;  
  4. import android.media.MediaPlayer;  
  5. import android.net.Uri;  
  6. import android.os.Bundle;  
  7. import android.widget.MediaController;  
  8. import android.widget.Toast;  
  9. import android.widget.VideoView;  
  10.   
  11. public class MainActivity extends AppCompatActivity {  
  12.     MediaController mediaControls;  
  13.     VideoView videoView;  
  14.   
  15.     @Override  
  16.     protected void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.activity_main);  
  19.   
  20.         videoView = findViewById(R.id.video_view);  
  21.   
  22.         videoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.video));  
  23.         if (mediaControls == null) {  
  24.             // create an object of media controller class  
  25.             mediaControls = new MediaController(MainActivity.this);  
  26.             mediaControls.setAnchorView(videoView);  
  27.         }  
  28.   
  29.         // set the media controller for video view  
  30.         videoView.setMediaController(mediaControls);  
  31.         // set the uri for the video view  
  32.         videoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.video));  
  33.         // start a video  
  34.         videoView.start();  
  35.   
  36.         // implement on completion listener on video view  
  37.         videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {  
  38.             @Override  
  39.             public void onCompletion(MediaPlayer mp) {  
  40.                 Toast.makeText(getApplicationContext(), "Thank You...!!!", Toast.LENGTH_LONG).show();  
  41.                 // display a toast when an video is completed  
  42.             }  
  43.         });  
  44.   
  45.         videoView.setOnErrorListener(new MediaPlayer.OnErrorListener() {  
  46.             @Override  
  47.             public boolean onError(MediaPlayer mp, int what, int extra) {  
  48.                 Toast.makeText(getApplicationContext(), "Oops An Error Occur While Playing Video...!!!", Toast.LENGTH_LONG).show();
  49. // display a toast when an error occurs while playing an video  
  50.                 return false;  
  51.             }  
  52.         });  
  53.     }  
Explanation
 
In the following code file of the Java, first we create an object of media controller class and set the media controller for video view. After that set the URL for the video view and use "start()" method for starting the video in the application. Now we will implement the listener on video view for completion the video, when the video will complete a toast message will be printed on the screen "Thank you...!!!" We set a an error listerener on the VideoView, that means if any error will be occured while playing the video, then a toast will be printed "Oops An Error Occur While Playing Video...!!!".
 
Now we will run our Android project. The above code of our project generates the following output.
 
 

Summary

 
In this article, we learned about ImageView and VideoView in Android, its different types with examples, and how to use ImageView and VideoView in Android Application.