Forum Xamarin.Android
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Change NavigationPage icon (hamburger) transition

Xamarin Android has built in "Hamburger" icon and transition to "back arrow" animation.

I had to change standard icons with a new custom renderer of MasterDetailPage.

Problem is the transition animation is the same as before (hamburger to arrow):

One way to deal with it is totally disable NavigationPage animation, but application is looking more dead.

Is there any way to customize transition of NavigationPage icons?

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    I had to change standard icons with a new custom renderer of MasterDetailPage.
    Problem is the transition animation is the same as before (hamburger to arrow):

    Why do you want to change the NavigationPage icon (hamburger) transition?

    What kind of icon (hamburger) transition do you want to implement?

  • SergTomcatSergTomcat Member ✭✭

    @jezh said:

    Why do you want to change the NavigationPage icon (hamburger) transition?

    As shown on example picture above, if I replace default hamburger icon with Xamarin logo, expectedly during transition is still goes from default hamburger icon.

    What kind of icon (hamburger) transition do you want to implement?

    Any kind in general. Let say now I have for example Sun icon, Moon icon and animation sequence of them transforming into each other.

  • jezhjezh Member, Xamarin Team Xamurai

    I had to change standard icons with a new custom renderer of MasterDetailPage.

    Ok, I see what you mean.

    Could you please post the code of your custom renderer so that we can try to test on our side?

  • SergTomcatSergTomcat Member ✭✭
    edited September 25

    @jezh said:

    I had to change standard icons with a new custom renderer of MasterDetailPage.

    Ok, I see what you mean.

    Could you please post the code of your custom renderer so that we can try to test on our side?

    Of course:

    [assembly: ExportRenderer(typeof(MainPage), typeof(IconNavigationPageRenderer))]
    namespace WebtutorMobileX.Droid
    {
         public class IconNavigationPageRenderer : MasterDetailPageRenderer
         {
              public IconNavigationPageRenderer(Context context) : base(context) { }
    
              protected override void OnLayout(bool changed, int l, int t, int r, int b)
              {
                   base.OnLayout(changed, l, t, r, b);
    
                   var resourceid = Resources.GetIdentifier("status_bar_height", "dimen", "android");
    
                   int size = (int)(Resources.GetDimensionPixelSize(resourceid) * 0.4);
                   if (size > 0)
                   {
                        var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
                        if (toolbar != null)
                        {
                             for (var i = 0; i < toolbar.ChildCount; i++)
                             {
                                  var imageButton = toolbar.GetChildAt(i) as Android.Widget.ImageButton;
    
                                  var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
                                  if (drawerArrow == null)
                                       continue;
    
                                  if (App.MainPageInstance.Detail?.Navigation?.NavigationStack.Count <= 1) // REPLACES ONLY HAMBURGER, ARROW ICON STAYS THE SAME
                                  {
                                       var context = Android.App.Application.Context;
    
                                       Drawable dr = context.GetDrawable(Resource.Drawable.hamburger); // <===== MY CUSTOM HAMBURGER ICON                                  
                                       Bitmap bitmap = ((BitmapDrawable)dr).Bitmap;
    
                                       dr = new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, size, size, true));
    
                                       imageButton.SetImageDrawable(dr);
                                  }
                             }
                        }
                   }
              }
         }
    }
    
    
  • SergTomcatSergTomcat Member ✭✭

    Also I don't care about the method of customization. It's just this way is the only one that i found.

  • jezhjezh Member, Xamarin Team Xamurai

    Yes, it is just the case as you said.

    And I have created a new issue about this question , you can follow it up here: https://github.com/xamarin/Xamarin.Forms/issues/12274

    Thank you very much for your feedback. :)

  • jezhjezh Member, Xamarin Team Xamurai

    Hi @SergTomcat , you can check the issue link we posted, it have updated.

    Besides, if my reply is useful for you, could you please mark my reply as answered? Thanks in advance. :)

  • SergTomcatSergTomcat Member ✭✭
    edited October 21

    Still waiting cofirmation on github that transition animation is not possible.

Sign In or Register to comment.