Facebook 个人资料图片未显示在导航标题中？

Question

I have a simple NavigationView in which I try to show my profile picture. This is what I have so far:

MainActivity.java:

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        Profile profile = Profile.getCurrentProfile();
        System.out.println("Profile Id: " + profile.getId());
        ProfilePictureView profilePictureView = (ProfilePictureView) findViewById(R.id.profile_image);
        if(profilePictureView != null) {
            System.out.println("Not null.");
            System.out.println("Profile Name: " + profile.getFirstName());
            profilePictureView.setProfileId(profile.getId());
        }
        else {
            System.out.println("Null.");
        }
    }
}

main_activity.xml:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:fitsSystemWindows="true" tools:openDrawer="start">

    <include layout="@layout/app_bar_news_feed" android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView android:id="@+id/nav_view"
        android:layout_width="wrap_content" android:layout_height="match_parent"
        android:layout_gravity="start" android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_news_feed">

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

            <include layout="@layout/nav_header_news_feed"
                android:id="@+id/navigation_header"/>

            <ListView
                android:id="@+id/friends_list"
                android:layout_weight="7"
                android:layout_width="match_parent"
                android:layout_height="0dp"></ListView>

        </LinearLayout>

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

nav_header_news_feed.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/side_nav_bar"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">

    <com.facebook.login.widget.ProfilePictureView
        android:id="@+id/profile_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        facebook:com_facebook_preset_size="small"/>

</LinearLayout>

I am very confused because I thought that I had to simply instantiate the profilePictureView object and set its profile id. I thought I was doing everything right because the first name matches with the user that is logged in, and I have made sure that the user ID is not null.

Rather, the picture just looks like an empty Facebook profile picture when in reality I know I have a photo. If anyone could point me in the right direction, that would be great. Thanks!

EDIT: Added in edits to my files to mirror what Mattia Maestrini suggested:

MainActivity.java:

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private NavigationView navigationView;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
        View header = LayoutInflater.from(this).inflate(R.layout.nav_header_news_feed, null);
        navigationView.addHeaderView(header);

        Profile profile = Profile.getCurrentProfile();
        System.out.println("Profile Id: " + profile.getId());
        ProfilePictureView profilePictureView = (ProfilePictureView) header.findViewById(R.id.profile_image);
        if(profilePictureView != null) {
            System.out.println("Not null.");
            System.out.println("Profile Name: " + profile.getFirstName());
            profilePictureView.setProfileId(profile.getId());
        }
        else {
            System.out.println("Null.");
        }
    }
}

main_activity.xml:

<include layout="@layout/app_bar_news_feed" android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView android:id="@+id/nav_view"
    android:layout_width="wrap_content" android:layout_height="match_parent"
    android:layout_gravity="start" android:fitsSystemWindows="true">

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

        <include layout="@layout/nav_header_news_feed"
            android:id="@+id/navigation_header"/>

        <ListView
            android:id="@+id/friends_list"
            android:layout_weight="7"
            android:layout_width="match_parent"
            android:layout_height="0dp"></ListView>

    </LinearLayout>

</android.support.design.widget.NavigationView>

Answer 1

The NavigationView has a bug in v23.1.0 of support library. You can't access to the views contained in the HeaderView in onCreate method.

A workaround is to inflate the HeaderView and add it programatically. Remove app:headerLayout from main_activity.xml and then change onCreate like this:

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        Profile profile = Profile.getCurrentProfile();
        System.out.println("Profile Id: " + profile.getId());

        View header = LayoutInflater.from(this).inflate(R.layout.nav_header_news_feed, null);
        navigationView.addHeaderView(header);

        ProfilePictureView profilePictureView = (ProfilePictureView) header.findViewById(R.id.profile_image);
        if(profilePictureView != null) {
            System.out.println("Not null.");
            System.out.println("Profile Name: " + profile.getFirstName());
            profilePictureView.setProfileId(profile.getId());
        }
        else {
            System.out.println("Null.");
        }
    }
}

EDIT : Since you already add the header with the include tag:

<include layout="@layout/nav_header_news_feed"
        android:id="@+id/navigation_header"/>

You can remove the custom inflation of the header in MainActivity.java :

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        Profile profile = Profile.getCurrentProfile();
        System.out.println("Profile Id: " + profile.getId());
        ProfilePictureView profilePictureView = (ProfilePictureView) findViewById(R.id.profile_image);
        if(profilePictureView != null) {
            System.out.println("Not null.");
            System.out.println("Profile Name: " + profile.getFirstName());
            profilePictureView.setProfileId(profile.getId());
        }
        else {
            System.out.println("Null.");
        }
    }
}

And you don't need to specify the app:headerLayout in main_activity.xml :

<include 
    layout="@layout/app_bar_news_feed" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView 
    android:id="@+id/nav_view"
    android:layout_width="wrap_content" 
    android:layout_height="match_parent"
    android:layout_gravity="start" 
    android:fitsSystemWindows="true">

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

        <include 
            layout="@layout/nav_header_news_feed"
            android:id="@+id/navigation_header"/>

        <ListView
            android:id="@+id/friends_list"
            android:layout_weight="7"
            android:layout_width="match_parent"
            android:layout_height="0dp"></ListView>

    </LinearLayout>

</android.support.design.widget.NavigationView>