I'm developing a cross-platform app using Xamarin.Forms. As I want to set the background of my TabLayouts to a gradient, which isn't natively supported by XF, I've written a custom renderer for my TabbedPages:
using Android.App;
using Android.Graphics;
using Android.Support.Design.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using MyApp.Droid.Renderer;
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace MyApp.Droid.Renderer
{
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
private Activity _activity;
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
_activity = this.Context as FormsAppCompatActivity;
}
protected override void DispatchDraw(Canvas canvas)
{
base.DispatchDraw(canvas);
TabLayout tabs = _activity.FindViewById<TabLayout>(Resource.Id.sliding_tabs);
var gradient = new MyGradient();
tabs.SetBackground(gradient);
}
}
}
Now as intended the renderer gets triggered every time the app loads a TabbedPage.
However, _activity.FindViewById<TabLayout>(Resource.Id.sliding_tabs)
always just returns the TabLayout of my MainPage (also properly setting MyGradient as background) and I can't figure out how to get the TabLayout on one of my subpages to modify it as well.
Not sure if this is a problem with Xamarin or Android...
Hope you guys can help me.
Thanks!
Jan
EDIT: here's the styles.xml (I hope that's what @Code-Apprentice was referring to):
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<!--<item name="colorPrimaryDark">#1976D2</item>-->
<item name="colorPrimaryDark">#FF8630</item>
<!--<item name="android:windowTranslucentStatus">true</item>-->
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>
</resources>
Also a screenshot of the MainPage's top: http://i.imgur.com/VyX3YX7.png
And it's subpage ( MainPage.Navigation.PushAsync(new SubPage()); ): http://i.imgur.com/pRmecjE.png
For anyone else wondering, here's how I get the result I want now (even though I guess it's not the most elegant way of doing this):
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Views;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using MyApp.Droid.Renderer;
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace MyApp.Droid.Renderer
{
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
protected override void OnVisibilityChanged(Android.Views.View changedView, [GeneratedEnum] ViewStates visibility)
{
base.OnVisibilityChanged(changedView, visibility);
if (visibility == ViewStates.Visible)
{
var tabs = changedView.FindViewById<TabLayout>(Resource.Id.sliding_tabs);
var gradient = new MyGradient();
tabs.SetBackground(gradient);
}
}
}
}