Animated MasterDetail "Hamburger" icon, such as on Android or html/css.

AllisterAllister USMember ✭✭

To repeat this previously asked question (http://forums.xamarin.com/discussion/26378/rotate-masterdetail-icon by @NenadMilosavljevic), has anyone implemented a renderer or got working in any other way the standard animated icon for a master-detail view, such as on android or in html/css (http://callmenick.com/_development/css-hamburger-menu-icons/) within a Xamarin.Forms project?

Best Answers

Answers

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭

    I'm also intrested

  • allen.8290allen.8290 USMember

    You just need to set the MasterPage Icon as the "Hamburge" image you should work

  • allen.8290allen.8290 USMember

    You just need to set the MasterPage Icon as the "Hamburge" image you should work

  • AllisterAllister USMember ✭✭

    @allen.8290 that's for setting the icon yes, I'm after the animation where on tap the icon animates to an arrow as the master page/drawer slides out. so simply setting the icon property does not suffice.

  • AllisterAllister USMember ✭✭

    Anyone at Xamarin know of any plans to provide a way to animate the Icon of the MasterDetailPage?
    Yes its just eye candy, but visual feedback for an action improves the user experience.

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭

    @Allister I'm also interested but no one seems to know how to achieve that

  • AllisterAllister USMember ✭✭

    thankyou @DH_HA I hadn't stumbled upon that one yet and it looks the part, now to get it into our project.

  • AllisterAllister USMember ✭✭

    TL;DR if using nativecode.mobile.appcompat in a PCL don't set an icon for the masterdetail page on Android, otherwise java may give you a very description nullpointerexception :-)

    For those who find this in the future, the NuGet https://www.nuget.org/packages/NativeCode.Mobile.AppCompat/ and friends from the github at https://github.com/nativecode-dev/oss-xamarin gives Android in Xamarin.Forms a native look.
    Anyway, simply adding these lines to the MainActivity.cs:
    using NativeCode.Mobile.AppCompat.FormsAppCompat;
    using NativeCode.Mobile.AppCompat.Renderers;
    then
    public class MainActivity : AppCompatFormsApplicationActivity {
    and
    FormsAppCompat.EnableAll();
    and not setting an icon on Android (I'm operating in XAML here) > <ContentPage.Icon>< OnPlatform x:TypeArguments="FileImageSource" iOS="burger.png" WinPhone="burger.png"/></ContentPage.Icon>and now things look like a lot more modern version of Android (this is Jelly Bean too).
    Its not production reading according to the creator at present, but I haven't hit a bug yet, but I'm not doing anything tricky.

  • AllisterAllister USMember ✭✭

    so I found a bug in nativecode.mobile.appcompat, the page doesn't move up as the keyboard comes onto the screen, it'll either squash the controls onto the page above the keyboard, or simply cover the controls you're typing in.
    thats in version 1.0.077 at the moment.
    But given that iOS has keyboard issues with a 'workaround' being to wrap everything in a scrollview its hardly a biggie, as if the page is wrapped in a scrollview you avoid this bug on android and the xamarin quirk on iOS.

  • SivamuralidharSivamuralidhar USMember ✭✭
    edited July 2015

    @Allister

    Hi Allister ,did you find solution to this issue??

    If found please post it, even am searching solution for this issue.

  • AllisterAllister USMember ✭✭

    hey @Sivamuralidhar , the work around is the same for the Xamarin.Forms iOS issue where the keyboard can obscure an entry field (unless you're using the nuget for that bug, https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/KeyboardOverlap).
    Which is to wrap the content of the page in a ScrollView. A bit rubbish, but it works.
    See the github issue list for nativecode.appcompat too, https://github.com/nativecode-dev/oss-xamarin/issues, as there are a few other things being worked on. Mr Mike is doing his best, but like any one man band he could use any help he can get to complete his excellent project.

  • Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

    @DarrenHaligas.3887 said:
    check this lib out. https://github.com/nativecode-dev/oss-xamarin this guy has done it.

    What's new about the animated hamburger icon for Xamarin.Forms 2.x?
    According to this link, the project is no longer maintened...
    Is there another way to do this? What about iOS?

  • SerenSeren TRMember

    @Allister said:
    TL;DR if using nativecode.mobile.appcompat in a PCL don't set an icon for the masterdetail page on Android, otherwise java may give you a very description nullpointerexception :-)

    For those who find this in the future, the NuGet https://www.nuget.org/packages/NativeCode.Mobile.AppCompat/ and friends from the github at https://github.com/nativecode-dev/oss-xamarin gives Android in Xamarin.Forms a native look.
    Anyway, simply adding these lines to the MainActivity.cs:
    using NativeCode.Mobile.AppCompat.FormsAppCompat;
    using NativeCode.Mobile.AppCompat.Renderers;
    then
    public class MainActivity : AppCompatFormsApplicationActivity {
    and
    FormsAppCompat.EnableAll();
    and not setting an icon on Android (I'm operating in XAML here) > <ContentPage.Icon>< OnPlatform x:TypeArguments="FileImageSource" iOS="burger.png" WinPhone="burger.png"/></ContentPage.Icon>and now things look like a lot more modern version of Android (this is Jelly Bean too).
    Its not production reading according to the creator at present, but I haven't hit a bug yet, but I'm not doing anything tricky.

    @Allister NativeCode.Mobile.AppCompat does not support IOS ?
    I need to make theme for Android and IOS and Windows Phone? how can I do it?

  • AllisterAllister USMember ✭✭

    hey @Seren, not sure what you're after, the animated hamburger thing that I was after here is an Android only thing as its not something I've seen any iOS device do.
    At any rate, as mentioned above nativecode is no longer maintained as Xamarin.Forms does what it was doing itself now.
    As for your question of a theme for all three platforms... there's the new feature currently in preview, https://developer.xamarin.com/guides/xamarin-forms/themes/

Sign In or Register to comment.