Android ImageView – Image From ExternalStorage

This tutorial explores how to retrieve image file from the external storage of the device to an imageview. It’s a beginner tutorial meant to show us how to retrieve an external image from the filesystem and use it in our android application. You can find more details about Exernal Storage here.

Common Questions this example explores

• Android ExternalStorage example.
• Android SD Card Example.
• Fetch image from sd card to imageview.
• Retrieving images from external storage.
• Get image from filesystem to an imageview
• Android Filesystem example.

Tools Used

This example was written with the following tools:

• Windows 8
• AndroidStudio IDE
• BlueStacks Emulator

Source Code

Lets jump directly to the source code.

AndroidManifest.xml

• Given that we are reading an image from external storage, we need permission to read external storage. So add the permission as we have done below.

<?xml version="1.0" encoding="utf-8"?>
<manifest 
    package="com.tutorials.hp.imageviewfilesystem">

    <uses-permission android_name="android.permission.READ_EXTERNAL_STORAGE"/>

    <application
        android_allowBackup="true"
        android_icon="@mipmap/ic_launcher"
        android_label="@string/app_name"
        android_supportsRtl="true"
        android_theme="@style/AppTheme">
        <activity
            android_name=".MainActivity"
            android_label="@string/app_name"
            android_theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Build.Gradle

• Normally in android projects, there are two build.gradle files. One is the app level build.gradle, the other is project level build.gradle. The app level belongs inside the app folder and its where we normally add our dependencies and specify the compile and target sdks.
• We need Picasso ImageLoader to load our images from File URI.So add its dependency.
• Also Add dependencies for AppCompat and Design support libraries.
• Our MainActivity shall derive from AppCompatActivity while we shall also use Floating action button from design support libraries.

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "24.0.0"

    defaultConfig {
        applicationId "com.tutorials.hp.imageviewfilesystem"
        minSdkVersion 15
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.0.0'
    compile 'com.android.support:design:24.0.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
}

MainActivity.java

• Launcher activity.
• ActivityMain.xml inflated as the contentview for this activity.
• Reference our imageview where our image shall be displayed.

package com.tutorials.hp.imageviewfilesystem;

import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.squareup.picasso.Picasso;

import java.io.File;

public class MainActivity extends AppCompatActivity {

    ImageView img;
    TextView nameTxt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        img= (ImageView) findViewById(R.id.img);
       nameTxt= (TextView) findViewById(R.id.nameTxt);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                File downloadsFolder= Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS);
                Uri file=Uri.fromFile(new File(downloadsFolder,"person.png"));

                if(file.toString() != null && file.toString().length()>0)
                {
                    Picasso.with(MainActivity.this).load(file).placeholder(R.drawable.placeholder).into(img);
                    nameTxt.setText(file.toString());
                }else
                {
                    Toast.makeText(MainActivity.this, "Empty URI", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

}

ActivityMain.xml

• To contain our ContentMain.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    
    
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    tools_context="com.tutorials.hp.imageviewfilesystem.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        android_src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

ContentMain.xml

• To hold our imageview where the image shall be displayed.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.imageviewfilesystem.MainActivity"
    tools_showIn="@layout/activity_main">

    <TextView
        android_id="@+id/nameTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Image Path" />
    <ImageView
        android_id="@+id/img"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content" />
</RelativeLayout>

Video/Preview

https://www.youtube.com/watch?v=emCUrX0bSdk

Download

• Download the Project below:Download

How To Run

1. Download the project above.
2. You’ll get a zipped file,extract it.
3. Open the Android Studio.
4. Now close, already open project.
5. From the Menu bar click on File >New> Import Project.
6. Now Choose a Destination Folder, from where you want to import project.
7. Choose an Android Project.
8. Now Click on “OK“.
9. Done, your done importing the project,now edit it.

More

YouTube

• Visit our channel for more examples like these.

Facebook

• Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.