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.
Related
I am currently migrating my Xamarin.Forms app to .NET MAUI, and having a difficulty in migrating view renderer. In .NET MAUI I am using camera2 in my app, and using the renderer for same.
My Xamarin forms code is
public class CameraRecordV3 : View
{
public static readonly BindableProperty StartProperty = BindableProperty.Create(
"Start", typeof(int), typeof(int), 6000);
public int Start
{
set { SetValue(StartProperty, value); }
get { return (int)GetValue(StartProperty); }
}
}
using iVue.Views;
using System.ComponentModel;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Handlers.Compatibility;
namespace iVue.Platforms.Android.Renderers;
public class CameraRecordRenderer_V3 : ViewRenderer<CameraRecordV3, CameraRecordControl_V3>
{
private CameraRecordControl_V3 _cameraControl;
private DisplayTimeHelper _displayTimeHelper = new DisplayTimeHelper();
public CameraRecordRenderer_V3(Context context)
: base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<CameraRecordV3> e)
{
base.OnElementChanged(e);
if (Control == null)
{
_cameraControl = new CameraRecordControl_V3(Context, e.NewElement);
SetNativeControl(_cameraControl);
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
var model = (CameraRecordV3)sender;
base.OnElementPropertyChanged(sender, e);
}
protected override void Dispose(bool disposing)
{
base.Dispose(disposing);
if (disposing)
{
_cameraControl.Dispose();
if(Control != null)
Control.Dispose();
}
}
}
CameraRecordControl_V3 is a viewgroup which contains a native view for android, which contains buttons and camera
public class CameraRecordControl_V3 : ViewGroup
{
public CameraRecordControl_V3(Context context, CameraRecordV3 vm) : base(context)
{
_activity = this.Context as Activity;
_view = _activity.LayoutInflater.Inflate(Resource.Layout.CameraRecordLayoutV2, this, false);
AddView(_view);
_toolbar = (Toolbar)_view.FindViewById(Resource.Id.toolbar);
textureView = (AutoFitTextureView)_view.FindViewById(Resource.Id.textureview)
_questionTitleView = (Button)_view.FindViewById(Resource.Id.Start);
}
}
I tried using handler in .net maui but no luck with it.
My Maui Code is as follows
public interface ICameraRecordV3 : IView
{
public int StartTime { get; }
}
public partial class CameraRecordV3Handler
{
public static PropertyMapper<ICameraRecordV3, CameraRecordV3Handler> CustomMapper
= new PropertyMapper<ICameraRecordV3, CameraRecordV3Handler>(ViewHandler.ViewMapper)
{
[nameof(ICameraRecordV3.StartTime)] = MapStartTime,
};
public CameraRecordV3Handler() : base(CustomMapper)
{
}
public CameraRecordV3Handler(PropertyMapper mapper = null) : base(mapper ?? CustomMapper)
{
}
}
public class CameraRecordV3 : View, ICameraRecordV3
{
public static readonly BindableProperty StartProperty = BindableProperty.Create(
"StartTime", typeof(int), typeof(int), 6000);
public int Start
{
set { SetValue(StartTimeProperty, value); }
get { return (int)GetValue(StartTimeProperty); }
}
}
//Platform Specific code
public partial class CameraRecordV3Handler : ViewHandler<ICameraRecordV3, CameraRecordControl_V3>
{
private CameraRecordControl_V3 _cameraControl;
protected override CameraRecordControl_V3 CreatePlatformView()
{
_cameraControl = new CameraRecordControl_V3(Context, null);
return _cameraControl;
}
protected override void ConnectHandler(CameraRecordControl_V3 platformView)
{
base.ConnectHandler(platformView);
}
private static void MapStartTime(CameraRecordV3Handler handler, ICameraRecordV3 arg2)
{
handler.PlatformView?.UpdateStartTime(arg2.StartTime);
}
}
//MauiProgram
builder.ConfigureMauiHandlers(handlers =>
{
#if __ANDROID__
handlers.AddHandler(typeof(CameraRecordV3), typeof(iVue.Handlers.CameraRecordV3Handler));
#endif
});
You can continue to use CustomRenderer in MAUI, you just need to Remove any ExportRenderer directives as they won't be needed in .NET MAUI. And then configure each renderer using conditional compilation for each platform. You can replace handlers.AddCompatibilityRenderer with handlers.AddHandler in the documentation. Using handlers.AddCompatibilityRenderer will cause a crash.
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..
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
);
}
}
I am trying to change back arrow image in navigation page. For this in android app i created navigation page renderer and then using method toolbar.SetNavigationIcon and its not working, but when i use toolbar.SetLogo its working fine.
protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
{
base.OnElementChanged(e);
toolbar.SetNavigationIcon(Resource.Drawable.arrow);
toolbar.SetLogo(Resource.Drawable.arrow);
}
public override void OnViewAdded(Android.Views.View child)
{
base.OnViewAdded(child);
if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
{
toolbar = (Android.Support.V7.Widget.Toolbar)child;
toolbar.ChildViewAdded += Toolbar_ChildViewAdded;
}
}
I also tried add image to app:navigationIcon in toolbar.axml, and it shows great in designer
my arrow
But, when i starting my app i have the same standart arrow icon
enter image description here
If your MainActivity is FormsApplicationActivity, you could refer to this example :
https://github.com/jessejiang0214/ChangeBackIconInXF/tree/master/Droid
If your MainActivity type is FormsAppCompatActivity, you could custom a PageRenderer and change the Toolbar's NavigationIcon.
For example :
[assembly: ExportRenderer(typeof(ContentPage), typeof(NavigationPageRendererDroid))]
...
public class NavigationPageRendererDroid : PageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
{
base.OnElementChanged(e);
var context = (Activity)Xamarin.Forms.Forms.Context;
var toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);
toolbar.NavigationIcon = Android.Support.V4.Content.ContextCompat.GetDrawable(context, Resource.Drawable.Back);
}
}
Usage :
MainPage = new NavigationPage(new MainPage());
...
//When click a button in MainPage, navigate to another page
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new TestPage());
}
Effect.
Update :
When you use Navigation.PushAsync() method navigate to another page, the system will automatically update the Toolbar's icon, you could find in the source code :
protected virtual Task<bool> OnPushAsync(Page view, bool animated)
{
return SwitchContentAsync(view, animated);
}
Task<bool> SwitchContentAsync(Page page, bool animated, bool removed = false, bool popToRoot = false)
{
...
UpdateToolbar();
...
}
void UpdateToolbar()
{
...
bool isNavigated = ((INavigationPageController)Element).StackDepth > 1;
if (isNavigated)
{
...
if (NavigationPage.GetHasBackButton(Element.CurrentPage))
{
//Set the navigation back icon < =================== !!! =-=
var icon = new DrawerArrowDrawable(activity.SupportActionBar.ThemedContext);
icon.Progress = 1;
bar.NavigationIcon = icon;
}
}
...
}
Solution :
So we have no choice but to custom a NavigationPageRenderer, override the OnPushAsync method to set the Toolbar's icon.
using AToolbar = Android.Support.V7.Widget.Toolbar;
[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(NavigationPageRendererDroid))] // APPCOMP
...
public class NavigationPageRendererDroid : Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer // APPCOMP
{
public AToolbar toolbar;
public Activity context;
protected override Task<bool> OnPushAsync(Page view, bool animated)
{
var retVal = base.OnPushAsync(view, animated);
context = (Activity)Xamarin.Forms.Forms.Context;
toolbar = context.FindViewById<Android.Support.V7.Widget.Toolbar>(Droid.Resource.Id.toolbar);
if (toolbar != null)
{
if (toolbar.NavigationIcon != null)
{
toolbar.NavigationIcon = Android.Support.V4.Content.ContextCompat.GetDrawable(context, Resource.Drawable.Back);
//toolbar.SetNavigationIcon(Resource.Drawable.Back);
}
}
return retVal;
}
}
The CustomNavigationPage are defined in PCL :
public class CustomNavigationPage : NavigationPage
{
public CustomNavigationPage(Page startupPage) : base(startupPage)
{
}
}
Usage :
public App()
{
InitializeComponent();
MainPage = new CustomNavigationPage(new MainPage());
}
...
// In MainPage
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new TestPage());
}
I solved this the next way:
In my MainActivity i am added static toolbar property and identified it in OnCreateOptionsMenu
public static Toolbar ToolBar { get; private set; }
public override bool OnCreateOptionsMenu(IMenu menu)
{
ToolBar = FindViewById<Toolbar>(Resource.Id.toolbar);
ToolBar.SetNavigationIcon(Resource.Drawable.arrow);
return base.OnCreateOptionsMenu(menu);
}
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
....
}
Then in PageRenderer:
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
{
base.OnElementChanged(e);
MainActivity.ToolBar?.SetNavigationIcon(Resource.Drawable.arrow);
}
But!! From 2 ways i have bad effect with redrawing
Usage:
async void tapImage_Tapped(object sender, EventArgs e)
{
await Navigation.PushAsync(new ChooseGenrePage(_listGenres));
}
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;
}
}