›

Add Logo to Android ActionBar in Custom Tabbed Page

AlanTonissonAlanTonisson AUMember ✭✭
edited June 2014 in Xamarin.Forms

I want to customise the ActionBar on Android in a TabbedPage to add a logo at the left of the action bar.

What event do I override and how do I get access to the ActionBar?

I'm thinking something like this:

[assembly: ExportRendererAttribute(typeof(TabbedPage), typeof(CustomTabbedPage))]
public class CustomTabbedPage : TabbedRenderer
{
protected override void OnAttachedToWindow()
{
base.OnAttachedToWindow();
var actionBar = ????
}
}

Are there any examples of custom tabbed pages?

Posts

  • AlanTonissonAlanTonisson AUMember ✭✭
    edited July 2014

    I've got this working without customising TabbedPage, by setting a theme for my Activity.
    Not sure why it was not displaying the logo on the tabbed page before.

    Still curious about best practise for customizing a TabbedPage anyway.

  • AlanTonissonAlanTonisson AUMember ✭✭

    I figured out what makes my logo appear and disappear on the Android ActionBar.
    Adding a toolbar item:

    ToolbarItems.Add(settingsItem);

    Makes my logo appear.

    If I don't add any any toolbar items, it does not appear.
    Of course the toolbar items don't actually appear anyway.

    @ is up with that?

  • AlanTonissonAlanTonisson AUMember ✭✭

    The prerelease of 1.2.2 seems to fix most of my Android problems. Toolbar items work correctly and, more importantly, it does not crash when using a TabbedPage as my main page.

    One problem I still have is that Forms keeps setting the ShowHomeAsUp flag in the Android ActionBar.

    I set the ActionBar display options from inside OnAppearing:
    ActionBar.DisplayOptions = ActionBarDisplayOptions.UseLogo | ActionBarDisplayOptions.ShowHome;

    But Forms sets the ShowHomeAsUp flag when it displays the page.
    Does anyone know how to prevent it from doing that or where to hook some code just after it displays a page?

  • DirkWeltzDirkWeltz DEMember ✭✭✭

    @AlanTonisson: Do you find a possibility to change the visibility of the home icon dynamically?

  • AlanTonissonAlanTonisson AUMember ✭✭

    @Charlenni‌
    Have you tried ActionBar.SetDisplayShowHomeEnabled(true) and ActionBar.SetDisplayShowHomeEnabled(false)?

    They work for me.

  • DirkWeltzDirkWeltz DEMember ✭✭✭

    They work for me too, but I had to place them in the OnDraw function of the page. It would be better, if I had find a place inside NavigationPage. But there they don't work. It seems, that XF set the back button in Android in Page and in iOS in NavigationPage

  • alexeyNalexeyN UAMember ✭✭

    I came across the same problem with logo for the ActionBar. I used Alan's recommendation, and the logo appeared when the page loaded first time, but then it disappeared once I clicked on any tabs.
    This code works for me.

    ` public class CustomTabbedRenderer : TabbedRenderer
    {

        private Activity activity;
    private bool isFirstDesign = true;

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        activity = this.Context as Activity;
    }

    private void SetLogo()
    {
        if (activity==null) return;
        activity.ActionBar.SetDisplayShowCustomEnabled(false);
        activity.ActionBar.SetDisplayShowHomeEnabled(true);
    }

    protected override void OnWindowVisibilityChanged(ViewStates visibility)
    {
        base.OnWindowVisibilityChanged(visibility);
        var actionBar = activity.ActionBar;

        if (isFirstDesign)
        {
            ActionBarTabsSetup(actionBar);
            SetLogo();
            isFirstDesign = false;
        }
    }

    private void ActionBarTabsSetup(ActionBar actionBar)
    {
        TabSetup(actionBar.GetTabAt(0), Resource.Drawable.icon0);
        TabSetup(actionBar.GetTabAt(1), Resource.Drawable.icon1);
        TabSetup(actionBar.GetTabAt(2), Resource.Drawable.icon2);
    }

    private void TabSetup(ActionBar.Tab tab, int icon)
    {
        tab.SetIcon(icon);
        tab.TabSelected += (sender, args) => { SetLogo(); };
    }

}`

    I used the TabSelected event handler to keep the logo on the ActionBar.

  • DevATLDevATL USMember ✭✭

    Use a custom navigation renderer, and the basics are:

                var actionBar = ((Activity)Context).ActionBar;

            ImageView img = new ImageView(this.Context);
            img.LayoutParameters = new LinearLayout.LayoutParams(150, 150);  //size
            img.Visibility = ViewStates.Visible;
            img.Background = Context.GetDrawable(Resource.Drawable.logo_1); //your image
            actionBar.SetDisplayShowCustomEnabled(true);  
            actionBar.SetCustomView(img, new ActionBar.LayoutParams(150, 150, GravityFlags.CenterHorizontal | GravityFlags.Bottom)); //I want mine centered and at bottom
  • DevATLDevATL USMember ✭✭

    Use a custom navigation renderer, and the basics are:

                var actionBar = ((Activity)Context).ActionBar;

            ImageView img = new ImageView(this.Context);
            img.LayoutParameters = new LinearLayout.LayoutParams(150, 150);  //size
            img.Visibility = ViewStates.Visible;
            img.Background = Context.GetDrawable(Resource.Drawable.logo_1); //your image
            actionBar.SetDisplayShowCustomEnabled(true);  
            actionBar.SetCustomView(img, new ActionBar.LayoutParams(150, 150, GravityFlags.CenterHorizontal | GravityFlags.Bottom)); //I want mine centered and at bottom
  • DevATLDevATL USMember ✭✭

    Use a custom navigation renderer, and the basics are:

                var actionBar = ((Activity)Context).ActionBar;

            ImageView img = new ImageView(this.Context);
            img.LayoutParameters = new LinearLayout.LayoutParams(150, 150);  //size
            img.Visibility = ViewStates.Visible;
            img.Background = Context.GetDrawable(Resource.Drawable.logo_1); //your image
            actionBar.SetDisplayShowCustomEnabled(true);  
            actionBar.SetCustomView(img, new ActionBar.LayoutParams(150, 150, GravityFlags.CenterHorizontal | GravityFlags.Bottom)); //I want mine centered and at bottom
Sign In or Register to comment.