Create your account

Already have an account? Login here

Create account

The Ultimate Guide To Social Login In Android Using CloudRail

By Vivek Ramesh - Jul 31, 2016

Hi,

 

Today, I will show you how to integrate Facebook, Twitter, Google+, Instagram, LinkedIn, Yahoo, Windows Live and GitHub from your Android app. I am going to build a simple app that lets you login to any of the services mentioned above using a third party library known as CloudRail API.

What does our app look like?

I need two screens or Activities to make this work. I will show the list of social login services available on the first screen and your details on the second screen after you login. Your details include:

  1. Identifier or the social login service you used
  2. Full name
  3. Email
  4. Description when available
  5. Date of birth when available
  6. Gender if specified
  7. Locale or the regional settings you are using on your social media profile
  8. The URL of your profile picture. I will use this URL to actually load the image into an ImageView using a library called Picasso.

How does it work?

The user interface of my app is divided into two screens: one the main screen showing all the social login buttons represented by activity_main.xml and my other screen, that displays the user details after they logged in through one of the services represented by activity_details.xml.

A) The Main Screen activity_main.xml

Notice the use of my style below. I will post what my style actually contains further below. In the below snippet, notice how every Button has an android:onClick attribute. The value of this attribute is the name of the method that Android will call whenever you click the Button. Now, wait a second! Did we create those methods? We'll get to that shortly.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.coursetro.socialloginusingcloudrail.MainActivity">

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performFacebookLogin"
        android:background="@color/facebook"
        android:text="@string/facebook" />

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performTwitterLogin"
        android:background="@color/twitter"
        android:text="@string/twitter" />

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performGooglePlusLogin"
        android:background="@color/google_plus"
        android:text="@string/google_plus" />

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performInstagramLogin"
        android:background="@color/instagram"
        android:text="@string/instagram" />

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performLinkedInLogin"
        android:background="@color/linkedin"
        android:text="@string/linkedin" />

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performYahooLogin"
        android:background="@color/yahoo"
        android:text="@string/yahoo" />

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performWindowsLiveLogin"
        android:background="@color/windowsLive"
        android:text="@string/windowslive" />

    <Button
        style="@style/SocialLoginButtonStyle"
        android:onClick="performGitHubLogin"
        android:background="@color/github"
        android:text="@string/github" />
</LinearLayout>

Below is my SocialLoginButtonStyle as I promised earlier. All I have done is set the width, height, layout weight of 1 to each View so that it takes equal amount of space vertically, a text color of white and a text appearance that simply follows material design guidelines.

B) The Style for our Social Login Buttons frm styles.xml

<style name="SocialLoginButtonStyle">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_weight">1</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat.Button</item>
</style>

C) The MainActivity.java code

 Let's take a look at how the sample code for Facebook Login may look like.

public void performFacebookLogin(View view) {
    Facebook facebook = new Facebook(this, getString(R.string.facebook_app_key), getString(R.string.facebook_app_secret));

    String name = facebook.getFullName();
    String email = facebook.getEmail();
    //...
}

That's all the code you actually need to write to perform login using Facebook and get the full name and email of the logged in user. But guess what?

  • All this needs to be performed in the background thread. Android offers me several options with which I can run my code in a background thread. I could use an AsyncTask but an IntentService is a better solution as its lifecycle is independent of the Activity calling it. Even if the user exits the MainActivity or rotates the screen, the IntentService will remain unaffected and it will run the code needed to perform login.
  • All I need to do is save the value of which social login provider, the user has selected and use this value inside the IntentSevice to perform the actual login in the background and fetch user details. 
  • Its obvious that we need a bunch of constant values each representing a social login provider and a variable that stores which social login provider was clicked by the user.
  • I will consider using an enumeration for making a bunch of related constants. Here's what my enum looks like.
package com.coursetro.socialloginusingcloudrail;

/**
 * Created by vivz on 29/07/16.
 */
public enum SocialMediaProvider {
    FACEBOOK,
    TWITTER,
    GOOGLE_PLUS,
    INSTAGRAM,
    LINKED_IN,
    YAHOO,
    WINDOWS_LIVE,
    GITHUB
}

Let's have a look at our MainActivity.java file that does the main job.

package com.coursetro.socialloginusingcloudrail;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    //1
    private SocialMediaProvider mProfile;

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

    public void performFacebookLogin(View view) {

        //2
        mProfile = SocialMediaProvider.FACEBOOK;

        //3
        performLogin();
    }

    public void performTwitterLogin(View view) {
        mProfile = SocialMediaProvider.TWITTER;
        performLogin();
    }

    public void performGooglePlusLogin(View view) {
        mProfile = SocialMediaProvider.GOOGLE_PLUS;
        performLogin();
    }

    public void performInstagramLogin(View view) {
        mProfile = SocialMediaProvider.INSTAGRAM;
        performLogin();
    }

    public void performLinkedInLogin(View view) {
        mProfile = SocialMediaProvider.LINKED_IN;
        performLogin();
    }

    public void performYahooLogin(View view) {
        mProfile = SocialMediaProvider.YAHOO;
        performLogin();
    }

    public void performWindowsLiveLogin(View view) {
        mProfile = SocialMediaProvider.WINDOWS_LIVE;
        performLogin();
    }

    public void performGitHubLogin(View view) {
        mProfile = SocialMediaProvider.GITHUB;
        performLogin();
    }

    //4
    public void performLogin() {
        Intent intent = new Intent(this, LoginService.class);
        intent.putExtra(LoginService.EXTRA_PROFILE, mProfile);
        startService(intent);
    }
}
  • //1 Make a variable of our enumeration.
  • //2 For Facebook login, simply assign the variable to contain the FACEBOOK constant.
  • //3 Call the performLogin() method.
  • //4 Notice how I call startService() and pass the value that tells which social media provider the user has selected.
  • I repeat the same steps for all other social login providers.
  • Now before, I show you how the actual code for the IntentService works, let's get our hands dirty with these social media providers :) and that means registering ourselves with them telling them "Hey I wanna make an app that will access your data"

Steps

A) Setup Facebook Login For Android

You will need an app created on Facebook's end which acts as the backend app that directly interacts with Facebook data. You can make one HERE. Let me show you the steps involved in making one.

1) Open the Facebook Developer 'console' to register yourself

All the hard work that you and I are about to do on Facebook's developer dashboard is to obtain two keys: an app key and an app secret key both given to us by Facebook which is ultimately used between our app and Facebook's backend app to validate each other.

 

2) Re-enter your password when the console asks you.

 

3) Accept the Facebook Developer policies.

 

4) You are successfully registered.

 

5) Select the platform for your app.

Instead of selecting Android here, choose "basic Setup".

 

6) Create App ID

The idea in this step is to create a unique ID for your app that identifies itself amongst all the other apps developed for accessing Facebook data. I set the display name to "Social Login Using CloudRail" as the name won't be seen by the user but it is for the developer's reference. I added my contact email which Facebook may use to reach me if my app experiences issues. I have set the category as "Productivity" but you can choose any category depending on what your app actually does.

 

7) Product Setup

My app ID has been created successfully and is the number "1729304786326296" which you can see at the top left. Facebook offers several features such as access to login information, messenger data and so on. I need to decide what all features are needed for my app. In my case, I am adding the "Facebook Login" feature. The way to add "Facebook Login" is to simply click the option on the left pane that says "Add product".

 

8) Final step

I have the "APP ID" and the "APP SECRET" which I haven't shown in the screenshot below. Infact, if you click "Dashobard" in the left pane, you will be able to see your "APP SECRET". Notice that I have added "https://cloudrailauth.com/auth" is a redirect URI. The data is not coming directly from Facebook. It is rather coming through CloudRail API and we want Facebook to send our information to us through their API which is why we need a redirect URI in the first place. At this step, all the setup for our app on Facebook's end is done. I just need to add a few lines of code in my Android app and we'll be ready to connect to Facebook. I will be doing that eventually as I would also like to show you how I setup the remaining social login services first. Let's get rid of this 'developer dashboard' stuff first.

 

Copy paste these keys for now inside a text file on your desktop. We will need them later in Android Studio.

B) Setup Twitter Login For Android

Similar to Facebook, you will need an app created on Twitter's end which acts as the backend app that directly interacts with Twitter data. You can make one HERE. Let me show you the steps involved in making one. All the hard work done below on Twitter's developer dashboard again has the same goal: 2 keys that will be given to us by Twitter similar to Facebook.

1) Create a new app

Just google "Twitter Developers" and I bet you will land on that page faster than a rocket lands on the moon. For me, it says I haven't made any apps yet. Time to make one! Click on the option that says "Create new app".

 

2) Application Details

Similar to Facebook, don't forget to add the name of your app which in my case happens to be "Social Login Using CloudRail". I normally frown when people ask me to enter descriptions but guess what? It's better than getting an error message that says "All fields marked with a * are compulsory" :) Did you guys notice the '*' near description? You need to set the "Callback URL" to "https://cloudrailauth.com/auth" similar to what I did back while working with Facebook.

 

3) Accept the terms and conditions.

If I scroll down on the same page, I see the option to create my app but hey, must accept the terms and conditions first.

 

4) The Final Step

Ah! There is our prize, the consumer key or app key and the consumer secret or app secret key. I covered my secret key using sublime text editor :) The only thing left to do is go to Android Studio and write some code that is ready to work with Twitter.

 

Copy paste these keys for now in a text file on your desktop. We will need them later.

C) Setup Google Plus Login For Android

Similar to Twitter, you will need an app created on Google's end which acts as the backend app that directly interacts with Google data. You can make one HERE. Let me show you the steps involved in making one.

1) Create a project

After you login using your Google account, click to expand "Select a project" and you will see the option to "Create a project"

 

2) New Project

I will set the "Project Name" as "Social Login Using CloudRail" and hit the "Create" button at the bottom.

 

3) Manage all projects

After hitting "Create" from the previous step, Google takes me back to the main page once again. This time I click to expand "Select a project" at the top and choose the option "Manage all projects".

 

4) The Projects Screen

I should be able to see my project "Social Login Using CloudRail" now.

 

5) Search for Google+ API

Google offers a ton of APIs which is why they have this search bar at the top. By default, most APIs are disabled for usage which means in my case, Google+ is disabled by default. I would like to enable Google+ in my project so that we can login. I simply search for it in the screenshot below.

 

6) Enable Google+ API

Click on the "ENABLE" button.

 

7) Go To Credentials

We have enabled Google+ but in order to use it, Google would like to know who we are.

 

8) Add Credentials To Your Project.

Simply answer the questions in the screenshot below and we are good to go.

 

9) OAuth Consent Screen

This is the most important page where real work begins for us, typists :) Specify the email address, the name of the product as it is shown to the users, and simply hit "Save".

 

10) Create Client ID

We specify the type of application as "Web Application". Don't forget to add a value for redirect URI. The users will taken to our app from Google through CloudRail API. Hit the "Create" button at the end.

 

11) The Final Step

Finally! We have the keys that we so desperately wanted from Google: the client ID or app key and the client secret or app secret key.

 

Save the keys in a text file on your desktop.

D) Setup Instagram Login For Android

By now, I guess you have got a hang of it and I don't have to repeat myself :) Make an app on instagram's end HERE and your goal is to get the app key and the app secret key from Instagram.

1) Sign up as an Instagram Developer

The very first time you login to their developer dashboard, it will ask you a few details. In my case, I gave it my website name, phone number :) a secret, I am afraid and why I was planning to make an app using their platform.

 

2) Hello Developers

 

3) Register A New Client

I will create an app first on their end by selecting the option that says "Register A New Client".

 

4) Register New Client ID

Finally, I am taken to the main screen where our data entry is quite similar to what we did so far. Don't forget to set the "Valid Redirect URI" to "https://cloudrailauth.com/auth" similar to Facebook, Twitter and G+ so that once the person logs in, you get their instagram data through CloudRail.

 

5) The Final Step

Yay! Keys at last! If everything went well, you will see your client ID and client SECRET :) similar to our previous social login profiles.

 

Save the keys in a text file on your desktop.

E) Setup LinkedIn Login For Android

1) Create Application

I guess I have done this too many times by now for me to explain :)

 

2) Create a New Application

Look at all the details I gave below. If I am not mistaken, linkedin was refusing to create my app unless I uploaded a logo. So I just added something for the time being. Hit the "Submit" button at the end when you are done.

 

3) The Final Step

And finally, we have our keys! That wasn't so hard now, was it? Don't forget the add the "Authorized Redirect URLs" below and yea! save your keys on the desktop for now.

 

F) Setup Yahoo Login For Android

Search for "Yahoo Developer" on Google :) and you will find it right HERE.

1) Create a New App

If you have no previous apps created, you will see a screen similar to mine as shown below.

 

2) Create Application

I have set the "Application Name" to "Social Login Using CloudRail" and "Application Type" to "Web Application". Don't forget to set the "Callback Domain". The most important part of all is to set permissions for accessing data from Yahoo. In my case, I have specified that I am only interested in the user's public profile information below.

 

3) The Final Step

If everything went well, you will see this screen which gives you the client ID or app key and the client secret or app secret key. Copy these values to the same text file on your desktop.

 

G) Setup Windows Live Login For Android

Create an account HERE or Google "Microsoft Developers Network" and you will be taken to a page where you will create an app like we did so far.

1) Add an App

I have no previous apps and therefore this page is blank for me. I will clikc the "Add an App" button right away.

 

2) New Application Registration

 

3) Properties

I got the application ID or app key and I can generate a new password under "Application Secrets" and be sure to save the keys to a file on your Desktop as I got a warning from Windows saying it won't show me the keys again.

 

4) Add Platform

Click the "Add Platform" under "Platforms" and the dialog shown in the screenshot below opens where I will select "Web".

 

5) Redirect URIs

Notice under "Platforms" under "Web" I have added the same redirect URI by clicking that button "Add URI".

 

6) The Final Step

Click "Save" at the bottom and you will see the screen below. We are ready to proceed to our final setup with GitHub.

 

H) Setup GitHub Login For Android

Phew! What a journey so far! We are here at the last stop. Click HERE or search for "GitHub Developers console".

1) Register a new OAuth Application

Don't forget the "Authorization Callback URL". We have filled the other details too many times by now :)

 

2) The Final Step

Don't you wish the others also gave you the keys directly in the second step? The Client ID would be our app key and the client secret would be our app secret key. Ctrl + C, Ctrl + V those values to that text file on your desktop.

 

Let's complete the code

1) An object to store User Account details

The IntentService will perform the login and get the details but we need to show them inside an Activity! And that means our IntentService is going to construct an object with all the details and send this object to our DetailsActivity.java file. This object is going to implement the Parcelable interface which lets you transfer it from the Service to the Activity. It's just a bunch of get-set methods with some code for making it a Parcelable.

package com.coursetro.socialloginusingcloudrail;

import android.os.Parcel;
import android.os.Parcelable;

public class UserAccount implements Parcelable {
    private String identifier;
    private String fullName;
    private String email;
    private String description;
    private String gender;
    private long day;
    private long month;
    private long year;
    private String pictureURL;
    private String locale;

    public String getIdentifier() {
        return identifier;
    }

    public void setIdentifier(String identifier) {
        this.identifier = identifier;
    }

    public String getFullName() {
        return fullName;
    }

    public void setFullName(String fullName) {
        this.fullName = fullName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public long getDay() {
        return day;
    }

    public void setDay(long day) {
        this.day = day;
    }

    public long getMonth() {
        return month;
    }

    public void setMonth(long month) {
        this.month = month;
    }

    public long getYear() {
        return year;
    }

    public void setYear(long year) {
        this.year = year;
    }

    public String getPictureURL() {
        return pictureURL;
    }

    public void setPictureURL(String pictureURL) {
        this.pictureURL = pictureURL;
    }

    public String getLocale() {
        return locale;
    }

    public void setLocale(String locale) {
        this.locale = locale;
    }

    public UserAccount() {

    }

    protected UserAccount(Parcel in) {
        identifier = in.readString();
        fullName = in.readString();
        email = in.readString();
        description = in.readString();
        gender = in.readString();
        day = in.readLong();
        month = in.readLong();
        year = in.readLong();
        pictureURL = in.readString();
        locale = in.readString();
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(identifier);
        dest.writeString(fullName);
        dest.writeString(email);
        dest.writeString(description);
        dest.writeString(gender);
        dest.writeLong(day);
        dest.writeLong(month);
        dest.writeLong(year);
        dest.writeString(pictureURL);
        dest.writeString(locale);
    }

    @SuppressWarnings("unused")
    public static final Parcelable.Creator<UserAccount> CREATOR = new Parcelable.Creator<UserAccount>() {
        @Override
        public UserAccount createFromParcel(Parcel in) {
            return new UserAccount(in);
        }

        @Override
        public UserAccount[] newArray(int size) {
            return new UserAccount[size];
        }
    };
}

2) IntentService that does all the hard work in the background

Now, let's move to the meat of our app: the IntentService represented by our LoginService.java file. Read the comments in code :)

package com.coursetro.socialloginusingcloudrail;

import android.app.IntentService;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

import com.cloudrail.si.exceptions.AuthenticationException;
import com.cloudrail.si.interfaces.Profile;
import com.cloudrail.si.services.Facebook;
import com.cloudrail.si.services.GitHub;
import com.cloudrail.si.services.GooglePlus;
import com.cloudrail.si.services.Instagram;
import com.cloudrail.si.services.LinkedIn;
import com.cloudrail.si.services.MicrosoftLive;
import com.cloudrail.si.services.Twitter;
import com.cloudrail.si.services.Yahoo;
import com.cloudrail.si.types.DateOfBirth;

public class LoginService extends IntentService {

    public static final String EXTRA_PROFILE = "profile";
    public static final String EXTRA_SOCIAL_ACCOUNT = "account";
    private static final String TAG = "VIVZ";

    public LoginService() {
        super("Social Login Service");
    }

    private Profile init(SocialMediaProvider provider) throws AuthenticationException {
        //Superclass reference variable = subclass object
        Profile profile = null;
        switch (provider) {
            case FACEBOOK:
                profile = new Facebook(this, getString(R.string.facebook_app_key), getString(R.string.facebook_app_secret));
                break;
            case TWITTER:
                profile = new Twitter(this, getString(R.string.twitter_app_key), getString(R.string.twitter_app_secret));
                break;
            case GOOGLE_PLUS:
                profile = new GooglePlus(this, getString(R.string.google_plus_app_key), getString(R.string.google_plus_app_secret));
                break;
            case INSTAGRAM:
                profile = new Instagram(this, getString(R.string.instagram_app_key), getString(R.string.instagram_app_secret));
                break;
            case LINKED_IN:
                profile = new LinkedIn(this, getString(R.string.linked_in_app_key), getString(R.string.linked_in_app_secret));
                break;
            case YAHOO:
                profile = new Yahoo(this, getString(R.string.yahoo_app_key), getString(R.string.yahoo_app_secret));
                break;
            case WINDOWS_LIVE:
                profile = new MicrosoftLive(this, getString(R.string.windows_live_app_key), getString(R.string.windows_live_app_secret));
                break;
            case GITHUB:
                profile = new GitHub(this, getString(R.string.github_app_key), getString(R.string.github_app_secret));
                break;
        }
        //At run time, profile will contain one of the 8 objects above and will fetch details from that particular provider
        return profile;
    }

    @Override
    protected void onHandleIntent(Intent intent) {
        if (intent != null) {
            try {
                Bundle extras = intent.getExtras();
                //Guess what I sent from the Activity which calls this Service! Our Enumeration variable!
                //It contains FACEBOOK or TWITTER or ... and is Serializable!
                SocialMediaProvider provider = (SocialMediaProvider) extras.getSerializable(EXTRA_PROFILE);
                
                //You already know which social account the user will use, just create an object of it.
                Profile profile = init(provider);
                
                //Create a User Account object with all the details
                UserAccount account = init(profile);
                
                //Start another Activity to show the user details
                Intent detailsIntent = new Intent(getApplicationContext(), DetailsActivity.class);
                
                //To directly start activities from an IntentService, we need to add this flag, Google if curious!
                detailsIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                
                //Send the User Account object with all details
                detailsIntent.putExtra(EXTRA_SOCIAL_ACCOUNT, account);
                startActivity(detailsIntent);
            } catch (AuthenticationException e) {
                
                //When you cancel in the middle of a login, cloud rail was throwing this exception, hence!
                Log.e(TAG, "onHandleIntent: You cancelled", e);
                
            }
        }
    }

    private UserAccount init(Profile profile) {
        //The usual get-set stuff
        UserAccount account = new UserAccount();
        account.setIdentifier(profile.getIdentifier());
        account.setFullName(profile.getFullName());
        account.setEmail(profile.getEmail());
        account.setDescription(profile.getDescription());
        DateOfBirth dob = profile.getDateOfBirth();
        if (dob != null) {
            Long day = dob.getDay();
            Long month = dob.getMonth();
            Long year = dob.getYear();
            if (day != null) {
                account.setDay(day);
            }
            if (month != null) {
                account.setMonth(month);
            }
            if (year != null) {
                account.setYear(year);
            }
        }
        account.setGender(profile.getGender());
        account.setPictureURL(profile.getPictureURL());
        account.setLocale(profile.getLocale());
        return account;
    }
}
  • The whole bunch of code above only does three things.
  • It first gets the value of which service the user selected. If you remember the MainActivity.java file, we are talking about the variable mProfile.
  • If the value is FACEBOOK, we want to create an object of Facebook, if the value is TWITTER, we want to create an object of Twitter and so on.
Facebook facebook = new Facebook(this, getString(R.string.facebook_app_key), getString(R.string.facebook_app_secret));

//OR

Profile facebook = new Facebook(this, getString(R.string.facebook_app_key), getString(R.string.facebook_app_secret));
  • I can use either ways to create an object of Facebook but from the documentation that I googled about CloudRail API, I found out that Profile is an interface and Facebook, Twitter, Yahoo etc implement that interface.
  • The better approach from the 2 lines above is obviously the second one as I can use the interface reference variable to get the details of the person from any social account.

 3) Details Activity! The Last Stop

a) What does the layout look like?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dark_background"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.coursetro.socialloginusingcloudrail.DetailsActivity">

    <ImageView
        android:id="@+id/profile_picture"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:layout_centerHorizontal="true"
        android:scaleType="center"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/text_identifier"
        style="@style/UserOtherDetailsStyle"
        android:layout_below="@+id/profile_picture" />

    <TextView
        android:id="@+id/text_full_name"
        style="@style/UserNameStyle"
        android:layout_below="@+id/text_identifier" />

    <TextView
        android:id="@+id/text_email"
        style="@style/UserOtherDetailsStyle"
        android:layout_below="@id/text_full_name" />

    <TextView
        android:id="@+id/text_dob"
        style="@style/UserOtherDetailsStyle"
        android:layout_below="@id/text_email" />

    <TextView
        android:id="@+id/text_description"
        style="@style/UserOtherDetailsStyle"
        android:layout_below="@id/text_dob" />

    <TextView
        android:id="@+id/text_gender"
        style="@style/UserOtherDetailsStyle" />

    <TextView
        android:id="@+id/text_locale"
        style="@style/UserOtherDetailsStyle"
        android:layout_below="@id/text_gender" />
</RelativeLayout>

Ok, so what does this UserOtherDetailsStyle and UserNameStyle look like?

<style name="UserOtherDetailsStyle" parent="TextAppearance.AppCompat.Body1">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_below">@id/text_description</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:layout_marginTop">4dp</item>
    <item name="android:layout_marginBottom">4dp</item>
</style>

<style name="UserNameStyle" parent="TextAppearance.AppCompat.Headline">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_below">@id/text_description</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:layout_marginTop">8dp</item>
    <item name="android:layout_marginBottom">8dp</item>
</style>

c) What does the code look like?

  • Quite straight forward right?
  • Initialize all the TextViews and one ImageView in our case
  • Get the UserAccount details we loaded inside our IntentService
  • Use a bunch of getter and setter methods to setup everything
  • Use Picasso, an Android image loading library to load image from a URL and display it inside an ImageView.

 

Conclusion

Phew! Man that was a looong one. However, I sincerely hope you got something out of this post. it's an awesome library isn't it. Now, don't be so mean and steal all the promotion for yourself. Get your buddies to read this post and I am sure they'll appreciate it :) Remember, you still need to submit your app for review with most of these social login providers before putting it on Playstore. So, just Google "submit x android app for review" where x = facebook, twitter etc. Why don't you let me know in the comments which topic you would like to see next under Android? 

Have a solid day code warrior.

The lion Vivz is headed back to his cave.

 

Go to CloudRail

Watch our Courses

 

 

 


Share this post




Say something about this awesome post!