NavigationBar Background Image Renderer Android

rzee7rzee7 INUniversity ✭✭✭✭✭
edited June 2015 in Xamarin.Forms

Hi Guys,

I have been working on Xamarin Forms and I wanted to set an image as background image into navigation bar but I couldn't I have tried a lot but no luck at that time.

Then something hit in my mind and I tried and that works pretty charms! You just need to make a renderer and there a single method will help you.

Have a look :)

Android

    [assembly: ExportRenderer(typeof(ContentPage), typeof(ContentPageRenderer))]
    namespace MyApp.Renderers
    {
        public class ContentPageRenderer : PageRenderer
        {
            protected override void OnLayout(bool changed, int l, int t, int r, int b)
            {
                    base.OnLayout(changed, l, t, r, b);
                    var actionBar = ((Activity)Context).ActionBar;
                    actionBar.SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.YourImageInDrawable));
            }
        }
    }

iOS

    [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(BlueNavigationRenderer))]
    namespace MobileCRM.iOS.Renderers
    {
        public class BlueNavigationRenderer : NavigationRenderer
        {

            public override void ViewDidLoad()
            {
                base.ViewDidLoad();

                this.NavigationBar.BarTintColor = UIColor.FromPatternImage(UIImage.FromFile("topbar_bg@2x.png"));
             }
          }
     }

Here we go!! :D This post will help you to customize you navigation bar.

«1

Posts

  • stvansolanostvansolano UMInsider, University ✭✭✭
    edited June 2015

    Thanks for sharing! @M.RIYAZ-XSA

  • JaskomalJaskomal USMember
    edited July 2015

    Thanks a ton..!! @M.RIYAZ-XSA Nice post. I was looking for it desperately.

  • nainasharmanainasharma USMember

    Thank you much ....... @M.RIYAZ-XSA. i was really needing this.

  • d87Manishd87Manish USMember

    @M.RIYAZ-XSA Great post.
    Save my day

  • g_nehag_neha INMember

    @M.RIYAZ-XSA Great Work. I was struggling with navigation bar. It saved a lot of my time. Thanks :)

  • Hello Riyaz ,
    this is not working on iOS.

  • BuckPrivateBuckPrivate USUniversity ✭✭

    Hi @M. RIYAZ do you happen to have a a sample project that implements this? I've been trying to figure out how to do this using a menu redirecting to different content pages, but lose the barbackgroundcolor setting once I use the menu to redirect.

  • TuomasVuolloTuomasVuollo USMember

    This worked for me on Xamarin Forms iOS custom renderer just by changing

    [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(BlueNavigationRenderer))]

    to:

    [assembly: ExportRenderer(typeof(NavigationPage), typeof(BlueNavigationRenderer))]

  • HowardRybkoHowardRybko ZAMember

    Hi,

    @rzee7 said:
    Hi Guys,

    I have been working on Xamarin Forms and I wanted to set an image as background image into navigation bar but I couldn't I have tried a lot but no luck at that time.

    Then something hit in my mind and I tried and that works pretty charms! You just need to make a renderer and there a single method will help you.

    Have a look :)

    Android

    [assembly: ExportRenderer(typeof(ContentPage), typeof(ContentPageRenderer))]
    namespace MyApp.Renderers
    {
    public class ContentPageRenderer : PageRenderer
    {
    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
    base.OnLayout(changed, l, t, r, b);
    var actionBar = ((Activity)Context).ActionBar;
    actionBar.SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.YourImageInDrawable));
    }
    }
    }


    iOS

      [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(BlueNavigationRenderer))]
      namespace MobileCRM.iOS.Renderers
      {
          public class BlueNavigationRenderer : NavigationRenderer
          {
      
              public override void ViewDidLoad()
              {
                  base.ViewDidLoad();
      
                  this.NavigationBar.BarTintColor = UIColor.FromPatternImage(UIImage.FromFile("topbar_bg@2x.png"));
               }
            }
       }
    
      
    

    Here we go!! :D This post will help you to customize you navigation bar.

    Hi and thanks for the tip!

    What dimensions are you using for your background image for android?

  • tobelongtobelong USMember ✭✭

    Sorry Can i ask anything?

    How can i use this?

    example to me plz..

  • rzee7rzee7 INUniversity ✭✭✭✭✭

    Hey Guys

    Sorry for the delay, @HowardRybko I'm using standard dimension provided by android (48 x Match Parent (9.patch image))

    @tobelong I will make sample today and will update this :)

    Cheers!
    RIYAZ

  • tobelongtobelong USMember ✭✭

    @rzee7 Thank you a lot but I can compile this concept.
    thx for guildline to me about this code

  • bobihartobobiharto USMember

    i always get Null Object Reference on Android.. why ?

  • bobihartobobiharto USMember
  • tyktyk USMember

    @bobiharto +1
    Did you find any solution?

  • DylanLiuDylanLiu USUniversity ✭✭

    This is awesome!

  • MichelangeloFrancoMichelangeloFranco ITUniversity ✭✭

    Did you have also renderer example for WindowsPhone/UWP?

  • VolkanAkkus.9737VolkanAkkus.9737 TRMember ✭✭

    If you would like to show a logo at the right corner like me.

    1- Prepare a logo as attached navbarimage.png
    2- Go to https://romannurik.github.io/AndroidAssetStudio/nine-patches.html
    3- Do as shown on screen images
    4- Download result as attached zip

  • VolkanAkkus.9737VolkanAkkus.9737 TRMember ✭✭

    For iOS, what should be size of images to support as many device as possible?

    Could you share your image for iOS?

    @MichelangeloFranco @rzee7 @TuomasVuollo

  • VolkanAkkus.9737VolkanAkkus.9737 TRMember ✭✭

    If you would like to show a logo at the right corner like me for iOS.

    1. Prepare your image as
      navbarimage.png 32044px 24bit
      navbarimage@2x.png 640
      88px 24bit
      navbarimage_landscape.png 113464px 24bit
      navbarimage_landscape@2x.png 567
      32px 24bit

    2. Here is your renderer code for iOS

    using Myapp.iOS;
    using UIKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(NavigationPage), typeof(BlueNavigationRenderer))]
    namespace Myapp.iOS
    {
    public class BlueNavigationRenderer : NavigationRenderer
    {

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
    
            NavigationBar.SetBackgroundImage(UIImage.FromFile("navbarimage.png"), UIBarMetrics.Default);
            NavigationBar.SetBackgroundImage(UIImage.FromFile("navbarimage_landscape.png"), UIBarMetrics.LandscapePhone);
        }
    }
    

    }

  • VolkanAkkus.9737VolkanAkkus.9737 TRMember ✭✭

    If you would like to show a logo at the right corner like me for iOS.

    1. Prepare your image as
      navbarimage.png 32044px 24bit
      navbarimage@2x.png 640
      88px 24bit
      navbarimage_landscape.png 113464px 24bit
      navbarimage_landscape@2x.png 567
      32px 24bit

    2. Here is your renderer code for iOS

    using Myapp.iOS;
    using UIKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(NavigationPage), typeof(BlueNavigationRenderer))]
    namespace Myapp.iOS
    {
    public class BlueNavigationRenderer : NavigationRenderer
    {

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
    
            NavigationBar.SetBackgroundImage(UIImage.FromFile("navbarimage.png"), UIBarMetrics.Default);
            NavigationBar.SetBackgroundImage(UIImage.FromFile("navbarimage_landscape.png"), UIBarMetrics.LandscapePhone);
        }
    }
    

    }

    Thanks to

    http://www.idev101.com/code/User_Interface/UINavigationController/navBarBackground.html

    http://stackoverflow.com/a/15778868

    http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet

  • where is the sample ?

  • TiagoFloresTiagoFlores PTMember

    MarcoMacedo vai para o caralho

  • MinghuMinghu USMember ✭✭

    Hi, RIYAZ
    Thanks for your post.

    I have tried like as following, but not working for android.
    public class ContentPageRenderer : PageRenderer
    {
    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
    base.OnLayout(changed, l, t, r, b);
    var actionBar = ((FormsAppCompatActivity)Context).SupportActionBar;
    actionBar.SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.title_referlocal));
    }
    }
    }

    And style.xml is;

    <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#FF4081</item>
    </style>
    
    <style name="AppTheme" parent="AppTheme.Base">
    </style>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primaryDark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="windowActionModeOverlay">true</item>
    </style>
    

    I have created customized bottom tab renderer already by doing like above,
    but I also need to customize top customize with background image.
    Please help me.

  • rzee7rzee7 INUniversity ✭✭✭✭✭
    edited December 2016

    Hey Guys
    If you are using FormsAppCompactActivity with Xamarin Fomrs and AppCompactActivity in Xamarin android native/classic then you must have toolbar.xml layout as following:

    <android.support.v7.widget.Toolbar 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:minHeight="?attr/actionBarSize"
        android:background="@drawable/bg"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />
    

    then in android you just need add a line only no need android renderer.
    android:background="@drawable/yourImageName"
    iOS will remain the same with Its renderer.

    Thanks
    {rzee}

  • rzee7rzee7 INUniversity ✭✭✭✭✭

    Hey @Minghu see my last comment, will resolve your issue.

    Cheers!!
    {rzee}

  • UdaraAlwisUdaraAlwis LKMember ✭✭

    @MichelangeloFranco said:
    Did you have also renderer example for WindowsPhone/UWP?

    I don't think this approach is applicable for WindowsPhone/UWP UX pattern

  • rzee7rzee7 INUniversity ✭✭✭✭✭

    @UdaraAlwis I didn't try on windows just worked on iOS and Android.

  • lsolerlsoler ESMember

    Hello,

    I'm using the following code to create a NavigationBar Background Image.

    But, allways actionBar is null.

    [assembly: ExportRenderer(typeof(ContentPage), typeof(ContentPageRenderer))]
    namespace MyApp.Renderers
    {
    public class ContentPageRenderer : PageRenderer
    {
    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
    base.OnLayout(changed, l, t, r, b);
    var actionBar = ((Activity)Context).ActionBar;
    actionBar.SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.YourImageInDrawable));
    }
    }
    }

    Please, can anyone help me?

    Thanks.

  • rzee7rzee7 INUniversity ✭✭✭✭✭

    @lsoler Make sure your MainActivity should inherit FormsAppCompactActivity.

    Cheers!!
    {rzee}

  • lsolerlsoler ESMember

    Thanks rzee.

    Effectively, my MainActivity inherit from FormsAppCompactActivity.

    namespace XGAPP.Droid
    {
    [Activity(Label = "XGAPP", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
    protected override void OnCreate(Bundle bundle)
    {
    //TabLayoutResource = Resource.Layout.Tabbar;
    //ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);
    
            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    
    
    }
    

    }

    Thanks for your help.

  • rzee7rzee7 INUniversity ✭✭✭✭✭

    Hey @lsoler
    Try this

    Cheers!!
    {rzee}

  • JuliusvanMansveltJuliusvanMansvelt USMember ✭✭
    edited April 25

    Hello!

    How would you change the color of the back button in iOS? In this context:

    [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(BlueNavigationRenderer))]
    namespace MobileCRM.iOS.Renderers
    {
        public class BlueNavigationRenderer : NavigationRenderer
        {
    
            public override void ViewDidLoad()
            {
                base.ViewDidLoad();
    
                this.NavigationBar.BarTintColor = UIColor.FromPatternImage(UIImage.FromFile("topbar_bg@2x.png"));
             }
          }
     }
    

    NavigationItem.BarBackButton = something doesn't work

  • ZacariasJunior.1883ZacariasJunior.1883 USMember

    I am a beginner in Xamarin, I would like to understand, on file I must implement this code. Can anybody help me?

    @rzee7 said:
    Hi Guys,

    I have been working on Xamarin Forms and I wanted to set an image as background image into navigation bar but I couldn't I have tried a lot but no luck at that time.

    Then something hit in my mind and I tried and that works pretty charms! You just need to make a renderer and there a single method will help you.

    Have a look :)

    Android

    [assembly: ExportRenderer(typeof(ContentPage), typeof(ContentPageRenderer))]
    namespace MyApp.Renderers
    {
    public class ContentPageRenderer : PageRenderer
    {
    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
    base.OnLayout(changed, l, t, r, b);
    var actionBar = ((Activity)Context).ActionBar;
    actionBar.SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.YourImageInDrawable));
    }
    }
    }


    iOS

      [assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(BlueNavigationRenderer))]
      namespace MobileCRM.iOS.Renderers
      {
          public class BlueNavigationRenderer : NavigationRenderer
          {
      
              public override void ViewDidLoad()
              {
                  base.ViewDidLoad();
      
                  this.NavigationBar.BarTintColor = UIColor.FromPatternImage(UIImage.FromFile("topbar_bg@2x.png"));
               }
            }
       }
    
      
    

    Here we go!! :D This post will help you to customize you navigation bar.

  • My
    ((Activity)Context).ActionBar;
    Is it NULL, could someone tell me why?

  • rzee7rzee7 INUniversity ✭✭✭✭✭

    @JuliusvanMansvelt You have to set TintColor and then It will change.

    Thanks
    { rzee }

«1
Sign In or Register to comment.