locked
Change NavigationPage icon (hamburger) transition RRS feed

  • Question

  • User395271 posted

    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?

    Thursday, September 24, 2020 4:17 PM

All replies

  • User371688 posted

    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?

    Friday, September 25, 2020 6:56 AM
  • User395271 posted

    @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.

    Friday, September 25, 2020 8:00 AM
  • User371688 posted

    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?

    Friday, September 25, 2020 8:30 AM
  • User395271 posted

    @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);
                              }
                         }
                    }
               }
          }
     }
    

    }

    ```

    Friday, September 25, 2020 8:37 AM
  • User395271 posted

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

    Friday, September 25, 2020 8:38 AM
  • User371688 posted

    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. :)

    Sunday, September 27, 2020 8:11 AM
  • User371688 posted

    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. :)

    Monday, October 12, 2020 7:27 AM
  • User395271 posted

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

    Wednesday, October 21, 2020 12:54 PM