Flipboard in Android using Retrofit

Flipper
Have you ever wondered about how app works.Do you ever think bout doing that project?.Now,its time.In this project,i am using FlipLibrary and our Retrofit project .It’s really simple and easy to implement.

Introduction

This tutorial project is mainly focused on creating flip animation with network call using retrofit.Firstly,We deploy a sample json to myjson.Please make note that this is a sample project and comment if there is any issues.

Openaphid-androidflip is a library mainly for making flipping like animation.Android OS 2.2+ is the minimum os requirement.

Retrofit is a REST Client for Android and Java by Square.This library is easy learn and has more features.This is beginner friendly compared to other Networking libraries.You can GET,POST,PUT,DELETE ..etc using this library.

We also use picasso for image loading.

Read this before using Picasso or Volley and read my previous post for more about Retrofit.

You must read this tutorial: https://themakeinfo.com/2015/04/android-retrofit-images-tutorial/

Because,interesting fact is that,every thing same like this tutorial.

GITHUB Project

1) androidflip Library to Android Studio

The best method is to download the project code and import in studio.I face some issues when added directly to my project.However,if your an experienced developer you definitely try that.

2) Adding other Libraries

***For those who don’t import our project

For Retrofit :

compile 'com.squareup.retrofit:retrofit:1.9.0'

Currently,1.9.0 is the latest version.You can get updated version from here.

For Picasso :

compile 'com.squareup.picasso:picasso:2.5.2'

3) Create Sample Api

To create a sample json api, you only need Excel Spreadsheet 😀 .Data are from previuosI will show in screenshots.

1) Enter details to Excel Sheet

jsonExel

2) Now,copy data to data-convertor. For this, i will select JSON-Properties.

toJsonConvertor

3) For deploying sample data,you can use myjson.com/

myjson

4) Create Project

You can start create project from scratch or just import my github project.

1) Create new Android Project by : File => New Project and fill description and click Next.

2) Fill the minimum SDK for the project, i use 4.0+ (Retrofit requires Android 2.3+or Java 6)

3) Select Blank Activity and then fill out the details Activity Name and Layout Name then click Finish.

4) For Gradle : You can add Retrofit and Picasso library by adding it on app=>build.gradle (in project view). flipper_dependencies

5) Also create two packages as network and model.

6) Right Click on network and Click New => Java Class ,then Name it as api and Kind asInterface.

7) Right Click on Package model and Click New => Java Class,then Name it as Flower and Kind as Class.

8) Right Click on Package and Click New => Java Class,then name it as adapter (this will use for list view adapter).

Project_structure

5) Android Manifest

1) Add INTERNET PERMISSION

6) Model Class

As i already instructed,we need to create a POJO/model for out sample json

JSON Link : https://api.myjson.com/bins/44m6s

For this project , i tried www.jsonschema2pojo.org

7) api.java

8) Layout

Here, we dont use activity_main.xml. There only needed the adapter layout (item.xml from Retrofit-Images).complex1.xml is the file.

complex1.xml

We adjust the layout item here.Next,we will create adapter class.

9)Adapter Class

This class controls all the flip view and loading functions.We extends with Baseadapter. If you don’t know the difference between arrayadapter and baseadapter,check this.Most of this code is from the sample android-flip project.I altered their source for our project.
In here,imgUrl is loading image url and wikiUrl is for loading wikipedia from button click.

Note: We already added corresponding wikipedia names in pur sample JSON.

For initializing TextView and ImageView in FlipLibrary,we use UI class from aphid-flip library.

Eg : For Text:

UI .<TextView>findViewById(layout, R.id.title)
   .setText(AphidLog.format("%d. %s", position, data.getName()));

This will initialize Textview and also set the text in corresponding section.

For Image:

 img = UI.findViewById(layout,R.id.photo);

***Note this while doing

10) MainActivity.java

Firstly,we need to initialize flipView using flipController by :

 flipView = new FlipViewController(this, FlipViewController.VERTICAL);

You can use,

FlipViewController.VERTICAL for vertical & FlipViewController.HORIZONTAL for horizontal.

After this ,we just need to add out Reastadpter code for retrieving datas.

Conclusion

Here,i just introduced a new library using our previous tutorials. Openaphid-androidflip is awesome library.You can create amazing flip style using this.
There is a known flickering issue when we flip one some pages.Please consult their github issues for more on this.
Subscribe for more latest post!!!

MakeInfo

Flip like Flipboard using Retrofit