Develop Reference

Xamarin Forms Shell how to customize tab with custom renderers

I'd like to achieve this design (highlight the selected tab with a gradient):
I've been trying to achieve this on android at first using ShellTabLayoutAppearanceTracker and a custom ShellRenderer but I can't even change the background color of any tab in the tablayout.
Also even though I have 4 tabs in my tab bar, tabLayout.TabCount only returns 1. Clearly, there's something I don't understand in all this.
How would you go about it?
Bonus points for an iOS solution as well.
Here's a my code so far:
[assembly: ExportRenderer(typeof(***.App.AppShell), typeof(***.App.Droid.CustomShellRenderer))]
namespace ***.App.Droid
{
public class CustomShellRenderer : ShellRenderer
{
public CustomShellRenderer(Context context) : base(context) {}
protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
{
return new CustomShellTabLayoutAppearanceTracker(this);
}
}
public class CustomShellTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
{
public CustomShellTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext) { }
public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
{
base.SetAppearance(tabLayout, appearance);
for (var i = 0; i < tabLayout.TabCount; i++)
{
var tab = tabLayout.GetTabAt(i);
if (tab.IsSelected)
{
tab.View.Background = new GradientDrawable(/* ... */);
}
else
{
tab.View.SetBackgroundColor(appearance.BackgroundColor.ToAndroid());
}
}
}
}
}

In your custom ShellRenderer try overriding the CreateBottomNavViewAppearanceTracker method i.e.
protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
{
return new BottomNavView(this, shellItem);
}
And in the custom BottomNavView you can then do like:
public class BottomNavView : ShellBottomNavViewAppearanceTracker
{
public BottomNavView(IShellContext context, ShellItem shellItem) : base(context, shellItem) { }
public override void SetAppearance(Google.Android.Material.BottomNavigation.BottomNavigationView bottomView, IShellAppearanceElement appearance)
{
base.SetAppearance(bottomView, appearance);
BottomNavigationMenuView bottomNavigationView = bottomView.GetChildAt(0) as BottomNavigationMenuView;
var firstItem = bottomNavigationView.GetChildAt(0);
firstItem.Background = new GradientDrawable(GradientDrawable.Orientation.TopBottom, new int[] { Color.Red.ToAndroid(), Color.White.ToAndroid(), Color.Blue.ToAndroid() });
}
}
And with that you can draw your gradients i.e. in this case:

I just find a way to change Xamarin.Shell select Tab backgroud in ios, like this:
[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace App434.iOS
{
public class MyShellRenderer : ShellRenderer
{
protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
{
var renderer = base.CreateShellSectionRenderer(shellSection);
if (renderer != null)
{
(renderer as ShellSectionRenderer).NavigationBar.SetBackgroundImage(UIImage.FromFile("monkey.png"), UIBarMetrics.Default);
}
return renderer;
}
protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
{
return new MyOtherTabBarAppearanceTracker();
}
}
public class MyOtherTabBarAppearanceTracker : ShellTabBarAppearanceTracker, IShellTabBarAppearanceTracker
{
void IShellTabBarAppearanceTracker.SetAppearance(UITabBarController controller, ShellAppearance appearance)
{
base.SetAppearance(controller, appearance);
UITabBar tabBar = controller.TabBar;
CGSize size = new CGSize(tabBar.Frame.Width / 2, tabBar.Frame.Height);
//Background Color
UITabBar.Appearance.SelectionIndicatorImage = imageWithColor(size);
}
public UIImage imageWithColor(CGSize size)
{
CGRect rect = new CGRect(0, 0, size.Width, size.Height);
UIGraphics.BeginImageContext(size);
using (CGContext context = UIGraphics.GetCurrentContext())
{
context.SetFillColor(UIColor.Red.CGColor);
context.FillRect(rect);
}
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return image;
}
}
}
You can take a look the following thread:
Background color of selected TabBarItem in Xamarin on iOS
But I don't find the way to change selected tab background in Android, I will update it if I find this.

Large title for an View

I have xamarin. form app of few views, one among those views has a title of 42 characters. Is there any way to get that displayed on view without missing any character. When I try this renderer I am getting font size applicable for every view but I need to display that for the only specific view which has a title of 42 characters.
[assembly: ExportRenderer(typeof(CustomNavigationPageControl), typeof(CustomNavigationPageRenderer))]
namespace ALCInspection.Droid.Dependecies
{
public class CustomNavigationPageRenderer : NavigationPageRenderer
{
public CustomNavigationPageRenderer(Context context) : base(context)
{
}
private Android.Support.V7.Widget.Toolbar _toolbar;
private Android.Support.V7.Widget.Toolbar toolbar;
public override void OnViewAdded(Android.Views.View child)
{
base.OnViewAdded(child);
if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
{
toolbar = child as Android.Support.V7.Widget.Toolbar;
toolbar.ChildViewAdded += Toolbar_ChildViewAdded;
var a = toolbar.ChildCount;
}
}
void Toolbar_ChildViewAdded(object sender, ChildViewAddedEventArgs e)
{
var view = e.Child.GetType();
if (e.Child.GetType() == typeof(Android.Support.V7.Widget.AppCompatTextView))
{
var textView = e.Child as Android.Support.V7.Widget.AppCompatTextView;
textView.TextSize = 16;
toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
}
}
}
}
public class CustomNavigationPageControl : NavigationPage
{
public CustomNavigationPageControl(Page root) : base(root)
{
}
}
public static async Task NavigateToAsyncToSmallTitleView(Page firstPageToNavigate, INavigation navigation = null)
{
try
{
if (navigation == null)
{
navigation = ((CustomNavigationPageControl)Application.Current.MainPage).Navigation;
}
await navigation.PushAsync(firstPageToNavigate, false);
}
catch(Exception exception)//exception specified cast is not valid
{
}
}
and i am calling it as
await Helper.NavigateToAsyncWithSmallTitle(new OtherViwq());
I come with above code on searching but it is throwing specified cast exception.

According to this question, you need to use a custom renderer.
Have a look also at here, duplicate question here and here.
Hope it helps..

Add padding to button renderer with Image on Android Xamarin

I'm having trouble padding an button with Image on Android. I have it working using Insets on iOS but can't achieve the same thing on Android.
Here is my Android renderer code:
public class PaddedButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var button = (PaddedButton)Element;
UpdatePadding();
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == nameof(PaddedButton.Padding))
{
UpdatePadding();
}
}
private void UpdatePadding()
{
var element = Element as PaddedButton;
if (element != null)
{
Control.SetPadding(
(int)element.Padding,
(int)element.Padding,
(int)element.Padding,
(int)element.Padding);
}
}
}
Here is my working iOS button:
public class PaddedButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var button = (PaddedButton)Element;
Control.ContentEdgeInsets = new UIEdgeInsets((nfloat)button.Padding, (nfloat)button.Padding, (nfloat)button.Padding, (nfloat)button.Padding);
}
}
}
Any suggestions? I'm starting to think padding is the wrong attribute to be changing on Android. Thanks.

Add padding to button renderer with Image on Android Xamarin
I test your code, it did not work, but you could refer to #Dbl's Answer, it works fine both on Android and iOS.
First, make sure you have define the Padding in your PaddedButton :
public class EnhancedButton : Button
{
public static BindableProperty PaddingProperty = BindableProperty.Create(nameof(Padding), typeof(Thickness), typeof(EnhancedButton), default(Thickness), defaultBindingMode: BindingMode.OneWay);
public Thickness Padding
{
get { return (Thickness)GetValue(PaddingProperty); }
set { SetValue(PaddingProperty, value); }
}
}
Second, in your UpdatePadding() method, when you using this.Control.SetPadding(), modify your code like this :
private void UpdatePadding()
{
var element = this.Element as EnhancedButton;
if (element != null)
{
this.Control.SetPadding(
(int)element.Padding.Left,
(int)element.Padding.Top,
(int)element.Padding.Right,
(int)element.Padding.Bottom
);
}
}

mvvmcross xamarin android activity Show strange behavoir

I have two Activities like
[Activity(Label = "View for FirstViewModel", MainLauncher = true)]
public class FirstView : MvxActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.FirstView);
}
}
[Activity(Label = "View for SecondViewModel", MainLauncher = false)]
public class SecondView : MvxActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.SecondView);
}
}
and two ViewModels
public class FirstViewModel
: MvxViewModel
{
private string _hello = "Hello MvvmCross 1";
public FirstViewModel()
{
}
public string Hello
{
get { return _hello; }
set { _hello = value; RaisePropertyChanged(() => Hello); }
}
public ICommand Next
{
get
{
return new MvxCommand(() => ShowViewModel<SecondViewModel>());
}
}
}
public class SecondViewModel : MvxViewModel
{
public SecondViewModel()
{
}
private string _hello = "Hello MvvmCross 2";
public string Hello
{
get { return _hello; }
set { _hello = value; RaisePropertyChanged(() => Hello); }
}
public ICommand Back
{
get
{
return new MvxCommand(() => ShowViewModel<FirstViewModel>());
}
}
}
I'm trying just two switch back and forth between them. the back step just does not work. Logging looks okay to me. Using the same VMs with an WPF project works just fine. So what the problem with androids activities?
Thanks in advance!
MH

Changing keyboard's ImeOptions of Xamarin.Forms.Entry in custom renderer not working on Android

What I have:
I have a custom class MyEntry derived from Xamarin.Forms.Entry and custom renderer classes MyEntryRenderer for Android and iOS.
What I want:
I want to change the keyboard's "enter"-button to a "search"-button by changing ImeOptions on Android and ReturnKeyType on iOS (see sample code). When I press the altered "search"-button, the MyEntry.Completed event should be called (like before when I pressed the un-altered "enter"-button.
What really happens:
On iOS the code works like expected. But on Android nothing happens. The event doesn't get called.
My question:
How can I achieve what I described above on Android?
Sample code:
App.cs:
namespace CustomEntry
{
public class App
{
public static Page GetMainPage()
{
MyEntry entry = new MyEntry {
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
Placeholder = "Enter some text"
};
entry.Completed += delegate {
Console.WriteLine("Completed");
};
return new ContentPage {
Content = entry,
};
}
}
}
MyEntry.cs:
namespace CustomEntry
{
public class MyEntry:Entry
{
}
}
MyEntryRenderer.cs (Android):
[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomEntry.Android
{
public class MyEntryRenderer:EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null) {
Control.ImeOptions = global::Android.Views.InputMethods.ImeAction.Search;
}
}
}
}
MyEntryRenderer.cs (iOS):
[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomEntry.iOS
{
public class MyEntryRenderer:EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null) {
Control.ReturnKeyType = UIReturnKeyType.Search;
}
}
}
}

I found a workaround for my problem myself:
First I added an Action to my custom entry to be called when I press my "search"-button.
MyEntry.cs
namespace CustomEntry
{
public class MyEntry:Entry
{
public Action SearchPressed = delegate {
};
}
}
Second I "listen" for ImeAction.Search like this and call the Action I added to my custom entry.
MyEntryRenderer.cs (Android):
[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomEntry.Android
{
public class MyEntryRenderer:EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null) {
Control.ImeOptions = ImeAction.Search;
Control.EditorAction += (sender, args) => {
if (args.ActionId == ImeAction.Search) {
var entry = (AddressEntry)Element;
entry.SearchPressed();
}
};
}
}
}
}
In a third class where I use MyEntry I can run some code when the "search"-button is pressed like this:
var myEntry = new MyEntry();
myEntry.SearchPressed += SomeMethod;

public class EntryExtensionRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs e)
{
base.OnElementChanged(e);
if ((Element as EntryExtension).NoSuggestionsKey)
{
Control.AutocorrectionType = UITextAutocorrectionType.No;
}
if ((Element as EntryExtension).ReturnKeyType.Equals("Done"))
{
this.AddDoneButton("Done", (EntryExtension)Element);
}
else if ((Element as EntryExtension).ReturnKeyType.Equals("Next"))
{
this.AddDoneButton("Next", (EntryExtension)Element);
}
}
protected void AddDoneButton(string button, EntryExtension entry)
{
UIToolbar toolbar = new UIToolbar(new RectangleF(0.0f, 0.0f, 50.0f, 44.0f));
var doneButton = new UIBarButtonItem();
if (button.Equals("Done")) {
doneButton = new UIBarButtonItem(UIBarButtonSystemItem.Done, delegate
{
entry.KeyPressedEnter();
});
}
if (button.Equals("Next"))
{
doneButton = new UIBarButtonItem("Next", UIBarButtonItemStyle.Done, delegate
{
entry.KeyPressedEnter();
});
}
toolbar.Items = new UIBarButtonItem[] {
new UIBarButtonItem (UIBarButtonSystemItem.FlexibleSpace),
doneButton
};
this.Control.InputAccessoryView = toolbar;
}
}