CODEWITHSUNDEEP
xamarinxamarin.forms
jaczjill
jaczjill

Reputation: 334

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

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.

Upvotes: 0

Views: 969

Answers (1)

moljac
moljac

Reputation: 1010

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/

Upvotes: 2

Related Questions