How to create Apple's design like toggle button in Windows & Android apps using Xamarin Forms?

Question

I want to create a toggle switch that should look like iOS's toggle switch in a mobile app which is targeting Android, iOS & Windows platforms using Xamarin Forms.

Though Xamarin.Forms is used to build native looking apps, we need to create a toggle switch which should look same on all three platforms.

We have tried to create a similar looking toggle switch using two buttons i.e. using one small round button above of one large button.

XAML:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <ContentView Grid.Row="0" Grid.Column="1" x:Name="ToggleThisButton">
    <Button  BorderWidth="0" BorderRadius="32" Button.BackgroundColor="Red" />
  </ContentView>

  <ContentView Grid.Row="0" Grid.Column="1" x:Name="BackgroundButton">
    <Button BorderWidth="0" BorderRadius="32" />
  </ContentView>

</Grid>

C# :

// Appearance using padding 
protected override void OnAppearing()
    {
        base.OnAppearing();

        if (Device.Idiom == TargetIdiom.Phone)
        {
            ToggleThisButton.Padding = new Thickness(50, 20, 100, 250);
            BackgroundButton.Padding = new Thickness(50, 20, 20, 250);
        }

        if (Device.Idiom == TargetIdiom.Tablet)
        {
           ToggleThisButton.Padding = new Thickness(50, 30, 270, 275);
           BackgroundButton.Padding = new Thickness(50, 30, 50, 275);
        }
    }

)

//Switch toggle animation using TranslateTo function:

if (Device.Idiom == TargetIdiom.Tablet)
{
 ToggleThisButton.TranslateTo(220, 0, 200, Easing.Linear);
}
if (Device.Idiom == TargetIdiom.Phone)
{
 ToggleThisButton.TranslateTo(50, 0, 200, Easing.Linear);
}

Problems: As we are using buttons to create toggle switch, we are getting unwanted behavior of button like mouse-hover color change, the button-press effect, on-click color change in Windows Tablet & Windows Phone.

So, how do I create an toggle switch that looks similar to iOS's toggle switch that works in Android,Windows & iOS app using Xamarin.

Sorry, cannot upload the screenshot/image.

moljac · Accepted Answer · 2016-11-02 09:08:27Z

2

You'll need to use CustomRenderer[s] for Android and any Windows flavour, but I would strongly recommend against this practice to make other platforms look like something else... I've seen projects descending into dead alley trying to do so. Those are different platforms and intent of Xamarin.Forms is not to make all platforms look alike.

But if you cannot talk to your management and/or designer here is the link that will help you start:

https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/

answered Nov 2, 2016 at 9:08

moljac

1,04010 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create Apple's design like toggle button in Windows & Android apps using Xamarin Forms?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related