Button Pressed Background is Transparent Before Clicked

Question

I have implement Ripple Animation after the button is pressed. Everything works great except before I Click the Button is Transparent makes it impossible to be visible.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="3dp"/>
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

This is the Custom Button Class I have created.

public class MyButton extends Button {


        public MyButton(final Context context) {
            super(context);
            init();
        }

        public MyButton(final Context context, final AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        public MyButton(final Context context, final AttributeSet attrs,
                        final int defStyle) {
            super(context, attrs, defStyle);
            init();
        }

        private void init() {
            mPaint = new Paint();
            mPaint.setAlpha(100);
        }

        @Override
        public boolean onTouchEvent(@NonNull final MotionEvent event) {
            if (event.getActionMasked() == MotionEvent.ACTION_UP) {
                mDownX = event.getX();
                mDownY = event.getY();

                ObjectAnimator animator = ObjectAnimator.ofFloat(this, "radius", 0,
                        getWidth() * 3.0f);
                animator.setInterpolator(new AccelerateInterpolator());
                animator.setDuration(400);
                animator.start();
            }
            return super.onTouchEvent(event);
        }

        public void setRadius(final float radius) {
            mRadius = radius;
            if (mRadius > 0) {
                RadialGradient radialGradient = new RadialGradient(mDownX, mDownY,
                        mRadius * 3, Color.TRANSPARENT, getResources().getColor(R.color.colorPrimaryDark),
                        Shader.TileMode.MIRROR);
                mPaint.setShader(radialGradient);
            }
            invalidate();
        }

        private Path mPath = new Path();
        private Path mPath2 = new Path();

        @Override
        protected void onDraw(@NonNull final Canvas canvas) {
            super.onDraw(canvas);

            mPath2.reset();
            mPath2.addCircle(mDownX, mDownY, mRadius, Path.Direction.CW);

            canvas.clipPath(mPath2);

            mPath.reset();
            mPath.addCircle(mDownX, mDownY, mRadius / 3, Path.Direction.CW);

            canvas.clipPath(mPath, Region.Op.DIFFERENCE);

            canvas.drawCircle(mDownX, mDownY, mRadius, mPaint);
        }
    }

Here is where I have used the myButton class

 <io.wyntr.peepster.MyButton
            android:layout_width="325dp"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:textSize="20dp"
            android:textAllCaps="false"
            android:text="Continue"
            android:id="@+id/sendCodeButton"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:clickable="true"
            android:background="@drawable/ripple"
            android:textColor="@color/icons"
            android:layout_gravity="center_horizontal" />

Screenshots:

Before click try to keep something different background for button and on click add "@drawable/ripple" background programatically for the button. — Bhagwat K, May 09 '16 at 12:12
Do you intend for the button to have a specific color? Like a default color for buttons who are using the ripple.xml? — AL., May 09 '16 at 12:54
@McAwesomville I want to use to my specific defined color for the button — Savita, May 09 '16 at 13:08
I added my answer. I think you can take it from there. Cheers. :) — AL., May 09 '16 at 13:09

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Was waiting for you to respond to my comment, but gonna go on ahead and add my answer:

You can set the color of the button that will be using your ripple animation by adding the

<item android:drawable="@android:color/holo_blue_bright" />

Like so:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
    <item android:drawable="@android:color/holo_blue_bright" />
</ripple>

Tested this. And when used, the default color (unpressed) for the button turns to holo_blue_bright. Here's a post that I think is useful for you. :)

Hope this helps. Cheers. :)

score 0 · Answer 2 · answered May 09 '16 at 12:55

0

This line removes the border of your button so of course it will be invisible try changing it to something else

style="@style/Widget.AppCompat.Button.Borderless"

answered May 09 '16 at 12:55

2D3D

353
1
6
22

Button Pressed Background is Transparent Before Clicked

2 Answers2