Android ViewModel using Retrofit - ✅ A Simple Tutorial

Heard about ViewModel in android? Android ViewModel is an architecture component that is designed to store UI related data. According to Android Developer Website.

The ViewModel class is designed to store and manage UI-related data in a lifecycle conscious way. The ViewModel class allows data to survive configuration changes such as screen rotations.

If you remember one of our last Retrofit Tutorial where we learned about fetching JSON data from a URL. Now if one of our activity has some data on it fetched from server, but if for some reasons (for example orientation changes) the activity is recreated it will fetch the data from the server again. Fetching the same data from the server is a waste of resources. An efficient solution here is to separate the view data ownership from UI Controller logic.

So, in this Android View Model tutorial we will do the same thing we did in the previous Retrofit Tutorial but here we will be using the ViewModel architecture.

Table of Contents

1 Setting Up Android Project with RecyclerView and Retrofit
2 Using Android ViewModel to load data Asynchronously using Retrofit

Setting Up Android Project with RecyclerView and Retrofit

Creating a new Android Studio Project

As always the first step is creating a new Android Studio Project. And in that project we will see how to work with Android ViewModel.
I have created a project using an EmptyActivity named AndroidViewModel.

API to fetch data

You can use any URL if you have any, to fetch data. Here I am going to use the following URL.

https://www.simplifiedcoding.net/demos/marvel/

The above URL is returning a list of Marvel Super Heroes. You can open the URL to see what it is returning. It is the same URL that we used while learning Retrofit JSON.

Adding Required Dependency

For this project we are going to use the following dependencies.

RecyclerView – To display list of superheroes.
Glide – To load image from URL.
Retrofit – For fetching data from the URL.
ViewModel – The architectural component

So the first we will add all the above mentioned dependencies in the app level build.gradle file.

dependencies {

implementation fileTree(include: ['*.jar'], dir: 'libs')

implementation 'com.android.support:appcompat-v7:27.1.1'

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.2'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

//adding dependencies

implementation 'com.android.support:recyclerview-v7:27.1.1'

implementation 'com.squareup.retrofit2:retrofit:2.4.0'

implementation 'com.squareup.retrofit2:converter-gson:2.4.0'

implementation 'com.github.bumptech.glide:glide:4.3.1'

annotationProcessor 'com.github.bumptech.glide:compiler:4.3.1'

implementation "android.arch.lifecycle:extensions:1.1.0"

implementation "android.arch.lifecycle:viewmodel:1.1.0"

}

After adding all the dependencies sync your project.

Creating the POJO class for Hero

Create a new class named Hero.java and write the following code.

package com.example.belalkhan.androidviewmodel;

public class Hero {

private String name;

private String realname;

private String team;

private String firstappearance;

private String createdby;

private String publisher;

private String imageurl;

private String bio;

public Hero(String name, String realname, String team, String firstappearance, String createdby, String publisher, String imageurl, String bio) {

this.name = name;

this.realname = realname;

this.team = team;

this.firstappearance = firstappearance;

this.createdby = createdby;

this.publisher = publisher;

this.imageurl = imageurl;

this.bio = bio;

}

public String getName() {

return name;

}

public String getRealname() {

return realname;

}

public String getTeam() {

return team;

}

public String getFirstappearance() {

return firstappearance;

}

public String getCreatedby() {

return createdby;

}

public String getPublisher() {

return publisher;

}

public String getImageurl() {

return imageurl;

}

public String getBio() {

return bio;

}

Setting Up RecyclerView

Creating RecyclerView and RecyclerView Layout

Now come inside activity_main.xml and create a RecyclerView here, in this RecyclerView we will display the Hero List.

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

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

xmlns:app="http://schemas.android.com/apk/res-auto"

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