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 ??

Aboutship

Please leave a comment. why is it downvoted.. as I understand it is a valid programming Question – Aboutship

Hey man, i m looking for exactly like this same to same. can you help me? are you got your solution for this? I m wandering for this from last 3 days by diff diff ways but am not getting a right way or solution. how you do this can you help me? – Edgerton

@Yog Guru I am also still looking for a solution for this.. Please answer int this thread if you find one Thanks – Aboutship

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;
}   }

Edgerton

@contactmeandroid have you tried this? is it be useful to you? – Edgerton

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.

Handclasp

if the user clicks on the progressDrawable the thumb moves. how to restrict it. I want the seekbar to be moved only using thumb – Aboutship

try putting a condition in onprogresschange and onstarttracking, to set the progress to zero unless the inital progress is less than say 10. – Handclasp