Slider button to accept call in Android

Question

I want to develop my own Accept and Decline buttons for an incoming call. To prevent the call to be accidentally answered or rejected when taking the phone out of the pocket I would like to make a slider style button or something similar. I am, to accept the call is not just to tap on the Accept button. It would be more like sliding the finger from left to right (or opposite) and let the button get wider with the moment. Just like Android does.

Is there any way to make this? Any hint?

I hope to be clear.

Answer 1

How about create an image and slide it to the right (or left) and then send the event to an Activity or any view that you wanna handle the result?

For this, you can created a custom view which implements OnTouchListener :

public class ImageTouchSlider extends RelativeLayout implements View.OnTouchListener {

private Context mContext;

private ImageView mImage;   
private int mScreenWidthInPixel;
private int mScreenWidthInDp;
private float mDensity;

private int mPaddingInDp = 15;
private int mPaddingInPixel;

private int mLengthOfSlider;

public interface OnImageSliderChangedListener{
    void onChanged();
}

private OnImageSliderChangedListener mOnImageSliderChangedListener;

public ImageTouchSlider(Context context) {
    super(context);
    mContext = context;
    createView();
}

public ImageTouchSlider(Context context, AttributeSet attrs) {
    super(context, attrs);
    mContext = context;
    createView();
}

public ImageTouchSlider(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mContext = context;
    createView();
}

public void createView() {
    LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.image_touch_slider, this, true);

    mImage = (ImageView) findViewById(R.id.slider_image);
    mImage.setOnTouchListener(this);

    WindowManager manager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
    Display display = manager.getDefaultDisplay();
    DisplayMetrics outMetrics = new DisplayMetrics ();
    display.getMetrics(outMetrics);

    mDensity  = getResources().getDisplayMetrics().density;
    float dpWidth  = outMetrics.widthPixels / mDensity;
    mScreenWidthInPixel = outMetrics.widthPixels;
    mScreenWidthInDp = (int) (mScreenWidthInPixel / mDensity);

    mLengthOfSlider = (int) (mScreenWidthInDp - mPaddingInDp*2);
}

@Override
public boolean onTouch(View v, MotionEvent event) {
    LayoutParams layoutParams = (LayoutParams) v.getLayoutParams();
    int width = v.getWidth();
    float xPos = event.getRawX();

    switch(event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        // You can add some clicked reaction here.
        break;
    case MotionEvent.ACTION_MOVE:
        if(xPos < (mScreenWidthInPixel - width - mPaddingInDp*mDensity) && xPos > mPaddingInDp*mDensity) {
            mOnImageSliderChangedListener.onChanged();
            layoutParams.leftMargin = (int) xPos - width / 2;
            mImage.setLayoutParams(layoutParams);
        }
        break;
    case MotionEvent.ACTION_UP:
        break;
    default:
        break;
    }

    return true;
}

public void setOnImageSliderChangedListener(OnImageSliderChangedListener listener) {
    mOnImageSliderChangedListener = listener;
}

} //end of class

image_touch_slider.xml layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ImageView
    android:id="@+id/slider"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_centerVertical="true"
    android:src="@drawable/your_drawable" />
</RelativeLayout>

You can modify screen width calculation part (my current code is not so clean), and add this view in .xml like this :

<com.your.package.path.ImageTouchSlider
      android:id="@+id/slider"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

In your class, you can find this view :

ImageTouchSlider slider = (ImageTouchSlider) findViewById(R.id.slider);
slider.setOnImageSliderChangedListener(new ImageTouchSlider.OnImageSliderChangedListener() {

        @Override
        public void onChanged() {
            // do something what you want here.
        }

    });

Hope this can help! :)