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.

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

1	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"
    }
  ]
}

// 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'
}

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;
    }
}

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;
    }
}

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();
}

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>

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

<?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;
    }
}

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();
            }
        });

    }


}

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.

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 🙂

Comments

Moe Ma ka says

April 21, 2017 at 5:46 pm

https://www.simplifiedcoding.net/retrofit-android-tutorial-to-get-json-from-server/

Please reply.
This way, want to use.

Your Myanmar’s always the audience ….

AbdulRehman says

June 18, 2017 at 7:43 am

how to make an adapter or an android app offline that in array adapter we click and and another activty opens how we can make this type of app offline plz reply or tell any tutotial link thanks

Joanne says

September 21, 2017 at 4:32 pm

Works perfectly!!! I have been searching for this for a long time. Thankyou!

Nilkanth says

July 9, 2018 at 5:41 pm

I want to setOnClickListener in AdapterViewFlipper and get values from flipper item so please help me

vithani nilkanth says

July 11, 2018 at 8:58 am

i create app using your code but now one problem faced
i want to set onItemClickListner so please advise

shubhangi sonawane says

July 28, 2018 at 7:24 am

not working..even i addede internate permissions….app shows unfortunatly stop

Devendra says

November 26, 2018 at 5:17 am

hi sir if i have 4 text and one image url in json aaray than how can i get data from the server…Thanks in advance ..

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

Related

About Belal Khan

Comments

Leave a Reply to shubhangi sonawane Cancel reply

About Simplified Coding

Quick Links

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

Sharing is Caring:

Related

About Belal Khan

Comments

Leave a Reply to shubhangi sonawane Cancel reply

About Simplified Coding

Quick Links

Categories