Thursday 23 June 2016

Android load image from remote resource or internet: using glide

Hi guys, today i'm gonna show you how to load an image from a remote resource (server) or a url

Project Structure:



1. Create a new android project, name it Glide

2. Import library glide:
// Glide library
compile group: 'com.github.bumptech.glide', name: 'glide', version: '3.7.0'

* Get the InternetConnection.java class here.

3. Go to the activity_main.xml and add an imageview and a button, make sure your code looks like this one:

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.androidmastermind.glide.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@mipmap/ic_launcher"
        android:minHeight="250dp" />

    <Button
        android:id="@+id/loadImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Load Image From Internet" />

</RelativeLayout>

4. Instanciate the imageview and the button in the MainActivity.java,
- Before loading the image, will first check if there's internet connection, this is to prevent our app from force closing if there  is no internet while fetching the image.
 Make sure your MainActivity.java code looks like this one.

package com.androidmastermind.glide;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;

public class MainActivity extends AppCompatActivity {

    String url = "https://lh3.googleusercontent.com/-KGMeXERHAF0/VfaszovhC4I/
AAAAAAAACZU/ZQOWAuKtguo/w530-h795-p-rw-v1/15%2B-%2B1";

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

        final ImageView imageView = (ImageView) findViewById(R.id.imageView);
        Button buttonLoadImage = (Button) findViewById(R.id.loadImage);

        assert buttonLoadImage != null;
        buttonLoadImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (new InternetConnection(getBaseContext()).isInternetAvailable()) {

                    assert imageView != null;
                    Glide.with(getBaseContext())
                            .load(url)
                            .asBitmap()
                            .thumbnail(0.5f)
                            .placeholder(R.mipmap.ic_launcher)
                            .error(android.R.drawable.stat_notify_error)
                            .diskCacheStrategy(DiskCacheStrategy.ALL)
                            .into(imageView);

                } else {
                    Toast.makeText(getBaseContext(), "Check your internet connectivity",
 Toast.LENGTH_LONG).show();
                }

            }
        });

    }
}

5. Add the internet and write external permissions in the AndroidManifest.xml file, 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidmastermind.glide">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.WRITE_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">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

6. Deploy the app in genymotion.

i) Before loading the image


ii) After loading the image


That's all, pretty straight forward, and less coding.
* Glide loads the original photo quality and in a faster way



3 comments: