Android AdapterViewFlipper Example using Retrofit and Glide

Hello guys in Android AdapterViewFlipper Example, we will learn using Android AdapterViewFlipper. We will use Retrofit to fetch data from a URL and we will also use Glide to load images from URLs. So lets begin with our Android AdapterViewFlipper tutorial.

Table of Contents

1 What is Android AdapterViewFlipper?
2 Android AdapterViewFlipper Example

What is Android AdapterViewFlipper?

AdapterViewFlipper is a UI element that can be used for switching views. We can create slider like things by using AdapterViewFlipper.

You can see a very simple example of android AdapterViewFlipper below.

Android AdapterViewFlipper Example

Our Web Service

I have a URL that is fetching me the data.

https://www.simplifiedcoding.net/demos/view-flipper/heroes.php

The above URL is returning the following data.

// 20170419221930

// https://www.simplifiedcoding.net/demos/view-flipper/heroes.php

{

"heroes": [

{

"name": "Spiderman",

"imageurl": "https://simplifiedcoding.net/demos/view-flipper/images/spiderman.jpg"

{

"name": "Iron Man",

"imageurl": "https://simplifiedcoding.net/demos/view-flipper/images/ironman.jpg"

{

"name": "Thor",

"imageurl": "https://simplifiedcoding.net/demos/view-flipper/images/thor.jpg"

{

"name": "Wolverine",

"imageurl": "https://simplifiedcoding.net/demos/view-flipper/images/wolverine.jpeg"

}

]

}

So we have name and imageurl. For fetching this data in android side we will use Retrofit and to load the image we will use Glide.

Creating a new Project

Create a new Project with an Empty Activity using Android Studio.
Now once the project is loaded add Retrofit, Gson and Glide to it.

Adding Dependencies

As we have to use Retrofit and Glide. Add the following lines inside your app level build.gradle.

dependencies {

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

androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {

exclude group: 'com.android.support', module: 'support-annotations'

})

compile 'com.android.support:appcompat-v7:25.3.1'

compile 'com.android.support.constraint:constraint-layout:1.0.2'

testCompile 'junit:junit:4.12'

//add these lines

compile 'com.squareup.retrofit2:retrofit:2.2.0'

compile 'com.squareup.retrofit2:converter-gson:2.2.0'

compile 'com.github.bumptech.glide:glide:3.7.0'

}

Now sync your project with gradle.

Defining Retrofit Models

According to the JSON response we are getting we will need two models for Retrofit API.
First will store our hero. So create a class named hero.java and write the following code.

package net.simplifiedcoding.viewflipperexample;

import com.google.gson.annotations.SerializedName;

/**

* Created by belal on 19/4/17.

public class Hero {

@SerializedName("name")

private String name;

@SerializedName("imageurl")

private String url;

public Hero(String name, String url) {

this.name = name;

this.url = url;

}

public String getName() {

return name;

}

public String getUrl() {

return url;

}

As the response contains a list of heroes, we need one more model class to store all the heroes in an ArrayList so create a class named Heroes.java and write the following code.

package net.simplifiedcoding.viewflipperexample;

import com.google.gson.annotations.SerializedName;

import java.util.ArrayList;

/**

* Created by belal on 19/4/17.

public class Heroes {

@SerializedName("heroes")

private ArrayList<Hero> heros;

public Heroes(){

}

public ArrayList<Hero> getHeros(){

return heros;

}

The models are ready now we will define the Retrofit service.

Creating Retrofit Service

Create an interface named APIService.java and write the following code.

package net.simplifiedcoding.viewflipperexample;

import retrofit2.Call;

import retrofit2.http.GET;

/**

* Created by belal on 19/4/17.

public interface APIService {

@GET("heroes.php")

Call<Heroes> getHeroes();

}

The retrofit API is also ready. Now lets finally build our Android AdapterViewFlipper.

Creating AdapterViewFlipper

Creating Layout

Open activity_main.xml and add an AdapterViewFlipper .

<?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"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="net.simplifiedcoding.viewflipperexample.MainActivity">

<AdapterViewFlipper

android:id="@+id/adapterViewFlipper"

android:layout_width="match_parent"

android:layout_height="match_parent">

</AdapterViewFlipper>

</RelativeLayout>

Creating Layout for AdapterViewFlipper

We also need a layout for the screen of AdapterViewFlipper so create a file named flipper_items.xml inside layout directory and write the following xml code.

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

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

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/imageView"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<TextView

android:text="Spiderman"

android:textAlignment="center"

android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</LinearLayout>

Now we will build the Adapter for our AdapterViewFlipper.

Creating Adapter

Create a class named FlipperAdapter.java and write the following code.

package net.simplifiedcoding.viewflipperexample;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.ArrayList;

/**

* Created by belal on 19/4/17.

public class FlipperAdapter extends BaseAdapter {

private Context mCtx;

private ArrayList<Hero> heros;

public FlipperAdapter(Context mCtx, ArrayList<Hero> heros){

this.mCtx = mCtx;

this.heros = heros;

}

@Override

public int getCount() {

return heros.size();

}

@Override

public Object getItem(int position) {

return null;

}

@Override

public long getItemId(int position) {

return 0;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

Hero hero = heros.get(position);

LayoutInflater inflater = LayoutInflater.from(mCtx);

View view = inflater.inflate(R.layout.flipper_items, null);

TextView textView = (TextView) view.findViewById(R.id.textView);

ImageView imageView = (ImageView) view.findViewById(R.id.imageView);

textView.setText(hero.getName());

Glide.with(mCtx).load(hero.getUrl()).into(imageView);

return view;

}

Fetching Data using Retrofit and Displaying it on AdapterViewFlipper

Now come to MainActivity.java and write the following code.

package net.simplifiedcoding.viewflipperexample;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.AdapterViewFlipper;

import android.widget.Toast;

import java.util.ArrayList;

import retrofit2.Call;

import retrofit2.Callback;

import retrofit2.Response;

import retrofit2.Retrofit;

import retrofit2.converter.gson.GsonConverterFactory;

public class MainActivity extends AppCompatActivity {

//the base url

public static final String BASE_URL = "https://www.simplifiedcoding.net/demos/view-flipper/";

//adapterviewflipper object

private AdapterViewFlipper adapterViewFlipper;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//getting adapterviewflipper

adapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper);

//building retrofit object

Retrofit retrofit = new Retrofit.Builder()

.baseUrl(BASE_URL)

.addConverterFactory(GsonConverterFactory.create())

.build();

//Defining retrofit api service

APIService service = retrofit.create(APIService.class);

//creating an api call

Call<Heroes> call = service.getHeroes();

//making the call

call.enqueue(new Callback<Heroes>() {

@Override

public void onResponse(Call<Heroes> call, Response<Heroes> response) {

//getting list of heroes

ArrayList<Hero> heros = response.body().getHeros();

//creating adapter object

FlipperAdapter adapter = new FlipperAdapter(getApplicationContext(), heros);

//adding it to adapterview flipper

adapterViewFlipper.setAdapter(adapter);

adapterViewFlipper.setFlipInterval(1000);

adapterViewFlipper.startFlipping();

}

@Override

public void onFailure(Call<Heroes> call, Throwable t) {

Toast.makeText(getApplicationContext(), t.getMessage(), Toast.LENGTH_LONG).show();

}

});

}

Now run your application and you will see your AdapterViewFlipper the same as you seen in the video demo.
If you are having problems building it you can try my source code. You can get my source code from below link.

[sociallocker id=1372]Android AdapterViewFlipper Example Source Code[/sociallocker]

So thats all for this Android AdapterViewFlipper Example. If you found it helpful please share it on your social networks. Also if you are having any confusions or queries lets discuss it on comments below. Thank You 🙂

Android AdapterViewFlipper Example using Retrofit and Glide

What is Android AdapterViewFlipper?

Android AdapterViewFlipper Example

Our Web Service

Creating a new Project

Adding Dependencies

Defining Retrofit Models

Creating Retrofit Service

Creating AdapterViewFlipper

Creating Layout

Creating Layout for AdapterViewFlipper

Creating Adapter

Fetching Data using Retrofit and Displaying it on AdapterViewFlipper

Expand Your Knowledge: Next Tutorial Picks

Kotlin Concurrency: coroutineScope vs supervisorScope Explained

Android Interview Questions Blueprint: Your Ultimate Reference

Kotlin Ktor Android Client – Simplifying Android Networking

Android Proto DataStore Mastery with Kotlin

Retrofit Android Tutorial – Using Retrofit 2.2 with PHP Restful API

Video Call Android Tutorial – Implementing Video Call using Sinch