Two ImageViews appear in Navigation header while I set only one in xml

Question

So I am experiencing a very weird behaviour. I have a NavigationDrawer and inside it I have my navigation header, which has a facebook ProfilePictureView and a TextView.

The problem is, when I run my app there are TWO ProfileImageViews in the navigation header. Even though in Android Studio, the preview of the header xml displays one ProfileImageView correctly.

I've attached a screenshot below:

And here is my code for nav_header_home.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="@dimen/nav_header_height"
android:background="@color/dark_blue"
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"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<com.facebook.login.widget.ProfilePictureView
    android:id="@+id/profile_image"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
<TextView
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:layout_gravity="center"
    android:id="@+id/tv_username"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:textColor="@color/white" />

</LinearLayout>

And this is how I initialise it:

View headerView = navigationView.inflateHeaderView(R.layout.nav_header_home);
usernameTextView = (TextView)headerView.findViewById(R.id.tv_username);
profileImage = (ProfilePictureView)headerView.findViewById(R.id.profile_image);

---

And here is another weird behaviour that may help figure out the problem:

When I initialise ProfilePictureView like this:

profileImage = (ProfilePictureView)findViewById(R.id.profile_image);

Then set an image to the view, the view at the top displays the image.

Whereas if I initialise like this:

profileImage = (ProfilePictureView)headerView.findViewById(R.id.profile_image);

Then the view at the bottom displays the image.

Answer 1

Well I figured out the problem. The line View headerView = navigationView.inflateHeaderView(R.layout.nav_header_home); does not seem to get the current header, instead it seems to inflate and create a new one, which is likely the cause of my ProfilePictureView being added twice!

Replacing it with View headerView = navigationView.getHeaderView(0); works! It correctly gets the current header!