Note of the Navigation Darwer

Source code: https://github.com/AndroidAppNotes/AccountsNavigationDrawer

Gmail-like Side Menu

I needed to create a gmail-like side menu. In the Gmail application, if you configured multiple accounts, its side menu will display three accounts in the navigation view. The three accounts are the currently selected account and the most recent two accounts. If you pressed the email text of the current account, the side menu will display a list of the configured emails.

I used the MaterialDrawer library and guess what? It is great. Checkout the library documentation to see its capabilities.

Names of Recent Accounts

Now, the missing part. Both the Gmail application and the MaterialDrawer display the two recent accounts using images without names.
I wrote some code to overcome this issue and I would like to share it with you.
1. Create a copy of the navigation view layout and add two TextViews for the two recent accounts. The original layout can be found in the library at library/src/main/res/layout/material_drawer_header.xml
In my copy I replaced each image with image and text. For example, the first image changed from:
<com.mikepenz.materialdrawer.view.BezelImageView
    android:id="@+id/material_drawer_account_header_small_first"
    android:layout_width="@dimen/material_drawer_account_header_secondary"
    android:layout_height="@dimen/material_drawer_account_header_secondary"
    android:layout_marginRight="@dimen/material_drawer_vertical_padding"
    android:clickable="true"
    android:elevation="2dp"

    android:visibility="gone" />
to a vertical LinearLayout with image and text:
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="@dimen/material_drawer_vertical_padding"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <com.mikepenz.materialdrawer.view.BezelImageView
        android:id="@+id/material_drawer_account_header_small_first"
        android:layout_width="@dimen/material_drawer_account_header_secondary"
        android:layout_height="@dimen/material_drawer_account_header_secondary"
        android:clickable="true"
        android:elevation="2dp"
        android:visibility="gone" />

    <TextView
        android:id="@+id/material_drawer_account_header_text_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />

</LinearLayout>
2. Create a subclass of the AccountHeaderBuilder class and override the  method:
public class AccountHeaderBuilderX extends AccountHeaderBuilder {
    protected TextView mProfileFirstText;
    protected TextView mProfileSecondText;

    @Override
    protected void buildProfiles() {
        super.buildProfiles();

        if (mProfileFirstText == null) {
            mProfileFirstText = (TextView) mAccountHeader.findViewById(R.id.material_drawer_account_header_text_first);
        }

        if (mProfileSecondText == null) {
            mProfileSecondText = (TextView) mAccountHeader.findViewById(R.id.material_drawer_account_header_text_second);
        }

        setAccountName(mProfileFirstText, mProfileFirst);
        setAccountName(mProfileSecondText, mProfileSecond);
    }

    private void setAccountName(TextView tv, IProfile profile) {
        if (tv != null) {
            if (profile != null) {
                StringHolder.applyTo(profile.getName(), tv);
            } else {
                tv.setText(null);
            }
        }
    }

}
3. Create the accounts header using the subclass from step 2 and call the withAccountHeader method with the new layout as a parameter:
AccountHeader headerResult = new AccountHeaderBuilderX()
    .withActivity(this)
    .withAccountHeader(R.layout.material_drawer_header_x)
    ...
    .build();
Recent accounts should now display names below their images.

Hope it helps and let me hear from you.