# Display image obtained from internet locally

## Overview

By the end of this lab you will be able to fetch image from internet and display it in android app.

## Requirements

We will connect to the image url on internet using Glide, which is a 3rd party library. We will be coding in Kotlin, the official language for android development. The pre-requisite for this lab is to have Android Studio set up and its SDK and emulator installed. If you are launching app on phone, then have the [phone connected with Android Studio](https://guides.codepath.com/android/Running-Apps-on-Your-Device).

## Resources

* ImageView
* Glide library

## Lab Instructions

### Step 1 : Set up

- Add dependencies : As Glide is not available in default android SDK, we need to include this library in our app to start using its classes and functions. For this, we add following in app/build.gradle of the app.

implementation 'com.github.bumptech.glide:glide:4.13.2'
annotationProcessor ‘com.github.bumptech.glide:compiler:4.13.2'

Also provide internet access permissions in AndroidManifest file.

  <manifest ......>
   
 <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    
   <application ...
         ..........
    /application>

After editing this file, you will see *Sync Now* link on top right of this file. Click this to add the above dependencies to include Glide Library into your project.

🎯 **Checkpoint 1**: In the Project tab, located in the panel of android studio, expand the project/app name. Goto the External libraries directory. Expand directory, you will notice the Glide dependencies that we added.

### Step 2 :

Goto **Project -> app**, right click and select **New->Activity -> Empty Activity**. Create an *Empty Activity* with name say **ImageDisplayActivity**. And layout file name say **activity_image_display**.

We now need a container for image. ImageView from view hierarchy is a view component that can populate any image you provide in its android:src attribute.

<ImageView
         android:id="@+id/image"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/my_image"
         android:contentDescription="@string/my_image_description"
         />

You can provide scaling option using android:scaleType attribute or image tint options.

> `android:scaleType="fitCenter"`

🎯 **Checkpoint 2**: Check the Split or Design Tab for layout. Provide some image for now using `android:src=“@drawable/ic_launcher_background”`. This is image is launcher icon you see when launch your project app. Hence we are displaying locally stored image temporarily.

### Step 3 :

In MainActivity, add setContent(R.layout.activity_image_display) in onCreate. This could have been already added by default while creating EmptyActivity using New->Activity.

Now let us reference the view using id of the image.

val ivImage = findViewById<ImageView>(R.id.image)

🎯 **Checkpoint 3**: Run the app till here. You will see the local image displayed on mobile/emulator screen for your app.

### Step 4:

Now comes the climax part that we are waiting for, which is display that cool [internet image](https://codepath.com/images/logos/icon.png) in your own app. 🤩 We add line shown below.

Glide.with(this).load("https://codepath.com/images/logos/icon.png").into(imageView)

Here, we pass *this* to Glide which means that loading is tied to lifecycle of this ImageDisplayActivity. The data from url is loaded into imageview using reference ivImage.

Note : If you notice the [internet image](https://codepath.com/images/logos/icon.png) link, it is http url. However, android will prevent loading this url directly. As we trust this site, we can workaround this by changing *http* to *https*. More info [here](https://trendoceans.com/how-to-fix-cleartext-http-traffic-not-permitted-in-android/).

🎯 Checkpoint 3:

Run the app. You will see following image loaded in your app.

<img src="https://i.imgur.com/XNsNaQO.png" width="100"/>

 😎 🎉 Congratulations, you’ve completed your lab! 🎉 😎

## Things to explore

- [ ] Load Gif in ImageView
- [ ] Center align the image loaded using ConstraintLayout
- [ ] Use [placeholder in Glide](https://github.com/bumptech/glide) to show temporary image