Introduction

The android media viewer full screen image tutorial series describes how to load a full screen version of the image thumbnail in a new activity.

Get Code

The code can be found on github from the following instructions below

https://github.com/mobapptuts/media-thumbnail-viewer.git Tag

media-viewer-full-image

or you can run this command

git clone https://github.com/mobapptuts/media-thumbnail-viewer.git –branch

media-viewer-full-image

This video describes how to import the code from github using android studio and also how to use git tags

Steps

Create a new activity to display the image in full screen format

Note – I will be using android studio to create the intent which will do the extras for me including adding the activity to the android manifest file.

In the onCreate method we will be checking the calling intent to get the Uri of the thumbnail image.

Note to assist with performance we will use the Glide image loading library.

public class FullScreenImageActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_full_screen_image);

        ImageView fullScreenImageView = (ImageView) findViewById(R.id.fullScreenImageView);

        Intent callingActivityIntent = getIntent();
        if(callingActivityIntent != null) {
            Uri imageUri = callingActivityIntent.getData();
            if(imageUri != null && fullScreenImageView != null) {
                Glide.with(this)
                        .load(imageUri)
                        .into(fullScreenImageView);
            }
        }
    }
}

 Add an ImageView to the layout associated with the full screen image activity

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mobapptut.mediathumbviewer.FullScreenImageActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fullScreenImageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

In the activity on click method create a intent, set the data with the image Uri and then start the full screen image activity

@Override
   public void onImageClicked(Uri imageUri) {
       Intent fullScreenIntent = new Intent(this, FullScreenImageActivity.class);
       fullScreenIntent.setData(imageUri);
       startActivity(fullScreenIntent);
       // Toast.makeText(MediaThumbMainActivity.this, "imageId = " + imageId, Toast.LENGTH_SHORT).show();
   }

Android media viewer full screen image summary

This android development tutorial is a basic example of how to open an image in a new activity.

We used android studio to create a new activity which does the extras for us including adding the activity to the android manifest file.

We then used a standard android method of inserting the image Uri to an android intent. And then starting the new activity with the intent.

And to return to the recycler grid view it is just a matter of selecting the back button which will return to the previous activity on the stack.

Android media viewer full screen image