Skip to content

AccountHeaderView

Jump to bottom
TR4Android edited this page Aug 26, 2015 · 3 revisions

This wiki hightlights the setup needed for using the AccountHeaderView and the customization options available. It is designed as a step by step guide with simple instructions. Depending on your previous setup you might choose to skip a step or two. Here are a few reasons for using this implementation:

  • Works seamlessly with the AppCompat Design Library's NavigationView so you have full access to its features and can easily switch to an official account header implementation as soon as Google releases it.
  • Includes a dropdown list of accounts (and optionally account addition and managment items) by hooking up to the internal ListView of the AppCompat Design Library's NavigationView in an almost magical way!
  • Automatically creates placeholder avatars with the name's initials when an image is not set to an Account (see Google's Gmail).

1. Create the header layout

Create a new layout file called account_header.xml (if you haven't already) and put the following layout in it:

<?xml version="1.0" encoding="utf-8"?>
<com.tr4android.support.extension.widget.AccountHeaderView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/account_header"
    android:background="@drawable/account_header_cover_background"
    android:layout_width="match_parent"
    android:layout_height="@dimen/account_header_height"
    app:accountHeaderManageEnabled="true"
    app:accountHeaderAddEnabled="true" />

At this point you have the following two options:

  • app:accountHeaderManageEnabled: Whether or not to show the "Manage Accounts" item in the dropdown account list. Defaults to true.
  • app:accountHeaderAddEnabled: Whether or not to show the "Add Account" item in the dropdown account list. Defaults to true.

2. Setup your activity layout with NavigationView

If you don't already have your DrawerLayout and NavigationView setup now is the time to do so. A commom activity_xxx.xml layout file might look like this:

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

    <!-- your main layout here -->

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_drawer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/account_header"
        app:menu="@menu/menu_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

Please note the following two things in this layout:

  • The app:headerLayout has been set to the account_header.xml we've created in the previous step.
  • The android:fitsSystemWindows attribute has been set to true to allow the NavigationView to go under the statusbar on Lollipop devices and above.

3. Setup your activity theme

To achieve the best experience here are a few tips for your activity theme. Note that not properly setting this up can have consequences on the look of the NavigationView and AccountHeaderView. You'll have to create two styles.xml files: one for Lollipop and above devices and one for all other devices. The following shows those two files and how you can reuse you previous platform independent theme:

values/styles.xml (Devices below Lollipop)

<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Nothing to do here because the `NavigationView` can't go under the statusbar -->
    </style>

    <!-- Base application theme. (Your previous platform independent theme renamed to AppTheme.Base) -->
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Your platform independent attributes -->
    </style>
</resources>

values-v21/styles.xml (Devices Lollipop and above)

<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- This makes sure that the `NavigationView` properly appears under the statusbar -->
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

4. Add your Accounts

Due to the difficulty of integrating the Android AccountManager in a way that fits all possible accounts it is currently not possible to just extract accounts from it. Instead this library provides a custom class called Account to hold an icon, a name and an email for your accounts. You'll have to convert your apps accounts into this format manually. You can add (addAccounts(), addAccount()), remove (removeAccount()), insert (insertAccount()) and clear (clearAccounts()) accounts with your AccountHeaderView. Here's an example that shows the setup of the AccountHeaderView with some dummy accounts (the process should pretty much stay the same with real accounts):

// Get a reference to the `AccountHeaderView`
AccountHeaderView accountHeaderView = (AccountHeaderView) findViewById(R.id.account_header);
// Add your accounts
accountHeaderView.addAccounts(new Account().setName("TR4Android").setEmail("tr4android@example.com").setIconResource(R.drawable.account_drawer_profile_image_tr4android),
        new Account().setName("Fountain Geyser").setEmail("fountaingeyser@example.com").setIconResource(R.drawable.account_drawer_profile_image_fountaingeyser),
        new Account().setName("Account Name").setEmail("accountemail@example.de"));
// Attach a listener to the `AccountHeaderView` to respond to a selected account
accountHeaderView.setAccountSelectedListener(new AccountHeaderView.OnAccountSelectedListener() {
    @Override
    public void onAccountSelected(Account account) {
        // Called when an account was selected
        drawerLayout.closeDrawers();
    }

    @Override
    public void onAccountAddSelected() {
        // Called when the "Add Account" item was clicked
        drawerLayout.closeDrawers();
    }

    @Override
    public void onAccountManageSelected() {
        // Called when the "Manage Accounts" item was clicked
        drawerLayout.closeDrawers();
    }
});

5. Enjoy

Congrats! You've made it through the setup. If you have any issues, bugs or feature requests please open a new issue. Also, currently the "Manage Accounts" and "Add Account" strings are only translated in English. If you know an additional translation open a new issue with the translation or even better open a pull request for it. Thanks for your help!

Clone this wiki locally