(AccountSwitcher) Circle Image and details

[gaara87]

Hey, first of this is an excellent start. Would love to be able to include this in the layout xml.

Suggestion: If you see the image in the url, there is a big circle profile picture along with Name and E-mail. It would be amazing to provide a layout a template for that. I could work on it if you accept pull requests.

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7c2dhcFRZdzBPWnM/patterns_navdrawer_elevation1.png

[mikepenz]

@gaara87 thanks.

Yeah i accept pull request ;). I'm always open for external input and improvements.

I've thought about this feature already, and i think it would make most sense to create a separate Header class (probably also with a builder) which will handle all the profile switching etc, and can then be passed to the drawer.

[sohayb]

👍

[appmath]

I love this idea. Please take into consideration the fact that some users might have only one account and the drop down is not necessary.

[gaara87]

Well a Builder class seems like a good idea to interact with the construction of it.

I'm thinking of having it as a separate HeaderFragment only because it seems like it seems like its got enough functionality just within it.

Also, if you were already planning to work on it, then i guess we can see which part of it i can contribute to

[mikepenz]

@gaara87 yeah i haven't started yet. just made a few notes yesterday after searching for all details. I've found that it seems no lib solves it like it's done within Google Play or Google Plus yet. I would try to implement such a behavior including changing the list if you click the select-box.

;)

[appmath]

You might want to take a look at https://github.com/neokree/MaterialNavigationDrawer, specifically
circularPhoto = new BitmapDrawable(resources,Utils.getCroppedBitmapDrawable(photo));
in the Utils class.
I also like the animation when the user switches accounts (by clicking on one of the 2 photos on the right).

[gaara87]

@appmath That Util class for the cropped drawable does look nice :)

I was just going to use https://github.com/hdodenhof/CircleImageView since it is a pretty good library already.

I was thinking of simply creating a viewpager (maybe an infinite looping one, or maybe one that only swipes from left to right and no right to left interaction) for for being able to switch the accounts, thats all :) Maybe an infinite viewpager. I love way google drive & inbox handle the transition.

[mikepenz]

@appmath, @gaara87 so i have the basic layout. and a basic builde. now i just need to implement the special drawerItems for the accounts and the functionality

Please see this branch: https://github.com/mikepenz/MaterialDrawer/tree/accountswitcher for the current implementation

[appmath]

Wow! That was fast. OK, I am going to take a look at the "fruits" of your efforts.
Thanks

[mikepenz]

@appmath, @gaara87 some more updates to this branch and the source. basic switching with the images is possible now. next is the list for all profiles.

[gaara87]

@mikepenz thats awesome! looks like you are dedicating quite a bit of time to it :) wish i had the time to do it too 👍

[ghost]

Can you please merge this feature to master branch then post to maven central?

[mikepenz]

It is not yet ready. As soon as everything is in and working it will be
merged ;)

jiechu notifications@github.com schrieb am Sa., 28. Feb. 2015 10:59:

Can you please merge this feature to master branch then post to maven
central?

—
Reply to this email directly or view it on GitHub
#36 (comment)
.

[mikepenz]

@appmath @gaara87 @jiechu @sohayb some teasering 😛

[mikepenz]

@appmath @gaara87 @jiechu @sohayb

In preparation of a stable launch i hope everyone who is interested in this feature is part of some initial testing. To create a test the initial preview i've uploaded a preview version of the library to the SNAPSHOT repository of maven.

Just add the snapshot repository to your repositories within the main build.gradle under 'allprojects`

maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }

After this add the following compile dependency:

compile('com.mikepenz.materialdrawer:library:1.5.0-SNAPSHOT@aar') {
        transitive = true
}

Now you can use the AccountDrawer. To see the basic setup and how to use it take a look at following class:

https://github.com/mikepenz/MaterialDrawer/blob/accountswitcher/app/src/main/java/com/mikepenz/materialdrawer/app/SimpleDrawerActivity.java

What you have to do:

1. Create the AccountHeader
2. Create the Drawer and pass the AccountHeader result

//DONE :D

And here's a working sample of the drawer to check it out ;).
http://weew.ee/dfnPL

Please report all errors, bugs, missing helper methods within the result in this thread.

[sohayb]

Awesome! 👍
Will test it as soon as I can, too sucked up in C# now :( :P

[khammami]

I've tested it and it works! Good work @mikepenz

well at the begining I got this error :

java.lang.NoSuchFieldError: No static field account_header_drawer of type I in class Lcom/mikepenz/materialdrawer/R$id; or its superclasses (declaration of 'com.mikepenz.materialdrawer.R$id' appears in /data/app/com.khammami.settaghram-1/base.apk)
at com.mikepenz.materialdrawer.accountswitcher.AccountHeader.build(AccountHeader.java:316)

I got this error because it appears that I used a lyaout name already used in your library which is "drawer_header"

[mikepenz]

@khammami thanks for testing.

oh that's bad, probably i should rename the layout to prevent this.

another thing. It seems you don't use a translucent statusbar have you disabled the translucent statusbar within your drawer? because the header's height is to high.

Please use withTranslucentStatusBar(false) for the AccountHeader and your Drawer

[fdorssers]

I downloaded the latest version from the accountswitcher branch to give it a go and look at the sample app. First of all, I really it. But I did notice a small bug in the sample app.

If I open the app I'm in the settings part of the app, which can be seen by this toast and the fact that the settings item is selected. If I then open the list of accounts and close it, then the help section is selected. Even though it is unclickable.

[khammami]

@mikepenz yeah I think you should add a prefix for the layouts to avoid this kind of error.

you're right about the height of the header I'm using a theme with no translucent statusbar. I disabled it in the header and the drawer as you said, it's look fine now thanks 👍

[mikepenz]

@fdorssers yeah you are right. will fix it with the next test release ;)

@khammami that's true. will prefix it ;). Great ;) makes a difference. i think it would be nice if the drawer used the value you set for the header :D makes sense that both specify the same translucentStatusBar value

[mikepenz]

@appmath @gaara87 @jiechu @sohayb @fdorssers @khammami

so i think i've fixed all issues reported here. and added some new stuff (which probably shouldn't be in this branch but yeah)

you can get it by following the above description: #36 (comment)
but using the following as dependency

compile('com.mikepenz.materialdrawer:library:1.5.0.PREVIEW.2-SNAPSHOT@aar') {
        transitive = true
}

• prefix material_drawer layouts
• fix issue with wrong selection after open / close profile selector
• no more ActionBarDrawerToggle animation by default
• add methods to store/load instancestate for ProfileHeader (in fact it's just the selection)
• colors are now defined by the theme. --> if you use a dark theme -> dark drawer, light theme -> light drawer ;).
  • overwrite those colors like you would in previous versions, with one difference. if you use a dark theme you have to overwrite the dark colors. if you want it clean then just create a custom theme by extending one of my themes and overwrite one of the following values

        <item name="material_drawer_window_background">@color/material_drawer_dark_window_background</item>
        <item name="material_drawer_background">@color/material_drawer_dark_background</item>
        <item name="material_drawer_icons">@color/material_drawer_dark_icons</item>
        <item name="material_drawer_primary_text">@color/material_drawer_dark_primary_text</item>
        <item name="material_drawer_secondary_text">@color/material_drawer_dark_secondary_text</item>
        <item name="material_drawer_hint_text">@color/material_drawer_dark_hint_text</item>
        <item name="material_drawer_divider">@color/material_drawer_dark_divider</item>
        <item name="material_drawer_selected">@color/material_drawer_dark_selected</item>
        <item name="material_drawer_selected_text">@color/material_drawer_dark_selected_text</item>
        <item name="material_drawer_header_selection_text">@color/material_drawer_dark_primary_text</item>

I would be happy if you could test it again. Please let me know which methods are still missing to have everything you need for implementing this in your applications.

[fdorssers]

Awesome! I did notice two more bugs. It breaks if you open the profile selector and press on different profiles very quickly. The drawer turns white and after opening the profiles once they won't go away anymore. The other bug is if there's only one account the downwards pointing arrow on the profile header isn't visible. (Would you prefer separate issues next time?)

In terms of features it would be nice to have log in or log out buttons in the profile section of the drawer that we can override. Meaning that if the user pressed the log in button we could call our own RESTful service and then return for example a new profile with the relevant data that would then be added to the drawer. It would also be nice to have a small log in reminder on the header if no profiles are added. For example simply 'Log in' as the profile name and if you click on it the profile part opens with the log in button. Basically like the profile section in Reddit News' drawer.

[mikepenz]

@fdorssers thanks for the detailed report ;)
about the quick profile switch. yeah you are right. i hope i can somehow block this. :/
it's a feature. :D it makes no sense to show the profile switching list if there'S only one profile. but in combination with the features you would love to see it makes sense :D

do you mean something like it's done within gmail?
there are an add account and manage accounts button below the profile list. this would be possible i think. still with the same logic as it's now and you can then pass the new account to the AccountHeader.Result.

i just saw that gmail allows badges for the accounts in the list. anyone requires them?

[appmath]

@mikepenz
Hello Mike,
Versions used: PREVIEW 2 and PREVIEW 3.
I just found a minor issue, the section header without a title looks odd (screenshot).

I love how a single account looks.
Thanks

[mikepenz]

@appmath if you need an empty section header use a divider item ;)

[khammami]

@mikepenz now there is some bugs but let me explain what I meant in my last comment with a screenshot:

as you can see, the header's content stay on the top of the layout when someone change header's height. In my opinion it should stay in bottom of the layout especially for text.

For the third preview, I used your code to test the new features:

new ProfileSettingDrawerItem().withEmail("Add Account").withIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_add).paddingDp(5)),

the result :

• there is a black box, I had 2 profile now I have 3 including the black box :D
• when you switch between profiles look what happens to add icon

then when I use normal add icon without defining a new icon with padding :

new ProfileSettingDrawerItem().withEmail("Add Account").withIcon(GoogleMaterial.Icon.gmd_add)),

result :

now there is circular shadow when you select it the add icon disappear

I used CENTRER_CROP for scale type now it's better thanks

by the way, I'm using a nexus 4 (5.0.1) for testing but I have also a nexus s I'll test the drawer on it later ;)

[timgreen]

@mikepenz thanks for this awesome library. Do you plan to support modify profile items in the headerResult? In my app, the list of profile might be changed after sync.

[mikepenz]

@khammami will take a detailed look later today.

This line has a bug

new ProfileSettingDrawerItem().withEmail("Add Account").withIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_add).paddingDp(5)),

i missed the .actionBarSize()

@timgreen yeah is planned i just have to add the helper methods

[fdorssers]

@mikepenz I put in a pull request for the previously mentioned bug that occurred when switching profiles quickly.

The issue that @khammami has is caused by the fact that the drawer tries to show three profiles in the header even though not all the profile items are actually profiles. In AccountHeader.java the function buildProfiles() builds the little icon previews. However it doesn't check if the item with the profile interface is a ProfileDrawerItem or a ProfileSettingDrawerItem.

The following fixes the small icons for example:

if (mProfileFirst != null && mProfileFirst instanceof ProfileDrawerItem) {
    ...
}
if (mProfileSecond != null && mProfileSecond instanceof ProfileDrawerItem) {
    ...
}

However if you want devs to be able to create their own profile drawer items it might be handy to add a new function that they can override to specify whether or not to show it. Or whatever way would suit you :) .

There are still some other exceptions. What happens if the user only has options (example image)? Or what if the user first adds the setting icons and then the profiles (example image)?

[mikepenz]

@fdorssers yeah thanks again for the pull request ;)

yeah the problem was not in the buildProfiles but in the build method which calculates the first 4 profiles to set. i've fixed this now.

about the solution for the fix. there is already a method which allows the devs to set a specific item selectable :D

the complete solution is this

//set the active profiles
        if (mProfiles != null) {
            int setCount = 0;
            for (int i = 0; i < mProfiles.size(); i++) {
                if (mProfiles.size() > i && mProfiles.get(i).isSelectable()) {
                    if (setCount == 0) {
                        mCurrentProfile = mProfiles.get(i);
                    } else if (setCount == 1) {
                        mProfileFirst = mProfiles.get(i);
                    } else if (setCount == 2) {
                        mProfileSecond = mProfiles.get(i);
                    } else if (setCount == 3) {
                        mProfileThird = mProfiles.get(i);
                        break;
                    }
                    setCount++;
                }
            }
        }

all items which implement the IProfile interface have to implement .isSelectable() which defines if the profile is a selectable profile ;)

oh i see. this is also fixed now. changing GONE to INVISIBLE :D

[mikepenz]

@appmath @gaara87 @jiechu @sohayb @fdorssers @khammami, @tarikyurtlu

and another (and hopefully the last) PREVIEW version. thanks again for helping and for testing.

another batch of fixed issues and new method calls

(just as a reminder :D) you can get it by following the above description: #36 (comment)
but using the following as dependency

compile('com.mikepenz.materialdrawer:library:1.5.0.PREVIEW.4-SNAPSHOT@aar') {
        transitive = true
}

• Open Issues
  • compact header view

[mikepenz]

ok it seems i lied :D

i hope it's ok for everyone that there's another update with a compact header style and with a small fix to align the select box to the bottom if the height of the header is changed.

compile('com.mikepenz.materialdrawer:library:1.5.0.PREVIEW.5-SNAPSHOT@aar') {
        transitive = true
}

• Open Issues
  • as far as i know none :D

[fdorssers]

Looking good! But I did find another bug. I took the example app and removed all profiles except for the first one:

.addProfiles(
    profile,
    // profile2,
    // profile3,
    // profile4,
    // profile5,
    //don't ask but google uses 14dp for the add account icon in gmail but 20dp for the normal icons (like manage account)
    new ProfileSettingDrawerItem().withEmail("Add Account").withIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_add).actionBarSize().paddingDp(5)).withIdentifier(1),
    new ProfileSettingDrawerItem().withEmail("Manage Account").withIcon(GoogleMaterial.Icon.gmd_settings)
)

And created a button to add profile2:

findViewById(R.id.add_profile).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        headerResult.addProfile(new ProfileDrawerItem().withName("Max Muster").withEmail("max.mustermann@gmail.com").withIcon(getResources().getDrawable(R.drawable.profile2)), 0);
    }
});

However this kinda messes up the icons as can be seen in this and this screenshot.

It appears to have to do with the order. Adding it on position 1 instead of 0 works. The same occurs when you already have two items. If you don't add it at the end it goes wrong.

And I have one more stylistic remark: Picking a profile from the profile section shows you that the profiles switch in the header because there's a delay on the closing. However when you click the icons in the header the drawer closes immediately and you can't immediately see whether it has switched. I think it would be nice and consistent if the drawer also had a delay of half a second when using these icons to switch profiles.

[khammami]

@mikepenz you're allmost there :) just few more tweaks:

• the selection list on JB 4.1.2 need some space check this screenshot and this one
  for Lollipop.
• in the same screenshots, I didn't put a picture for the profile so I think you should add a default icon for that.
• one more request for single profile only, is it possible to add a feature to disable profile icon (only text without a profile image) and another option to disable the selection list default behavior: for example when a user click on the selection list, instead of getting a list with only one profile or maybe options to manage his profile it take him to his profile in the app with a custom listener

[fdorssers]

@mikepenz I found another small bug. At the moment if there's a single actual profile you can still use the selection list. No issue there as you can always enable/disable it with the following two lines:

.withSelectionListEnabled(true)
.withSelectionListEnabledForSingleProfile(true)

However if my only item is the log in button (from the example of yours) then I can't get the list to show, even using the two options above.

And your previous fixes have created another small issue. If there's only a single option in the selection list, for example 'log in', then it would be nice to have this show up as the 'current profile', to show people where to click to log in. So if they click it the normal selection list could open with the options.

[timgreen]

@mikepenz

I found an issue with profiles modification.

During drawer setup, I added one profile A. Later after call headerResult.setProfile([B, C, D, E), I found the profile A is still there.

A fix will be change calculateProfiles to

protected void calculateProfiles() {
  IProfile[] previousActiveProfiles = new IProfile[] {
    mCurrentProfile,
    mProfileFirst,
    mProfileSecond,
    mProfileThird
  };

  IProfile[] newActiveProfiles = new IProfile[4];
  Queue<IProfile> unusedProfiels = new Queue<>();

  // try to keep existing active profiles in the same positions
  for (int i = 0; i < mProfiles.size(); i++) {
    IProfile p = mProfile.get(i)
    if (p.isSelectable()) {
      boolean used = false;
      for (int j = 0; j < 4; j++) {
        if (previousActiveProfiles[j] == p) {
          newActiveProfiles[j] = p;
          used = true;
          break;
        }
      }
      if (!used) {
        unusedProfiels.push(p);
      }
    }
  }

  Queue<IProfile> activeProfiles = new Queue<>();
  // try to fill the gaps with new available profiles
  for (int i = 0; i < 4; i++) {
    if (newActiveProfiles[i] != null) {
      activeProfiles.push(newActiveProfiles[i]);
    } else if (!unusedProfiels.isEmpty()) {
      activeProfiles.push(unusedProfiels.pop());
    }
  }

  // reassign active profiles
  if (activeProfiles.isEmpty()) {
    mCurrentProfile = null;
  } else {
    mCurrentProfile = activeProfiles.pop();
  }
  if (activeProfiles.isEmpty()) {
    mProfileFirst = null;
  } else {
    mProfileFirst = activeProfiles.pop();
  }
  if (activeProfiles.isEmpty()) {
    mProfileSecond = null;
  } else {
    mProfileSecond = activeProfiles.pop();
  }
  if (activeProfiles.isEmpty()) {
    mProfileThird = null;
  } else {
    mProfileThird = activeProfiles.pop();
  }
}

And is there a way to show both name & email in the profile selection list?

[mikepenz]

@appmath @gaara87 @jiechu @sohayb @fdorssers @khammami, @tarikyurtlu, @timgreen

special thanks to @timgreen for the nice calculateProfiles method (had some bugs in it but yeah it basically it was the right thing ;) )

so this time there isn't a changelog too. to many changes. I hope i was albe to hunt down most or all mentioned bugs. if i missed something let me know. The header now allows really really many different options :D haha

compile('com.mikepenz.materialdrawer:library:1.5.0.PREVIEW.6-SNAPSHOT@aar') {
        transitive = true
}

[fdorssers]

@mikepenz you're really putting some impressive work into this. At the moment I haven't found any bugs yet. And good idea on adding the removeProfile option. I'm sure many of us would've encountered that at some point in time.

I do have one more stylistic / functionality suggestion, but I couldn't find the specifics in the material documents. I think it would be nice and intuitive if the icons at the top would represent the three most recently used profiles in the right order. At the moment if you have profiles 1 2 and 3 and you press 3 then 1 and 3 will switch, putting the icons in the order of 3 2 1. My suggestion would be to then make it 3 1 2. Or if you have the accounts 1 2 3 as icons and another account 4 in the drawer, if you press 4 you get 4 2 3, instead of 4 1 2. If you get what I mean.

[mikepenz]

@fdorssers ok that's good. i hope that this preview will solve most things. have you tried the compact header style?

yeah i see what you mean. something nice would be that it automatically stores this information over app restarts, and activity recreations :D.

[mikepenz]

@appmath @gaara87 @jiechu @sohayb @fdorssers @khammami, @tarikyurtlu, @timgreen

Any arguments against a final release of the Header today?

[appmath]

I have looked at the latest release and I didn't find any issues (my exploratory use case is "lighter" than other people). This weekend, I am going to start working on some serious ("heavier") integration with my current project.

It looks good to me.

Thanks Mike and....excellent job!!!

[tarikyurtlu]

Hi Mike , I didn't find any issue as per last version.

Thanks for support. :)
6 Mar 2015 15:01 tarihinde "appmath" notifications@github.com yazdı:

I have looked at the latest release and I didn't find any issues (my
exploratory use case is "lighter" than other people). This weekend, I am
going to start working on some serious ("heavier") integration with my
current project.

It looks good to me.

Thanks Mike and....excellent job!!!

—
Reply to this email directly or view it on GitHub
#36 (comment)
.

[fdorssers]

@mikepenz I had a look at the compact drawer and everything seems to work fine. Other than my current open issue it looks like everything is okay :) .

[mikepenz]

@appmath @gaara87 @jiechu @sohayb @fdorssers @khammami, @tarikyurtlu, @timgreen

Thanks everyone for helping me to test this huge release.

v2.0.0 was pushed to maven central a few moments ago.
Please note that the final release of v2.0.0 contains a few naming changes of some methods, and a naming change from the DarkActionBar theme to DarkToolbar. Beside this i added the method descriptions to the wiki, and made a few more tiny fixes.

I hope you like it ;)

If there are any features left or something missing, please create a new issue.

[blennerSilva]

hey mike do you think you could help me? i need to load an image from gallery as a prifile pic...could you help me ?

[mikepenz]

@blennerSilva you can set an url, drawable, bitmap as profile pic. so if you get the image as bitmap or drawable from the gallery you can set this. i assume you will have to load the image in an asyncTask and as soon as you got it you can set it

[blennerSilva]

but thats only possible in the new version of the library or in all of them ? im using this one

  compile('com.mikepenz.materialdrawer:library:2.8.2@aar') {
        transitive = true
    }

[mikepenz]

@blennerSilva sorry i can't give support for versions different than the most current one.