Agfdhyk

So I've implemented a custom button for our app, the implementation works perfect on Android 6 and up but I run into an issue on Android 5, where the background color doesn't get applied until I press the button once. Then it looks as it should.

• Buttons not correct


• Buttons correct

The implementation looks like this:

class MpButton @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.style.ButtonStyle) : AppCompatButton(context, attrs, defStyleAttr) {



private val toScale = 0.9f

private val fromScale = 1f



init {

    var style = 0

    var allCaps = false



    attrs?.let {

        val a = context.obtainStyledAttributes(it, R.styleable.MpButton)

        style = a.getInt(R.styleable.MpButton_MpButtonColor, 0)

        allCaps = a.getBoolean(R.styleable.MpButton_MpButtonAllcaps, false)

        a.recycle()

    }



    when (style) {

        WHITE -> {

            this.setBackgroundResource(R.drawable.mp_button_white)

            this.setTextColor(ContextCompat.getColor(context, R.color.white))

        }

        RED -> {

            this.setBackgroundResource(R.drawable.mp_button_red)

            this.setTextColor(ContextCompat.getColor(context, R.color.white))

        }

        BLACK -> {

            this.setBackgroundResource(R.drawable.mp_button_black)

            this.setTextColor(ContextCompat.getColor(context, R.color.mp_black))

        }

        BLUE -> {

            this.setBackgroundResource(R.drawable.mp_button_blue)

            this.setTextColor(ContextCompat.getColor(context, R.color.white))

        }

        YELLOW -> {

            this.setBackgroundResource(R.drawable.mp_button_yellow)

            this.setTextColor(ContextCompat.getColor(context, R.color.white))

        }

        else -> {

            this.setBackgroundResource(R.drawable.mp_button_green)

            this.setTextColor(ContextCompat.getColor(context, R.color.white))

        }

    }



    this.gravity = Gravity.CENTER

    val padding = Utils.convertDpToPixel(context, 5)

    this.setPadding(padding, padding, padding, padding)

    this.isAllCaps = allCaps

}



override fun dispatchTouchEvent(event: MotionEvent): Boolean {

    when(event.action) {

        MotionEvent.ACTION_DOWN -> {

            this.animate().scaleX(toScale).scaleY(toScale).setDuration(100).start()

        }

        MotionEvent.ACTION_UP -> {

            this.animate().scaleX(fromScale).scaleY(fromScale).setDuration(100).start()

        }

    }

    return super.dispatchTouchEvent(event)

}



companion object {

    const val WHITE = 1

    const val RED = 2

    const val BLACK = 3

    const val BLUE = 4

    const val YELLOW = 5

}

}

For info Ill also add the XML for one of the colors:

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android="http://schemas.android.com/apk/res/android"

android:color="@color/mp_black">

<item>

    <selector

        android:exitFadeDuration="@android:integer/config_mediumAnimTime"

        android:enterFadeDuration="@android:integer/config_shortAnimTime">

        <item android:state_enabled="true" android:state_pressed="false">

            <shape android:shape="rectangle">

                <corners android:radius="30dp"/>

                <solid android:color="@color/jungle_green" />

            </shape>

        </item>

        <item android:state_enabled="true" android:state_pressed="true">

            <shape android:shape="rectangle">

                <corners android:radius="30dp"/>

                <solid android:color="@color/forest" />

            </shape>

        </item>

        <item android:state_enabled="false">

            <shape android:shape="rectangle">

                <corners android:radius="30dp"/>

                <solid android:color="@color/mp_gray_5" />

            </shape>

        </item>

    </selector>

</item>

</ripple>

As a last ill copy the part of the XML of the view aswell to give as much info as possible:

<se.motesplatsen.app.ui.controls.MpButton

    android:id="@+id/btnStartLogin"

    android:layout_width="220dp"

    android:layout_height="44dp"

    android:text="@string/DEFAULT_LOGIN"

    android:layout_marginBottom="10dp"

    android:layout_marginTop="20dp"

    app:MpButtonAllcaps="true"

    app:layout_constraintVertical_chainStyle="packed"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toRightOf="parent"

    app:layout_constraintTop_toBottomOf="@id/btnStartBecomeMember"/>



<se.motesplatsen.app.ui.controls.MpButton

    android:id="@+id/btnStartBecomeMember"

    android:layout_width="220dp"

    android:layout_height="44dp"

    android:layout_marginTop="25dp"

    android:text="@string/BECOME_MEMBER_BUTTON"

    app:MpButtonColor="1"

    app:MpButtonAllcaps="true"

    app:layout_constraintVertical_chainStyle="packed"

    app:layout_constraintTop_toBottomOf="@id/tvStartDesc"

    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toRightOf="parent"

    app:layout_constraintBottom_toTopOf="@id/btnStartLogin"/>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

<corners

    android:radius="5dp"

    />

<solid

    android:color="@color/Transparent"

    />

just use this as background you are using on pressed state in your file

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>

    <shape >

        <solid android:color="@android:color/white"/>

        <size android:height="1dp"/>

    </shape>

</item>

<item  android:bottom="2dip" android:top="2dip" android:left="2dip" android:right="2dip">

    <shape>

        <solid android:color="@android:color/Transparent"/>

    </shape>

</item>

this is exactly look like your correct button