Adding Button Control to View
Similar to the native approach, you can define RoundedButton easily through the layout resource file.
Alternatively, if you prefer to add the button control at runtime, you can instantiate RoundedButton programmatically then add it to the view's hierarchy. Here's the code example.
Customizing Button Appearance
You can easily customize every aspect of RoundedButton control's appearance to your liking through the provided properties or methods. In general, the button control supports 3 built-in content styles:
To understand how it affects the layout and rendering of the control, please refer to the following figures.
As seen in the above figures, most of the button's behaviour and appearance are customizable. You can easily customize it via layout resource or programmatically at runtime. The following table lists the supported XML attributes.
|crosslight:isToggle||boolean||Indicates whether button is in toggle mode.|
|crosslight:imageSrc||reference | color||Sets a drawable as the content of the image.|
|crosslight:imageBackground||reference | color||Sets a drawable as the background of the image.|
|crosslight:title||string||Sets the title text.|
|crosslight:subtitle||string||Sets the subtitle text.|
|crosslight:contentStyle||enum||Sets the content style (title, subtitle, or image)|
|crosslight:titleColor||reference | color||Sets the title color.|
|crosslight:titleTextSize||dimension||Sets the title text size.|
|crosslight:subtitleColor||reference | color||Sets the subtitle color.|
|crosslight:subtitleTextSize||dimension||Sets the subtitle text size.|
To find out the complete properties and methods of the control, see RoundedButton class.
Handling Button Command
Built with MVVM architectural pattern in mind, RoundedButton supports binding to the Command property, enabling you to handle the button's action in the ViewModel.
Enabling Toggle Mode
is not only packed with beautiful design, it is also capable of covering numerous command scenarios. It includes support for toggle button mode, in which the selected state will remain active when tapped. You can easily enable toggle mode by simply setting the IsToggle property to true.
In the toggle mode, you can also set the initial state of the selection through the IsSelected binding. The following code example shows how to set the selected state of the speaker button in ViewModel.
Note that the code above presumes you have set the IsSelected binding between the SpeakerButton and the SpeakerActive property in the binding provider. The binding definition should be a two-way binding mode, allowing you to set the active state from the code, while also allow the control to set the value back when user tapped on the button. For more information about data binding in Crosslight, see Understanding Binding Providers.
Also note that you can capture the selected state in the command parameter of the delegate method, see the code example below.
Check out the comprehensive control samples here: Dialog Presenter Samples. Pay attention to the Call menu in the sample. Prior to running the samples, make sure to set the Android project as the startup project.