How to get profile pic from facebook using Picasso [Android Studio]

Question

how can i get the profile picture from facebook using picasso?

I've followed this tutorial Can't get FB profile picture with Firebase and I don't have compilation errors the Picture just doesn't seem to apply.

Image of the Profile Picture

This is the XML part

<ImageButton
        android:id="@+id/profile_photo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_below="@+id/Profile_cover"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-60dp"
        android:elevation="5dp"
        android:padding="20dp"
        android:scaleType="centerCrop"/>

This is my code

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

    //init Firebase\\
    auth = FirebaseAuth.getInstance();
    user = FirebaseAuth.getInstance().getCurrentUser();
    //END init Firebase\\

    //Init UI variables\\
    username = findViewById(R.id.Profile_username);
    profilePicIV = findViewById(R.id.profile_photo);
    //End Init UI variables\\


    //Init Methods\\
    setDataToValue(user);
    //End Init Methods\\

    //Facebook\\

    String profilePicUrl = "https://graph.facebook.com/" + UserID +"/picture?type=large";
    Picasso.with(this).load(profilePicUrl).into(profilePicIV);

}

private FacebookCallback<LoginResult> mCallback = new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(final LoginResult loginResult) {
        GraphRequest request = GraphRequest.newMeRequest(
                loginResult.getAccessToken(),
                new GraphRequest.GraphJSONObjectCallback() {
                    @Override
                    public void onCompleted(JSONObject object, GraphResponse response) {
                        Log.e("response: ", response +"");
                        try{
                            String  id = object.getString("id").toString(),
                                    email = object.getString("email").toString(),
                                    name = object.getString("name").toString(),
                                    profilePicUrl = "https://graph.facebook.com/" + loginResult.getAccessToken().getUserId() +"/picture?type=large";
                                    UserID = loginResult.getAccessToken().getUserId();
                            Log.d("imageFB", profilePicUrl);
                            Log.d("FB_ID", id);


                        }catch (Exception e){
                            e.printStackTrace();
                        }

                        finish();
                    }
                });
        Bundle params = new Bundle();
        params.putString("fields", "id,name,email,gender,birthday,friends,likes,hometown,education,work");
        request.setParameters(params);
        request.executeAsync();


    }

The Picasso Download

String profilePicUrl = "https://graph.facebook.com/" + UserID +"/picture?type=large";
    Picasso.with(this).load(profilePicUrl).into(profilePicIV);

Answer 1

You're attempting to set the picture before UserID has been assigned in the callback.

Try setting the image after this line:

String  id = object.getString("id").toString(),
                                email = object.getString("email").toString(),
                                name = object.getString("name").toString(),
                                profilePicUrl = "https://graph.facebook.com/" + loginResult.getAccessToken().getUserId() +"/picture?type=large";
                                UserID = loginResult.getAccessToken().getUserId();

The reason you need to do this is because the Facebook authentication happens in an asynchronous fashion and UserId won't be initialised until after the callback has been invoked.