(Android-only) .NET MAUI ToggleButton Ripple Effect

Apply a ripple effect to the ToggleButton, by using the following attached properties of the RadEffects class:

• RippleColor (Color)—Specifies the color of the ripple effect.
• RippleMode (enum of type Telerik.Maui.Theming.RippleMode)—Specifies the mode in which the ripple effect can be visualized. The options are:
  • (Default)Pulse—The element produces a ripple effect when pressed. The ripple fades away even when held.
  • Hold—The element produces a ripple effect when pressed and floods the element while held.
  • None—The element does not render ripple effects.

The ripple effect is available on Android.

Customizing the Ripple Effect

The following example demonstrates how to customize the ripple effect of the ToggleButton by changing the RippleMode and RippleColor.

1. Define the buttons in XAML:

<VerticalStackLayout Spacing="20">
    <telerik:RadToggleButton Content="Ripple Pulse"
                             telerik:RadEffects.RippleMode="Pulse"
                             telerik:RadEffects.RippleColor="#80CBC4" />
    <telerik:RadToggleButton Content="Ripple Hold"
                             telerik:RadEffects.RippleMode="Hold"
                             telerik:RadEffects.RippleColor="#80CBC4" />
    <telerik:RadToggleButton Content="Ripple None"
                             telerik:RadEffects.RippleMode="None" />
</VerticalStackLayout>

2. To customize the RippleColor when the ToggleButton is toggled and pressed, add the following code to the page's resources.

<Style TargetType="telerik:RadToggleButton">
    <Setter Property="Background" Value="#EAEAEA" />
    <Setter Property="TextColor" Value="#000000" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="CornerRadius" Value="0" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#99000000" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled" />
                <VisualState Name="Toggled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#FFFFFF" />
                        <Setter Property="Background" Value="#00897B" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="ToggledPressed">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#99FFFFFF" />
                        <Setter Property="telerik:RadEffects.RippleColor" Value="#B2DFDB" />
                        <Setter Property="Background" Value="#4CACA2" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="ToggledDisabled" />
                <VisualState Name="Indeterminate" />
                <VisualState Name="IndeterminatePressed" />
                <VisualState Name="IndeterminateDisabled" />
            </VisualStateGroup>
            <VisualStateGroup Name="FocusStates">
                <VisualState Name="Unfocused" />
                <VisualState Name="Focused" />
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

3. Add the telerik namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

This is the result on Android:

For a runnable example demonstrating the customization of the ToggleButton ripple effect, see the SDKBrowser Demo Application and go to ToggleButton > Features category.

See Also

• Configure the ToggleButton
• Toggle State
• Set Visual States
• Events
• Execute Command
• Style the ToggleButton