SimpleButton

Button with built-in progress state. Customization can be carried out for normal, disabled and pressed state.

iOS

Android

Android implementation has ripple effect when you press the button.

Inherits from AppCompatButton/UIButton

Customization fields

FontStyleItem FontStyle - responsible for font customization.

UIFont Font - is overridden native property, which is responsible for buttons title font.

Typeface Typeface - is overridden native property, which is responsible for buttons title font.

float LetterSpacing – is new property for IOS platform and overridden for Android platform. It is responsible for buttons title letter spacing.

float TextSize - is new property for IOS platform and overridden for Android platform. It is responsible for buttons title text size.

UIColor Color TextColor - responsible for buttons title text color in normal state.

UIColor Color DisabledTextColor - responsible for buttons title text color in disabled state.

UIColor Color BackgroundColor - is new property for Android platform and overridden property for IOS platform . It is responsible for buttons background color in normal state.

UIColor Color DisabledBackgroundColor - is new property for both platforms. It is responsible for buttons background color in disabled state.

UIColor Color PressedBackgroundColor - is new property for both platforms. It is responsible for buttons background color in pressed state. Android will add 0.5 alpha to selected ripple color and blend it with button's background color.

Color RippleColor - responsible for button's ripple color. Android will add 0.5 alpha to selected ripple color and blend it with button's background color.

ShadowConfig ShadowConfig - responsible for button's shadow configuration. For android, it changes only elevation and translationz property. iOS change shadow layer.

Methods

void StartProgressAnimation() - starts preloader animation

void StopProgressAnimation() - stops preloader animation

Notes

• Progress animation implemented with Lottie framework. It's not customizable, there is no possibility to change animation color or animation itself.

• Ripple color works only on Android.

• Android shadow config change only elevation property of the button. There is no possibility to set shadow offset or color.

Usage

Android

For Android platform, there are two ways to add SimpleButton to the layout: to the axml markup file or to the code behind.

Sample for creating SimpleButton in code behind for Android:

var simpleButton = new SimpleButton(Context);
simpleButton.Typeface =  Typeface.CreateFromAsset(Assets,"Fonts/Roboto.ttf");
simpleButton.BackgroundColor = Color.Orange;
simpleButton.DisabledBackgroundColor = Color.LightGray;
simpleButton.PressedBackgroundColor = Color.Blue;
simpleButton.TextColor = Color.Red;
simpleButton.RippleColor = Color.Gray;
simpleButton.Click+=async(s,e)=>
{
    simpleButton.StartProgressAnimation();
    awaitTask.Delay(5000);
    simpleButton.StopProgressAnimation();
};

Sample for creating SimpleButton in axml markup for Android:

<EOS.UI.Droid.Controls.SimpleButton
    android:id="@+id/simpleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Simple Button" />

Note: For customization Typeface you should add a file with a custom font to assets.

iOS

For iOS SimpleButton can be added from the .xib/storyboards files or from code behind.

Sample for creating SimpleButton in code behind for IOS:

var simpleButton = new SimpleButton();
simpleButton.BackgroundColor = UIColor.Orange;
simpleButton.DisabledBackgroundColor = UIColor.LightGray;
simpleButton.PressedBackgroundColor = UIColor.Blue;
simpleButton.TextColor = UIColor.Blue;
simpleButton.FontStyle = new FontStyleItem() {
    Color = ColorExtension.FromHex(MyFontColor),
    Font = UIFont.SystemFontOfSize(13f, UIFontWeight.Semibold),
    Size = 13f,
    LetterSpacing = -0.6f,
    LineHeight = 15f
}
simpleButton.ShadowConfig = new ShadowConfig(){
    Color = UIColor.Black.CGColor,
    Offset = new CGSize(0, 12),
    Blur = 5,
    Spread = 100
}