Styling the calculator

Many attributes are provided to style the dialog's views, colors, dimensions and texts.

Changing an attribute

You can change attribute in your app's styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="calcDialogStyle">@style/CustomCalcDialogStyle</item>
</style>

<!-- Your calculator dialog theme -->
<style name="CustomCalcDialogStyle" parent="CalcDialogStyle">
    <!-- You can customize the dialog's style here -->
    <!-- This line changes the dialog's maximum height -->
    <item name="calcDialogMaxHeight">300dp</item>

    <!-- This line changes the operation buttons' style -->
    <item name="calcOperationBtnStyle">@style/CustomCalcOperationBtnStyle</item>
</style>

<style name="CustomCalcOperationBtnStyle" parent="CalcOperationBtnStyle">
    <!-- Don't forget to specify the parent! -->
    <item name="android:background">#000000</item>
    <item name="android:textColor">#ffffff</item>
</style>

Parent style name is always the same as the attribute name, but starts with a capital letter. It's important to specify the parent, because the parent style might define some attributes that you don't.

Available attributes

Dialog attributes

• calcDialogMaxWidth: Maximum width for the dialog. Default is 400dp
• calcDialogMaxHeight: Maximum height for the dialog. Default is 400dp
• calcHeaderHeight: Height of the header, which contains the display view. Default is 64dp.
• calcButtonTextClear: Text for the Clear dialog button
• calcButtonTextCancel: Text for the Cancel dialog button
• calcButtonTextOk: Text for the OK dialog button
• calcBackgroundColor: Background color of the dialog
• calcDialogSepColor: Color of the separator at the bottom of the dialog above dialog buttons.

Calculator attributes

• calcValueStyle: Style for the value display in the header.
• calcNumberBtnStyle: Style for the number buttons (0-9, decimal point and sign buttons).
• calcNumberBtnColor: Color for the number buttons.
• calcOperationBtnStyle: Style for the operation buttons (+, -, ×, ÷ and = buttons).
• calcOperationBtnColor: Color for the operation buttons.
• calcDialogButtonStyle: Style for the dialog buttons.
• calcButtonTexts: String array of captions for the calculator's buttons. Default values can be viewed here.
• calcErrors: String array of errors. Default values can be viewed here.

Erase button attributes

• calcEraseBtnStyle: Style for the erase button. EraseButton view class allows two other attributes:
  • calcEraseBtnHoldDelay: Time in milliseconds before quick erase mode begins.
  • calcEraseBtnHoldSpeed: Time between each erasure in quick erase mode.
  • calcEraseAllOnHold: If true, holding the erase button has the same effect as the dialog's Clear button.