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.

Tonl

android is open source. you can look at the code and see how they do it. – Wineglass

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! :)

Johnettajohnette

Thank you. How do I use it? Could you provide an example? – Tonl

Sorry, I am not able to get it. I am getting to many compile errors. For example, "error: Error parsing XML: unbound prefix" in the image_touch_slider.xml file – Tonl

@Tonl hmmm I thought it was pretty straight forward. You can just add an ImageView in layout, and you have to set your drawable in that code. Anyway, I edited again, please check. – Johnettajohnette

@NariKimShin any idea to show trail behind while sliding the ImageView ? – Baluchistan

Answer 2

If you have your own sliding layout then see this code, might be helpful for you.

public class UnlockBar extends RelativeLayout
{
    private OnUnlockListener listener = null;

    private TextView text_label = null;
    private ImageView img_thumb = null;

    private int thumbWidth = 0;
    boolean sliding = false;
    private int sliderPosition = 0;
    int initialSliderPosition = 0;
    float initialSlidingX = 0;

    public UnlockBar(Context context)
    {
        super(context);
        init(context, null);
    }

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

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

    public void setOnUnlockListener(OnUnlockListener listener)
    {
        this.listener = listener;
    }

    public void reset()
    {
        final RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) img_thumb.getLayoutParams();
        ValueAnimator animator = ValueAnimator.ofInt(params.leftMargin, 0);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator)
            {
                params.leftMargin = (Integer) valueAnimator.getAnimatedValue();
                img_thumb.requestLayout();
            }
        });
        animator.setDuration(300);
        animator.start();
        text_label.setAlpha(1f);
    }

    private void init(Context context, AttributeSet attrs)
    {       
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.unlock_main, this, true);

        // Retrieve layout elements
        text_label = (TextView) findViewById(R.id.text_label);
        img_thumb = (ImageView) findViewById(R.id.img_thumb);

        // Get padding
        thumbWidth = dpToPx(80); // 60dp + 2*10dp
    }

    @Override
    @SuppressLint("ClickableViewAccessibility")
    public boolean onTouchEvent(MotionEvent event)
    {
        super.onTouchEvent(event);

        if (event.getAction() == MotionEvent.ACTION_DOWN)
        {
            if (event.getX() > sliderPosition && event.getX() < (sliderPosition + thumbWidth))
            {
                sliding = true;
                initialSlidingX = event.getX();
                initialSliderPosition = sliderPosition;
            }
        }
        else if (event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_OUTSIDE)
        {
            if (sliderPosition >= (getMeasuredWidth() - thumbWidth))
            {
                if (listener != null) listener.onUnlock();
            }
            else
            {
                sliding = false;
                sliderPosition = 0;
                reset();
            }
        }
        else if (event.getAction() == MotionEvent.ACTION_MOVE && sliding)
        {
            sliderPosition = (int) (initialSliderPosition + (event.getX() - initialSlidingX));
            if (sliderPosition <= 0) sliderPosition = 0;

            if (sliderPosition >= (getMeasuredWidth() - thumbWidth))
            {
                sliderPosition = (int) (getMeasuredWidth()  - thumbWidth);
            }
            else
            {
                int max = (int) (getMeasuredWidth() - thumbWidth);
                int progress = (int) (sliderPosition * 100 / (max * 1.0f));
                text_label.setAlpha(1f - progress * 0.02f);
            }
            setMarginLeft(sliderPosition);
        }

        return true;
    }

    private void setMarginLeft(int margin)
    {
        if (img_thumb == null) return;
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) img_thumb.getLayoutParams();
        params.setMargins(margin, 0, 0, 0);
        img_thumb.setLayoutParams(params);
    }

    private int dpToPx(int dp)
    {
        float density = getResources().getDisplayMetrics().density;
        return Math.round((float)dp * density);
    }

    public static interface OnUnlockListener {
        void onUnlock();
    }
}

And just set the listener in main activity

UnlockBar unlock = (UnlockBar) findViewById(R.id.unlock);

        // Attach listener
        unlock.setOnUnlockListener(new OnUnlockListener() {
            @Override
            public void onUnlock()
            {
                Toast.makeText(TestActivity.this, "You've successfully unlocked it !", Toast.LENGTH_LONG).show();
            }
        });

And draw your own slide_image_layout.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="80dp"
    android:layout_width="match_parent"
    android:background="#000000"
    android:padding="10dp">

    <ImageView
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_alignParentLeft="true"
        android:src="@drawable/unlock_left"
        android:contentDescription="@string/unlock_locked" />

    <ImageView
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/unlock_right"
        android:contentDescription="@string/unlock_unlocked" />

    <TextView
        android:id="@+id/text_label"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="@string/unlock_instructions"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="italic" />

    <ImageView
        android:id="@+id/img_thumb"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:src="@drawable/unlock_thumb"
        android:contentDescription="@string/unlock_thumb" />

</RelativeLayout>

And in your main_layout.xml add this ..

<com.hamondigital.unlock.UnlockBar
        android:id="@+id/unlock"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

Glutathione

Thank you! its working fine in case of sliding from left to right. But I want to slide from right to left. Need help – Georg