Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it

Welcome folks today in this blog post we will be building an android app where we will allow the user to download random images from unsplash using okhttp library on every button click and we will be displaying the image using the picasso library in java. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new android project inside the android studio and then you will see the below directory structure as shown below

Now we need to edit the AndroidManifest.xml file you need to include the Internet permission to allow the android to make http calls

AndroidManifest.xml

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

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

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.ImageCropper"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools">

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

<application

android:allowBackup="true"

android:dataExtractionRules="@xml/data_extraction_rules"

android:fullBackupContent="@xml/backup_rules"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:supportsRtl="true"

android:theme="@style/Theme.ImageCropper"

tools:targetApi="31">

<activity

android:name=".MainActivity"

android:exported="true">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Now we need to edit the activity_main.xml layout file where we will have a simple button to generate random images and then we will have the ImageView widget to show the image.

activity_main.xml

<?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=".MainActivity"
    tools:ignore="HardcodedText">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />

    <Button
        android:id="@+id/button"
        android:layout_width="290dp"
        android:layout_height="83dp"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="85px"
        android:layout_marginBottom="12dp"
        android:text="Download Image" />

</RelativeLayout>

<?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=".MainActivity"

tools:ignore="HardcodedText">

<ImageView

android:id="@+id/image_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:scaleType="centerCrop" />

<Button

android:id="@+id/button"

android:layout_width="290dp"

android:layout_height="83dp"

android:layout_alignParentBottom="true"

android:layout_marginLeft="85px"

android:layout_marginBottom="12dp"

android:text="Download Image" />

</RelativeLayout>

Adding Libraries in Gradle

Now we need to edit the build.gradle file and copy paste the following code

build.gradle

plugins {
    id 'com.android.application'
}

android {
    namespace 'com.example.imagecropper'
    compileSdk 33

    defaultConfig {
        applicationId "com.example.imagecropper"
        minSdk 24
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.8.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    implementation 'com.squareup.picasso:picasso:2.71828'
    implementation 'com.squareup.okhttp3:okhttp:3.14.9'

}

plugins {

id 'com.android.application'

}

android {

namespace 'com.example.imagecropper'

compileSdk 33

defaultConfig {

applicationId "com.example.imagecropper"

minSdk 24

targetSdk 33

versionCode 1

versionName "1.0"

testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

}

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

dependencies {

implementation 'androidx.appcompat:appcompat:1.6.1'

implementation 'com.google.android.material:material:1.8.0'

implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

testImplementation 'junit:junit:4.13.2'

androidTestImplementation 'androidx.test.ext:junit:1.1.5'

androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'

implementation 'com.squareup.picasso:picasso:2.71828'

implementation 'com.squareup.okhttp3:okhttp:3.14.9'

}

As you can see we are adding the picasso and okhttp libraries and now we need to press the sync now to build the gradle of the app

And now we need to edit the MainAcitvity.java file and copy paste the following code

MainActivity.java

package com.example.imagecropper;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

import java.io.IOException;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private Button button;

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

        imageView = findViewById(R.id.image_view);
        button = findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                downloadImage();
            }
        });
    }

    private void downloadImage() {
        String url = "https://source.unsplash.com/random";
        OkHttpClient client = new OkHttpClient();

        Request request = new Request.Builder()
                .url(url)
                .build();

        client.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                e.printStackTrace();
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                final String imageUrl = response.request().url().toString();

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Picasso.get()
                                .load(imageUrl)
                                .into(imageView);
                    }
                });
            }
        });
    }

}

package com.example.imagecropper;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import com.squareup.picasso.Picasso;

import java.io.IOException;

import okhttp3.Call;

import okhttp3.Callback;

import okhttp3.OkHttpClient;

import okhttp3.Request;

import okhttp3.Response;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

private Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

button = findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

downloadImage();

}

});

}

private void downloadImage() {

String url = "https://source.unsplash.com/random";

OkHttpClient client = new OkHttpClient();

Request request = new Request.Builder()

.url(url)

.build();

client.newCall(request).enqueue(new Callback() {

@Override

public void onFailure(Call call, IOException e) {

e.printStackTrace();

}

@Override

public void onResponse(Call call, Response response) throws IOException {

final String imageUrl = response.request().url().toString();

runOnUiThread(new Runnable() {

@Override

public void run() {

Picasso.get()

.load(imageUrl)

.into(imageView);

}

});

}

});

}

As you can see we are first of all getting the references from the xml of the button and the ImageView widget and then we are sending the http request to the unsplash api using the okhttp library and then we are displaying the image using the picasso library as shown below every time the user clicks the button.