Skip to end of metadata
Go to start of metadata

Android Rounded Button is a custom-made button control designed to simulate a modern button interfaces with rounded-corner. Crafted with pixel-perfect rendering, the gorgeous button control provides various predefined content styles that suit your design preferences. More importantly, the button control is engineered with ability to track touch down inside or out, as well as touch up inside or out.

The button control also includes several convenient features not available in standard Android button such as text-image content, toggle mode, and etc. In addition, every appearance aspect can be easily customizable – all with just simple property set or using resource file.

 

On this page:

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:

  • Title
  • Subtitle
  • Image

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.

Attribute NameFormatDescription
crosslight:isTogglebooleanIndicates whether button is in toggle mode.
crosslight:imageSrcreference | colorSets a drawable as the content of the image.
crosslight:imageBackgroundreference | colorSets a drawable as the background of the image.
crosslight:titlestringSets the title text.
crosslight:subtitlestringSets the subtitle text.
crosslight:contentStyleenumSets the content style (title, subtitle, or image)
crosslight:titleColorreference | colorSets the title color.
crosslight:titleTextSizedimensionSets the title text size.
crosslight:subtitleColorreference | colorSets the subtitle color.
crosslight:subtitleTextSizedimensionSets 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.

For more information about data binding in Crosslight, see Understanding Binding Providers.
Once the binding definition is configured, you can create the DelegateCommand and define the execution method such as shown in the example code below.

Enabling Toggle Mode

RoundedButton 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.

Samples

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.