Android: Get facebook/Twitter profile picture using Parse

Question

Hi I'm using ParseLoginUi for my android app so users can login into my app using facebook, twitter and local signin options. I want my users to be able to add/upload profile picture.Right now when someone logs in using facebook I get facebook access token for that user and store it into my parse data. However I don't know how to get the facebook profile picture for that user and what is the best way to store it in my parse database (should I save the url as a String in my db? what if the user uploads an image from his/her device)? Can someone help me with this issue.

Answer 1

To get the Facebook profile picture for the user you will have to use the Facebook Android SDK V4 (the latest version). After getting the image using the Facebook Android SDK, you simply store the url as a string, and associate it with your parseuser! To get an image from the users device, use an intent with startactivityforresult.

Make sure you have the Facebook Android SDK configured, or all the instructions below will be of little use to you!

Step 1. Get the profile Image from Facebook using the Facebook SDK recommendation. This should be done AFTER logging in a Facebook User through the Parse SDK.

GraphJSONObjectCallback mCallback = new GraphJSONObjectCallback()
{
            @Override
            public void onCompleted(JSONObject mData, GraphResponse mResponse) 
            {
                if(mResponse.getError() == null)
                {   
                    try
                    {
                       final JSONObject mPicture = mData.getJSONObject("picture");                  
                       final JSONObject mPictureData = mPicture.getJSONObject("data");                  
                       final boolean mSilhouette = mPictureData.getBoolean("is_silhouette");                

                      **//this is the URL to the image that you want**
                      final String mImageUrl = mPictureData.getString("url"); 
                    }

                    catch (JSONException e)
                    {
                       //JSON Error, DEBUG
                    }
                }

                else
                {
                     //Facebook GraphResponse error, DEBUG
                }
           }
}; 

Bundle mBundle = new Bundle();
mBundle.putString("fields", "picture");

GraphRequest mGetUserRequest = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), mCallback);
mGetUserRequest.setParameters(mBundle);

//if running this on the MAIN THREAD then use .executeAsync()
mGetUserRequest.executeAndWait();

Now you should have the String mImageUrl, so you should have the IMAGE. The boolean mSilhuoette lets you know if the default silhuoette is being used. Check out the Facebook Android SDK docs for more info.

Step 2: Associate url with the user

ParseUser mUser = ParseUser.getCurrentUser(); 
mUser.put("image", mImageUrl);
mUser.saveInBackground();

Note: You could also download the image yourself and store it in a ParseFile. It depends on how you intend to use this image throughout your application.

Step 3: If the user uploads the image from his/her device, you can use an intent with startactivity to allow the user to pick the image. Get the Image in onActivityResult. Load the image into a Bitmap. Once the image is loaded into the bitmap then convert the bitmap into a parsefile and associate that ParseFile with the user and you are done! I recommend using Picasso for this, as well as displaying your image url that you have associated with your ParseUser. You can find more information about Picasso by doing a google search for Android Picasso.

When you get ready to allow the user to select an image from the device use:

Image mImagePickerIntent = new Intent(); 
mImagePickerIntent.setType("image/*");
mImagePickerIntent.setAction(Intent.ACTION_GET_CONTENT);
final Intent mMainIntent = Intent.createChooser(mImagePickerIntent, "Pick Image");
startActivityForResult(mMainIntent, 1); 

In onActivityResult use this

@Override
public void onActivityResult(int mRequestCode, int mResultCode, Intent mIntent) 
{
    super.onActivityResult(mRequestCode, mResultCode, mIntent);
    if(mResultCode == Activity.RESULT_OK)
    {
       final Uri mImageUri = mIntent.getData();

       //might be better to load bitmap with a Picasso Target  (try/catch)
       Bitmap mBitmap = Picasso.with(getActivity()).load(mImageUri).get(); 
       ByteArrayOutputStream bos = new ByteArrayOutputStream();
       mBitmap.compress(Bitmap.CompressFormat.PNG, 100, bos);
       final byte[] mData = bos.toByteArray();
       mBitmap.recycle(); 

       final ParseFile mPhotoFile = new ParseFile("image.png", mData);
       mPhotoFile.saveInBackground();

       final ParseUser mUser = ParseUser.getCurrentUser();
       mUser.put("imageFile", mPhotoFile); 
       mUser.saveInBackground();     
     }
}

The code above isn't final! It is suppose to represent a working snapshot of what you have to do to accomplish your goals! Some stuff omitted for brevity like null checks, try/catch blocks, etc.

Answer 2

you can create profile pic uri from facebookId.

public static Uri getFacebookProfilePic(String fbId,int height, int width) {
    Uri.Builder builder = new Uri.Builder().encodedPath(String.format("https://graph.facebook.com/%s/picture", fbId));
    builder.appendQueryParameter("height", String.valueOf(height));
    builder.appendQueryParameter("width", String.valueOf(width));
    builder.appendQueryParameter("migration_overrides", "{october_2012:true}");
    return Uri.parse(builder.toString());
}