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>

    <!-- These lines change the style of operation buttons -->
    <item name="calcOperationBtnStyle">@style/CustomCalcOperationBtnStyle</item>
    <item name="calcOperationBtnColor">#000000</item>
</style>

<style name="CustomCalcOperationBtnStyle" parent="CalcOperationBtnStyle">
    <!-- Don't forget to specify the parent! -->
    <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
• calcHeaderColor: Background color for the header.
• calcHeaderElevation: Elevation of the header. Default is 2dp.
• calcHeaderElevationColor: Used for API < 21 for the header elevation color.
• calcButtonTextClear: Text for the Clear dialog button.
• calcButtonTextCancel: Text for the Cancel dialog button.
• calcButtonTextOk: Text for the OK dialog button.
• calcDialogButtonStyle: Style for the dialog buttons.
• calcBackgroundColor: Background color of the dialog
• calcDividerColor: Color of the divider at the bottom of the dialog above dialog buttons.

Calculator attributes

• calcValueStyle: Style for the value display in the header.
• calcExpressionStyle: Style for the expression text view.
• calcExpressionScrollViewStyle: Style for the horizontal scroll view in which the expression view is.
• calcDigitBtnStyle: Style for the number buttons (0-9, decimal point and sign buttons).
• calcDigitBtnColor: Color for the number buttons.
• calcOperationBtnStyle: Style for the operation buttons (+, -, ×, ÷ and = buttons).
• calcOperationBtnColor: Color for the operation buttons.
• calcAnswerBtnStyle: Style for the answer button. Its color is the same as the operation buttons color.
• 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 has a few custom attributes:
  • calcEraseBtnHoldDelay: Time in milliseconds before quick erase mode begins.
  • calcEraseBtnHoldSpeed: Time between each erase event in quick erase mode.
  • calcEraseAllOnHold: If true, holding the erase button has the same effect as the dialog's Clear button. Default is false.