Anko how to change button color?

Issue

I`m trying to change the color of a button inside a LinearLayout:

class MoodActivityUI : AnkoComponent<MoodActivity> {
override fun createView(ui: AnkoContext<MoodActivity>) = with(ui) {
    frameLayout {
        verticalLayout {

            linearLayout {
                button("3"){
                    setBackgroundColor(Color.parseColor("red"))
                }.lparams{
                    width = dip(53)
                    height = dip(53)
                    leftMargin=dip(6)
                }

                button("2"){
                }.lparams{
                    width = dip(53)
                    height = dip(53)}

                button("1"){
                }.lparams{
                    width = dip(53)
                    height = dip(53)}
                ...

It turns out to look like this:

Why its going outside of the boundaries of the button shape? How can I just change the button color?

Solution

you can use "themedButton" instead of "button" like this:

themedButton("3", theme = R.style.MyButtonStyle) {
    }.lparams {
        width = dip(53)
        height = dip(53)
        leftMargin = dip(6)
    }

and style in styles.xml

<style name="MyButtonStyle" parent="Widget.AppCompat.Button">
    <item name="android:colorButtonNormal">#f00</item>
</style>

Answered By - user10539074