OkHttp 3 Example in Android

Building Simple app using OkHttp Networking Library to get the users data from https://randomuser.me/ API.
RecyclerView to show the users data in List,
Square Picasso for image Loading.
DiagonalLayout for showing image in diagonal shape.





Step: 1
======
Add all Libraries to build.gradle file like below

compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.squareup.okhttp3:okhttp:3.5.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.android.support:recyclerview-v7:25.0.1'
    compile 'com.android.support:cardview-v7:25.0.1'
    compile 'com.android.support:design:25.0.1'
    compile 'com.github.florent37:diagonallayout:1.0.2'
    compile 'de.hdodenhof:circleimageview:2.1.0'


Step: 2
======
Create a model class

package com.pratap.okhttpexample.models;

import java.io.Serializable;

/**
 * Created by pratap.kesaboyina on 15-12-2016.
 */

public class User implements Serializable {


    private String firstName;


    private String lastName;
    private String emailId;
    private String phone;
    private String cell;
    private String imageURL;


    public User() {

    }


    public User(String firstName, String lastName, String cell, String phone, String emailId, String imageURL) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.cell = cell;
        this.phone = phone;
        this.emailId = emailId;
        this.imageURL = imageURL;
    }


    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getCell() {
        return cell;
    }

    public void setCell(String cell) {
        this.cell = cell;
    }

    public String getEmailId() {
        return emailId;
    }

    public void setEmailId(String emailId) {
        this.emailId = emailId;
    }

    public String getImageURL() {
        return imageURL;
    }

    public void setImageURL(String imageURL) {
        this.imageURL = imageURL;
    }
}



Step: 3
======
Create an interface like below to get the reponse or error msg from the service when network request success or failed.


public interface IServiceRequest {

     void onResponse(String response);

     void onError(String errorResponse);


}


Step: 4
======
Create a ServiceHandler Class for all network request to call asynchronously using Okhttp Library.

i used this webservice call to fetch 5 random users, Please check the json response.

https://api.randomuser.me/?results=5


package com.pratap.okhttpexample.network;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.MediaType;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;

/**
 * Created by pratap.kesaboyina on 09-12-2016.
 */

public class ServiceHandler {


    public static final MediaType JSON = MediaType.parse("application/json; charset=utf-8");

    public static OkHttpClient client = new OkHttpClient();

    public static Call post(String url, String json, Callback callback) {
        RequestBody body = RequestBody.create(JSON, json);
        Request request = new Request.Builder()
                .url(url)
                .post(body)
                .build();
        Call call = client.newCall(request);
        call.enqueue(callback);
        return call;
    }

    public static Call get(String url, Callback callback) {
        Request request = new Request.Builder()
                .url(url)
                .build();
        Call call = client.newCall(request);
        call.enqueue(callback);
        return call;
    }


}



Step: 5
======
Create a Activity class with Recyclerview in XML Layout and call the https://randomuser.me/ API to get the users data randomly from the webservice.


package com.pratap.okhttpexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.Gravity;
import android.widget.Toast;

import com.pratap.okhttpexample.adapters.UsersAdapter;
import com.pratap.okhttpexample.interfaces.IServiceRequest;
import com.pratap.okhttpexample.models.User;
import com.pratap.okhttpexample.network.ServiceHandler;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.Response;


public class MainActivity extends AppCompatActivity implements IServiceRequest {


    String responseData = "";
    private RecyclerView recyclerView;
    private RecyclerView.Adapter mAdapter;

    IServiceRequest serviceRequest;

    private List<User> usersList;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getSupportActionBar().setTitle("Contacts");

        serviceRequest = MainActivity.this;
        usersList = new ArrayList<User>();


        recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        recyclerView.setHasFixedSize(true);
        // use a linear layout manager
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        // create an Object for Adapter
        mAdapter = new UsersAdapter(this, usersList);
        // set the adapter object to the Recyclerview
        recyclerView.setAdapter(mAdapter);


        callService();
    }


    public void callService() {

        ServiceHandler.get("https://api.randomuser.me/?results=5", new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                e.printStackTrace();

                responseData = "No internet Connection";
                serviceRequest.onError(responseData);
            }

            @Override
            public void onResponse(Call call, Response response) {
                try {

                    if (response.isSuccessful()) {

                        responseData = response.body().string();


// jsonParsing
                        JSONObject jsnobject = new JSONObject(responseData);

                        JSONArray jsonArray = jsnobject.getJSONArray("results");
                        for (int i = 0; i < jsonArray.length(); i++) {
                            JSONObject users = jsonArray.getJSONObject(i);


                            JSONObject nameObject = users.getJSONObject("name");
                            String firstName = nameObject.getString("first");
                            String lastName = nameObject.getString("last");


                            String emailId = users.getString("email");
                            String phone = users.getString("phone");
                            String cell = users.getString("cell");


                            JSONObject pictureObject = users.getJSONObject("picture");
                            String largeImageURL = pictureObject.getString("large");


                            User user = new User(firstName, lastName, cell, phone, emailId, largeImageURL);

                            usersList.add(user);


                        }


                        serviceRequest.onResponse(responseData);
                        Log.i("Response", responseData);
                    } else {

                        responseData = "Something went Wrong";
                        serviceRequest.onError(responseData);
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                    responseData = "IO Error";
                    serviceRequest.onError(responseData);
                } catch (JSONException e) {
                    e.printStackTrace();
                    responseData = "Parsing Error";
                    serviceRequest.onError(responseData);
                }
            }
        });
    }


    @Override
    public void onResponse(String response) {

        recyclerView.post(new Runnable() {
            @Override
            public void run() {
                mAdapter.notifyDataSetChanged();
            }
        });
    }

    @Override
    public void onError(String errorResponse) {


        Toast toast = Toast.makeText(this, errorResponse, Toast.LENGTH_SHORT);
        toast.setGravity(Gravity.CENTER, 0, 0);
        toast.show();

    }


}







XML Layout for the Main Activity





activity_main.xml






<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:scrollbars="vertical" />


</LinearLayout>







Step: 5

======



Create an Adapter for the RecyclerView used in MainActivity to bind the users data.








package com.pratap.okhttpexample.adapters;

/**
 * Created by pratap.kesaboyina on 15-12-2016.
 */

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.pratap.okhttpexample.R;
import com.pratap.okhttpexample.UserDetailActivity;
import com.pratap.okhttpexample.models.User;
import com.squareup.picasso.Picasso;
import java.util.List;

public class UsersAdapter extends
        RecyclerView.Adapter<UsersAdapter.UserViewHolder> {

    private List<User> usersList;

    private Context context;

    public UsersAdapter(Context mContext, List<User> users) {
        this.context = mContext;
        this.usersList = users;

    }


    @Override
    public UserViewHolder onCreateViewHolder(ViewGroup parent,
                                             int viewType) {
        // create a new view
        View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(
                R.layout.users_row, null);

        // create UserViewHolder

        UserViewHolder userViewHolder = new UserViewHolder(itemLayoutView);

        return userViewHolder;
    }

    @Override
    public void onBindViewHolder(UserViewHolder userViewHolder, int position) {

        User singleUser = usersList.get(position);

        userViewHolder.user = singleUser;

        userViewHolder.txt_name.setText(singleUser.getFirstName() + " " + singleUser.getLastName());

        userViewHolder.txt_cell.setText(usersList.get(position).getCell());

        // Loads the picture
        Picasso.with(context).load(singleUser.getImageURL()).into(userViewHolder.img_photo);


    }

    // Returns the size
    @Override
    public int getItemCount() {
        return usersList.size();
    }

    public static class UserViewHolder extends RecyclerView.ViewHolder {

        public TextView txt_name;
        public TextView txt_cell;

        public ImageView img_photo;

        public User user;

        public UserViewHolder(View itemLayoutView) {
            super(itemLayoutView);

            txt_name = (TextView) itemLayoutView.findViewById(R.id.txt_name);

            txt_cell = (TextView) itemLayoutView.findViewById(R.id.txt_cell);

            img_photo = (ImageView) itemLayoutView.findViewById(R.id.img_photo);

            itemLayoutView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {

                    //   Toast.makeText(view.getContext(), user.getFirstName() + " " + user.getLastName(), Toast.LENGTH_SHORT).show();


                    Intent userDetails = new Intent(view.getContext(), UserDetailActivity.class);

                    userDetails.putExtra("USER", user);

                    view.getContext().startActivity(userDetails);


                }
            });


        }

    }


}







Create an xml layout for each row item for the Adapter





users_row.xml








<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:gravity="center_vertical"
    android:padding="16dp">

    <ImageView
        android:id="@+id/img_photo"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/img_photo"
        android:orientation="vertical">

        <TextView
            android:id="@+id/txt_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:paddingLeft="5dp"
            android:text="Pratap Kumar"
            android:textColor="@android:color/black"
            android:textSize="18sp" />


        <TextView
            android:id="@+id/txt_cell"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:text="8121390970"
            android:textSize="16sp" />


    </LinearLayout>

</RelativeLayout>







Step: 6

======

Create another Activity to show each user data seperatly in another screen when u click on each user item in RecyclerView List.








package com.pratap.okhttpexample;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;

import com.pratap.okhttpexample.models.User;
import com.squareup.picasso.Picasso;


/**
 * Created by pratap.kesaboyina on 15-12-2016.
 */

public class UserDetailActivity extends AppCompatActivity {

    private ImageView img_photo;

    private TextView txt_fullname,txt_emailid,txt_cellnumber,txt_phonenumber;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_userdetails_diagnol);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle("Contact Details");


        img_photo = (ImageView) findViewById(R.id.img_photo);
        txt_fullname = (TextView) findViewById(R.id.txt_fullname);

        txt_cellnumber = (TextView) findViewById(R.id.txt_cellnumber);
        txt_phonenumber = (TextView) findViewById(R.id.txt_phonenumber);
        txt_emailid = (TextView) findViewById(R.id.txt_emailid);

        User userDetail = (User) getIntent().getSerializableExtra("USER");

        Picasso.with(this).load(userDetail.getImageURL()).into(img_photo);
        txt_fullname.setText(userDetail.getFirstName() + " " + userDetail.getLastName());
        txt_cellnumber.setText(userDetail.getCell());
        txt_emailid.setText(userDetail.getEmailId());
        txt_phonenumber.setText(userDetail.getPhone());

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}







create an xml layout for the user detail activity








<?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"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE"
    >

    <com.github.florent37.diagonallayout.DiagonalLayout
        android:id="@+id/diagonalLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:diagonal_angle="15"
        android:elevation="0dp"
        android:paddingBottom="16dp"
        app:diagonal_gravity="left"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        >




        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/nav_bg"/>

        <TextView
            android:id="@+id/txt_fullname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="@android:color/white"
            android:layout_gravity="top|left"
            android:textAllCaps="true"
            android:fontFamily="sans-serif-light"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="70dp"
            android:textSize="25sp"
            />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:orientation="horizontal"
            android:layout_marginTop="105dp"
            >

            <TextView
                android:id="@+id/txt_cellnumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=""
                android:textColor="@android:color/white"
                android:layout_gravity="top|left"
                android:textStyle="bold"
                android:fontFamily="sans-serif-condensed"
                android:textSize="14sp"
                />


        </LinearLayout>

    </com.github.florent37.diagonallayout.DiagonalLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/img_photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="170dp"
        android:elevation="15dp"
        app:civ_border_width="2dp"
        app:civ_border_color="#FFF"
        android:src="@mipmap/ic_launcher"/>


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/img_photo">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="10dp"
            android:paddingRight="10dp">


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_margin="8dp"
                android:elevation="5dp"
                app:cardCornerRadius="3dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <View
                        android:layout_width="5dp"
                        android:layout_height="match_parent"
                        android:background="@color/colorPrimaryDark" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="10dp"
                        android:gravity="center_vertical"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Phone Number"
                            android:textColor="#212121"
                            android:textSize="14sp" />

                        <TextView
                            android:id="@+id/txt_phonenumber"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:gravity="left"
                            android:textColor="#AA212121"
                            android:textSize="12sp" />
                    </LinearLayout>
                </LinearLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_margin="8dp"
                android:elevation="5dp"
                app:cardCornerRadius="3dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <View
                        android:layout_width="5dp"
                        android:layout_height="match_parent"
                        android:background="@color/colorPrimaryDark" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="10dp"
                        android:gravity="center_vertical"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="EmaiId"
                            android:textColor="#212121"
                            android:textSize="14sp" />

                        <TextView
                            android:id="@+id/txt_emailid"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:gravity="left"
                            android:textColor="#AA212121"
                            android:textSize="12sp" />
                    </LinearLayout>
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </ScrollView>

</RelativeLayout>











Step: 7

======

Add permissions, Activities to AndroidManifest.xml










<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.pratap.okhttpexample">


    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


        <activity
            android:name=".UserDetailActivity"
            android:label="@string/app_name"

            android:screenOrientation="portrait">

            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".MainActivity" />


        </activity>
    </application>

</manifest>









Step: 8

======

styles.xml








<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  
</resources>









Credits

========

All the credits to respective authors for their awesome library's provided for android community to build better apps.























































































Comments











Post a Comment































Popular posts from this blog









Flutter ListView Search




















Image







            contactslist.dart  ================      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  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100 101 102 103 104 105 106  class  ContactsList  extends  StatefulWidget {   static  String  tag =  'contactlist-page' ;    @ override  State < StatefulWidget >  createState() {        return  new  _ContactsListState();   } }  List < Contact >  contacts =  [   Contact( fullName:  'Pratap Kumar' , email:  'pratap@example.com' ),   Contact( fullName:  'Jagadeesh' , email:  'Jagadeesh@example.com' ),   Contact( fullName:  'Srinivas' , email:  'Srinivas@example.com' ),   Contact( ful








Read more










Flutter Navigation Drawer Example




















Image







                            main.dart   =========     import  'package:flutter/material.dart' ; import  'package:akeepo/navdrawer.dart' ; void  main() =>  runApp(MyApp());  class  MyApp  extends  StatelessWidget {     @ override  Widget build(BuildContext context) {     return  MaterialApp(       title:  'Flutter' ,       debugShowCheckedModeBanner:  false ,       theme:  ThemeData(         primarySwatch:  Colors.blue,        ),       home:  NavDrawer(),      );   } }            navdrawer.dart  ================     import  'package:flutter/material.dart' ;  class  NavDrawer  extends  StatefulWidget {   @ override  _NavDrawerState createState() =>  _NavDrawerState(); }  class  _NavDrawerState  extends  State < NavDrawer >  {   @ override  Widget build(BuildContext context) {     return  Scaffold(       appBar:  AppBar( title:  Text( "Nav Drawer" )),       drawer:  new  Drawer(         child:  new  ListView(           children:  < 








Read more










Swipe RecyclerView using AndroidSwipeLayout




















Image







Android Swipe Layout This will be the most powerful Android swipe UI component   In one of my Project, I have a requirement to create a Swiping Layout For RecyclerView. I looked for different Libraries. I found this Great Library Android Swipe Layout. I have tried this Library for RecyclerView. I have done sample Project using this great Library. This Library Supports ListView and GridView also. Thanks to the Author for Creating this useful Library: https://github.com/daimajia/ Library Link : https://github.com/daimajia/AndroidSwipeLayout/ Wiki Page: https://github.com/daimajia/AndroidSwipeLayout/wiki Step: 1 ====== Add dependency to your build.gradle file 1 2 3 4 dependencies {     compile 'com.daimajia.swipelayout:library:1.2.0@aar'     } Step: 2 ====== Create a row for RecyclerView using SwipeLayout 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








Read more