Custom Slide to unlock

Question

Hi I am trying to develop a custom lock screen in which I want to replace the slide to unlock with a ImageView as shown in the image.

This what I have tried so far.

I have placed an Image in the left corner of the screen and used onTouchListner to drag the Image horizontally Code below.

left_Locker.setOnTouchListener(new OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {
                int eid = event.getAction();
                switch (eid) {
                case MotionEvent.ACTION_DOWN:
                    toastText.setVisibility(View.VISIBLE);
                    toastText.setTextColor(Color.BLACK);
                    toastText.setText("Slide to Unlock");
                    break;
                case MotionEvent.ACTION_MOVE:
                    RelativeLayout.LayoutParams mParams = (RelativeLayout.LayoutParams) left_Locker.getLayoutParams();
                    int x = (int) event.getRawX();
                    mParams.leftMargin = x - 50;
                    left_Locker.setLayoutParams(mParams);
                    break;
                case MotionEvent.ACTION_UP:
                        toastText.setVisibility(View.GONE);
                        break;
                default:
                    break;
                }
                return true;
            }
        });

The Image does move horizontally but What I am looking is to get the Image background also to drag as shown in the picture above. Am I on the right track by using a ImageView ??

Below is the Image what I have tried.

I can move the Image horizontally but how to get the background as I scroll ??

Answer 1

I do some modification in your code and I achieved.

Below is the code to slide image at the end of the screen to both side (Left & Right).

For this you have to use 9patch image for both side which you want to slide.

public class MainActivity extends Activity implements OnTouchListener {

ImageView left,right;
int leftPosition,rightPosition;
boolean getSize = false;
int width;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    left = (ImageView)findViewById(R.id.left);
    right = (ImageView)findViewById(R.id.right);

    leftPosition = left.getRight();
    rightPosition = right.getLeft();

    width = getWindowManager().getDefaultDisplay().getWidth();

    left.setOnTouchListener(new OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {
            int eid = event.getAction();
            switch (eid) {
            case MotionEvent.ACTION_DOWN:
               /* toastText.setVisibility(View.VISIBLE);
                toastText.setTextColor(Color.BLACK);
                toastText.setText("Slide to Unlock");*/

                if(!getSize)
                {
                    leftPosition = left.getRight();
                    rightPosition = right.getLeft();
                    getSize =true;
                }
                break;

            case MotionEvent.ACTION_MOVE:

                RelativeLayout.LayoutParams mParams = (RelativeLayout.LayoutParams) left.getLayoutParams();
                int x = (int) event.getRawX();

                if (x>leftPosition) 
                    mParams.width = x;
                left.setLayoutParams(mParams);
                break;

            case MotionEvent.ACTION_UP:

                RelativeLayout.LayoutParams mParam = (RelativeLayout.LayoutParams) left.getLayoutParams();
                mParam.width = leftPosition;
                left.setLayoutParams(mParam);
                break;

            default:
                break;
            }
            return true;
        }
    });


    right.setOnTouchListener(new OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {
            int eid = event.getAction();
            switch (eid) {
            case MotionEvent.ACTION_DOWN:
               /* toastText.setVisibility(View.VISIBLE);
                toastText.setTextColor(Color.BLACK);
                toastText.setText("Slide to Unlock");*/
                break;

            case MotionEvent.ACTION_MOVE:

                RelativeLayout.LayoutParams mParams = (RelativeLayout.LayoutParams) right.getLayoutParams();
                int x = (int) event.getRawX();

                if (x<rightPosition) 
                    mParams.width = width-x;
                right.setLayoutParams(mParams);
                break;

            case MotionEvent.ACTION_UP:
                    //toastText.setVisibility(View.GONE);
                RelativeLayout.LayoutParams mParam = (RelativeLayout.LayoutParams) right.getLayoutParams();
                mParam.width = width - rightPosition;
                right.setLayoutParams(mParam);
                break;
            default:
                break;
            }
            return true;
        }
    });
}
@Override
public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub
    return false;
}   }

Answer 2

i think you should try something like this.

OR

there is another way around it. use relative layout to set the background image below the seekbar and make its progressbar transparent and image as the thumb.

next set the image width in proportion to the seekbar progress

OR there might be another solution, you can use an ontouchlistener on your imageview and change only x and leave the y same everytime and change the background like the method above.