Simplified Coding

  • About
  • Contact Us
  • Advertise
  • Privacy Policy
You are here: Home / Android Application Development / Android AdapterViewFlipper Example using Retrofit and Glide

Android AdapterViewFlipper Example using Retrofit and Glide

April 19, 2017 by Belal Khan 7 Comments

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
    • 2.1 Our Web Service
    • 2.2 Creating a new Project
    • 2.3 Adding Dependencies
    • 2.4 Defining Retrofit Models
    • 2.5 Creating Retrofit Service
    • 2.6 Creating AdapterViewFlipper
      • 2.6.1 Creating Layout
      • 2.6.2 Creating Layout for AdapterViewFlipper
      • 2.6.3 Creating Adapter
      • 2.6.4 Fetching Data using Retrofit and Displaying it on AdapterViewFlipper
    • 2.7 Sharing is Caring:
    • 2.8 Related

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.

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

  • The above URL is returning the following data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.

Hero.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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.

Heroes.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.

APIService.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 .

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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.

flipper_items.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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.

FlipperAdapter.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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.

MainActivity.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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.

Android AdapterViewFlipper Example Source Code

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 🙂

Sharing is Caring:

  • Tweet
  • Share on Tumblr
  • More
  • Pocket
  • Print
  • Email

Related

Filed Under: Android Application Development, Android Intermediate Tagged With: android adapterviewflipper, viewflipper android

About Belal Khan

I am Belal Khan, I am currently pursuing my MCA. In this blog I write tutorials and articles related to coding, app development, android etc.

Comments

  1. 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 ….

    Reply
  2. 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

    Reply
  3. Joanne says

    September 21, 2017 at 4:32 pm

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

    Reply
  4. 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

    Reply
  5. 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

    Reply
  6. shubhangi sonawane says

    July 28, 2018 at 7:24 am

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

    Reply
  7. 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 ..

    Reply

Leave a Reply to shubhangi sonawane Cancel reply

Your email address will not be published. Required fields are marked *

Search




Download our Android App

Simplified Coding in Google Play

About Me

Belal Khan

Hello I am Belal Khan, founder and owner of Simplified Coding. I am currently pursuing MCA from St. Xavier's College, Ranchi. I love to share my knowledge over Internet.

Connect With Me

Follow @codesimplified
Simplified Coding

Popular Tutorials

  • Android JSON Parsing – Retrieve From MySQL Database
  • Android Login and Registration Tutorial with PHP MySQL
  • Android Volley Tutorial – Fetching JSON Data from URL
  • Android Upload Image to Server using Volley Tutorial
  • Android TabLayout Example using ViewPager and Fragments
  • Retrieve Data From MySQL Database in Android using Volley
  • Firebase Cloud Messaging Tutorial for Android
  • Android Volley Tutorial – User Registration and Login
  • Android Upload Image to Server Using PHP MySQL
  • Android Navigation Drawer Example using Fragments




About Simplified Coding

Simplified Coding is a blog for all the students learning programming. We are providing various tutorials related to programming and application development. You can get various nice and simplified tutorials related to programming, app development, graphics designing and animation. We are trying to make these things simplified and entertaining. We are writing text tutorial and creating video and visual tutorials as well. You can check about the admin of the blog here and check out our sitemap

Quick Links

  • Advertise Here
  • Privacy Policy
  • Disclaimer
  • About
  • Contact Us
  • Write for Us

Categories

Android Advance Android Application Development Android Beginners Android Intermediate Ionic Framework Tutorial JavaScript Kotlin Android Others PHP Advance PHP Tutorial React Native

Copyright © 2017 · Simplified Coding· All rights Reserved. And Our Sitemap.All Logos & Trademark Belongs To Their Respective Owners·

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.