android segmented control renderer

Billing/Billing.Android/Billing.Android.csproj

@@ -16,7 +16,7 @@
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <MonoAndroidResourcePrefix>Resources</MonoAndroidResourcePrefix>
     <MonoAndroidAssetsPrefix>Assets</MonoAndroidAssetsPrefix>
-    <TargetFrameworkVersion>v12.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v11.0</TargetFrameworkVersion>
     <AndroidEnableSGenConcurrent>true</AndroidEnableSGenConcurrent>
     <AndroidUseAapt2>true</AndroidUseAapt2>
     <AndroidHttpClientHandlerType>Xamarin.Android.Net.AndroidClientHandler</AndroidHttpClientHandlerType>
@@ -90,6 +90,7 @@
     <Compile Include="Renderers\TintImageButtonRenderer.cs" />
     <Compile Include="Renderers\BillingPageRenderer.cs" />
     <Compile Include="Renderers\BlurryPanelRenderer.cs" />
+    <Compile Include="Renderers\SegmentedControlRenderer.cs" />
   </ItemGroup>
   <ItemGroup>
     <AndroidAsset Include="Assets\fa-brands-400.ttf" />
@@ -129,6 +130,30 @@
       <Generator>
       </Generator>
     </AndroidResource>
+    <AndroidResource Include="Resources\layout\RadioGroup.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\layout\RadioButton.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\color\segmented_control_text.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\segmented_control_background.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\segmented_control_first_background.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\segmented_control_last_background.xml">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
   </ItemGroup>
   <ItemGroup>
     <AndroidResource Include="Resources\drawable\splash_logo.png" />
@@ -543,6 +568,10 @@
   <ItemGroup>
     <AndroidResource Include="Resources\drawable\left.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Resources\layout\" />
+    <Folder Include="Resources\color\" />
+  </ItemGroup>
   <Import Project="..\..\Billing.Shared\Billing.Shared.projitems" Label="Shared" />
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

Billing/Billing.Android/Properties/AndroidManifest.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="0.8.309" package="org.tsanie.billing" android:installLocation="auto" android:versionCode="8">
-	<uses-sdk android:minSdkVersion="24" android:targetSdkVersion="31" />
+	<uses-sdk android:minSdkVersion="24" android:targetSdkVersion="30" />
 	<application android:label="@string/applabel" android:theme="@style/MainTheme"></application>
 	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 </manifest>

Billing/Billing.Android/Renderers/SegmentedControlRenderer.cs

@@ -0,0 +1,245 @@
+using Android.Content;
+using Android.Graphics.Drawables;
+using Android.Views;
+using Android.Widget;
+using Billing.Droid.Renderers;
+using Billing.UI;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.Android;
+using RadioButton = Android.Widget.RadioButton;
+
+[assembly: ExportRenderer(typeof(SegmentedControl), typeof(SegmentedControlRenderer))]
+namespace Billing.Droid.Renderers
+{
+    public class SegmentedControlRenderer : ViewRenderer<SegmentedControl, RadioGroup>
+    {
+        RadioGroup nativeControl;
+        RadioButton _rb;
+        readonly Context context;
+
+        public SegmentedControlRenderer(Context context) : base(context)
+        {
+            this.context = context;
+        }
+
+        protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
+        {
+            base.OnElementChanged(e);
+
+            if (Control == null)
+            {
+                // Instantiate the native control and assign it to the Control property with
+                // the SetNativeControl method
+                var layoutInflater = LayoutInflater.From(context);
+
+                var view = layoutInflater.Inflate(Resource.Layout.RadioGroup, null);
+
+                nativeControl = (RadioGroup)layoutInflater.Inflate(Resource.Layout.RadioGroup, null);
+                var density = context.Resources.DisplayMetrics.Density;
+
+                for (var i = 0; i < Element.Children.Count; i++)
+                {
+                    var o = Element.Children[i];
+                    var rb = (RadioButton)layoutInflater.Inflate(Resource.Layout.RadioButton, null);
+
+                    var width = rb.Paint.MeasureText(o.Text) * density + 0.5f;
+                    rb.LayoutParameters = new RadioGroup.LayoutParams((int)width, LayoutParams.WrapContent, 1f);
+                    rb.Text = o.Text;
+
+                    if (i == 0)
+                        rb.SetBackgroundResource(Resource.Drawable.segmented_control_first_background);
+                    else if (i == Element.Children.Count - 1)
+                        rb.SetBackgroundResource(Resource.Drawable.segmented_control_last_background);
+                    else
+                        rb.SetBackgroundResource(Resource.Drawable.segmented_control_background);
+
+                    ConfigureRadioButton(i, rb);
+
+                    nativeControl.AddView(rb);
+                }
+
+                var option = (RadioButton)nativeControl.GetChildAt(Element.SelectedSegmentIndex);
+
+                if (option != null)
+                    option.Checked = true;
+
+                SetNativeControl(nativeControl);
+            }
+
+            if (e.OldElement != null)
+            {
+                // Unsubscribe from event handlers and cleanup any resources
+                if (nativeControl != null)
+                    nativeControl.CheckedChange -= NativeControl_ValueChanged;
+            }
+
+            if (e.NewElement != null)
+            {
+                // Configure the control and subscribe to event handlers
+                nativeControl.CheckedChange += NativeControl_ValueChanged;
+            }
+        }
+
+        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            base.OnElementPropertyChanged(sender, e);
+
+            if (nativeControl == null || Element == null) return;
+
+            switch (e.PropertyName)
+            {
+                case "Renderer":
+                    Element?.SendValueChanged();
+                    break;
+                case nameof(SegmentedControl.SelectedSegmentIndex):
+                    var option = (RadioButton)nativeControl.GetChildAt(Element.SelectedSegmentIndex);
+
+                    if (option != null)
+                        option.Checked = true;
+
+                    if (Element.SelectedSegmentIndex < 0)
+                    {
+                        var layoutInflater = LayoutInflater.From(context);
+
+                        nativeControl = (RadioGroup)layoutInflater.Inflate(Resource.Layout.RadioGroup, null);
+
+                        for (var i = 0; i < Element.Children.Count; i++)
+                        {
+                            var o = Element.Children[i];
+                            var rb = (RadioButton)layoutInflater.Inflate(Resource.Layout.RadioButton, null);
+
+                            var width = rb.Paint.MeasureText(o.Text);
+                            rb.LayoutParameters = new RadioGroup.LayoutParams((int)width, LayoutParams.WrapContent, 1f);
+                            rb.Text = o.Text;
+
+                            if (i == 0)
+                                rb.SetBackgroundResource(Resource.Drawable.segmented_control_first_background);
+                            else if (i == Element.Children.Count - 1)
+                                rb.SetBackgroundResource(Resource.Drawable.segmented_control_last_background);
+                            else
+                                rb.SetBackgroundResource(Resource.Drawable.segmented_control_background);
+
+                            ConfigureRadioButton(i, rb);
+
+                            nativeControl.AddView(rb);
+                        }
+
+                        nativeControl.CheckedChange += NativeControl_ValueChanged;
+
+                        SetNativeControl(nativeControl);
+                    }
+
+                    Element.SendValueChanged();
+                    break;
+                case nameof(SegmentedControl.TintColor):
+                    OnPropertyChanged();
+                    break;
+                case nameof(SegmentedControl.IsEnabled):
+                    OnPropertyChanged();
+                    break;
+                case nameof(SegmentedControl.SelectedTextColor):
+                    var v = (RadioButton)nativeControl.GetChildAt(Element.SelectedSegmentIndex);
+                    v.SetTextColor(Element.SelectedTextColor.ToAndroid());
+                    break;
+            }
+        }
+
+        void OnPropertyChanged()
+        {
+            if (nativeControl != null && Element != null)
+            {
+                for (var i = 0; i < Element.Children.Count; i++)
+                {
+                    var rb = (RadioButton)nativeControl.GetChildAt(i);
+
+                    ConfigureRadioButton(i, rb);
+                }
+            }
+        }
+
+        void ConfigureRadioButton(int i, RadioButton rb)
+        {
+            var textColor = Element.SelectedTextColor;
+            if (i == Element.SelectedSegmentIndex)
+            {
+                rb.SetTextColor(textColor.ToAndroid());
+                rb.Paint.FakeBoldText = true;
+                _rb = rb;
+            }
+            else
+            {
+                var tColor = Element.IsEnabled ?
+                    textColor.IsDefault ? Element.TintColor.ToAndroid() : textColor.MultiplyAlpha(.6).ToAndroid() :
+                    Element.DisabledColor.ToAndroid();
+                rb.SetTextColor(tColor);
+            }
+
+            GradientDrawable selectedShape;
+            GradientDrawable unselectedShape;
+
+            var gradientDrawable = (StateListDrawable)rb.Background;
+            var drawableContainerState = (DrawableContainer.DrawableContainerState)gradientDrawable.GetConstantState();
+            var children = drawableContainerState.GetChildren();
+
+            // Doesnt works on API < 18
+            selectedShape = children[0] is GradientDrawable selected ? selected : (GradientDrawable)((InsetDrawable)children[0]).Drawable;
+            unselectedShape = children[1] is GradientDrawable unselected ? unselected : (GradientDrawable)((InsetDrawable)children[1]).Drawable;
+
+            var color = Element.IsEnabled ? Element.TintColor.ToAndroid() : Element.DisabledColor.ToAndroid();
+
+            selectedShape.SetStroke(3, color);
+            selectedShape.SetColor(color);
+            unselectedShape.SetStroke(3, color);
+
+            rb.Enabled = Element.IsEnabled;
+        }
+
+        void NativeControl_ValueChanged(object sender, RadioGroup.CheckedChangeEventArgs e)
+        {
+            var rg = (RadioGroup)sender;
+            if (rg.CheckedRadioButtonId != -1)
+            {
+                var id = rg.CheckedRadioButtonId;
+                var radioButton = rg.FindViewById(id);
+                var radioId = rg.IndexOfChild(radioButton);
+
+                var rb = (RadioButton)rg.GetChildAt(radioId);
+
+                var textColor = Element.SelectedTextColor;
+                var color = Element.IsEnabled ?
+                    textColor.IsDefault ? Element.TintColor.ToAndroid() : textColor.MultiplyAlpha(.6).ToAndroid() :
+                    Element.DisabledColor.ToAndroid();
+                if (_rb != null)
+                {
+                    _rb.SetTextColor(color);
+                    _rb.Paint.FakeBoldText = false;
+                }
+                rb.SetTextColor(Element.SelectedTextColor.ToAndroid());
+                rb.Paint.FakeBoldText = true;
+                _rb = rb;
+
+                Element.SelectedSegmentIndex = radioId;
+            }
+        }
+
+        protected override void Dispose(bool disposing)
+        {
+            if (nativeControl != null)
+            {
+                nativeControl.CheckedChange -= NativeControl_ValueChanged;
+                nativeControl.Dispose();
+                nativeControl = null;
+                _rb = null;
+            }
+
+            try
+            {
+                base.Dispose(disposing);
+            }
+            catch
+            {
+                return;
+            }
+        }
+    }
+}

Billing/Billing.Android/Resources/color/segmented_control_text.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+     <item android:state_checked="true" android:color="@color/normal"/>
+     <item android:color="@color/selected" />
+ </selector>

Billing/Billing.Android/Resources/drawable/segmented_control_background.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+     <item android:state_checked="true">
+         <inset android:insetRight="-1dp">
+             <shape android:id="@+id/shape_id" xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                 <solid android:color="@color/selected" />
+                 <stroke android:width="1dp" android:color="@color/selected" />
+             </shape>
+         </inset>
+     </item>
+     <item android:state_checked="false">
+         <inset android:insetRight="-1dp">
+             <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                 <solid android:color="@color/normal" />
+                 <stroke android:width="1dp" android:color="@color/selected" />
+             </shape>
+         </inset>
+     </item>
+ </selector>

Billing/Billing.Android/Resources/drawable/segmented_control_first_background.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+     <item android:state_checked="true">
+         <inset android:insetRight="-1dp">
+             <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                 <solid android:color="@color/selected" />
+                 <stroke android:width="1dp" android:color="@color/selected" />
+                 <corners android:topLeftRadius="2sp" android:bottomLeftRadius="2sp" />
+             </shape>
+         </inset>
+     </item>
+     <item android:state_checked="false">
+         <inset android:insetRight="-1dp">
+             <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+                 <solid android:color="@color/normal" />
+                 <stroke android:width="1dp" android:color="@color/selected" />
+                 <corners android:topLeftRadius="2sp" android:bottomLeftRadius="2sp" />
+             </shape>
+         </inset>
+     </item>
+ </selector>

Billing/Billing.Android/Resources/drawable/segmented_control_last_background.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+     <item android:state_checked="true">
+         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+             <solid android:color="@color/selected" />
+             <stroke android:width="1dp" android:color="@color/selected" />
+             <corners android:topRightRadius="2sp" android:bottomRightRadius="2sp" />
+         </shape>
+     </item>
+     <item android:state_checked="false">
+         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+             <solid android:color="@color/normal" />
+             <stroke android:width="1dp" android:color="@color/selected" />
+             <corners android:topRightRadius="2sp" android:bottomRightRadius="2sp" />
+         </shape>
+     </item>
+ </selector>

Billing/Billing.Android/Resources/layout/RadioButton.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
+     android:button="@null"
+     android:gravity="center"
+     android:background="@drawable/segmented_control_background"
+     android:textColor="@color/segmented_control_text"
+     android:layout_width="0dp"
+     android:layout_height="wrap_content"
+     android:layout_weight="1"
+     android:paddingLeft="10dp"
+     android:paddingRight="10dp"
+     android:minHeight="30dp"
+     android:textSize="12sp" />

Billing/Billing.Android/Resources/layout/RadioGroup.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
+     android:layout_width="match_parent"
+     android:layout_height="match_parent"
+     android:orientation="horizontal"
+     android:id="@+id/SegControl" />

Billing/Billing.Android/Resources/values/colors.xml

@@ -3,5 +3,7 @@
 	<color name="colorPrimary">#183153</color>
 	<color name="colorPrimaryDark">#2B0B98</color>
 	<color name="colorAccent">#2B0B98</color>
+	<color name="normal">@android:color/transparent</color>
+	<color name="selected">#007AFF</color>
 	<color name="splash_background">?android:attr/colorBackground</color>
 </resources>