How to make slide to unlock button in android

Question

Hi I want a button that should work as 'slide to unlock' button of IOS

in short I want a button that has no click effect but can slide left to right while drag and on drag completion it should considered click.

please suggest me any sample code if possible.

Thanks!

Solution 1

First of all I'd like to thank @matthias for his answer. I have used the following seek bar with some customization:

 <SeekBar
        android:id="@+id/myseek"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:max="100"
        android:progressDrawable="@android:color/transparent"
        android:thumb="@drawable/ic_launcher" />

and in java code

sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

            if (seekBar.getProgress() > 95) {

            } else {

                seekBar.setThumb(getResources().getDrawable(R.drawable.ic_launcher));
            }

        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {


        }

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress,
                boolean fromUser) {
            if(progress>95){
                seekBar.setThumb(getResources().getDrawable(R.drawable.load_img1));
            }

        }
    });

Solution 2

I started out with the example that Jignesh Ansodariya posted, but as Aerrow points out, the user can click anywhere on the SeekBar to unlock. That makes it quite unusable, since the point with having a slide button is that accidental clicks should be ignored. My solution was to create a subclass of SeekBar, like this:

public class SlideButton extends SeekBar {

    private Drawable thumb;
    private SlideButtonListener listener;

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

    @Override
    public void setThumb(Drawable thumb) {
        super.setThumb(thumb);
        this.thumb = thumb;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (thumb.getBounds().contains((int) event.getX(), (int) event.getY())) {
                super.onTouchEvent(event);
            } else
                return false;
        } else if (event.getAction() == MotionEvent.ACTION_UP) {
            if (getProgress() > 70)
                handleSlide();

            setProgress(0);
        } else
            super.onTouchEvent(event);

        return true;
    }

    private void handleSlide() {
        listener.handleSlide();
    }

    public void setSlideButtonListener(SlideButtonListener listener) {
        this.listener = listener;
    }   
}

public interface SlideButtonListener {
    public void handleSlide();
}

XML:

        <package.SlideButton
            android:id="@+id/unlockButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:max="100"
            android:progressDrawable="@android:color/transparent"
            android:thumb="@drawable/button_lock" >
        </package.SlideButton>

And finally the code inside my Activity:

    ((SlideButton) findViewById(R.id.unlockButton)).setSlideButtonListener(new SlideButtonListener() {  
        @Override
        public void handleSlide() {
            unlockScreen();
        }
    });

Solution 3

There are some good libraries to do the trick for you. If using a library to perform this is not an issue for you, then consider trying this one:

https://github.com/cortinico/slidetoact

Happy coding..!! :)

Solution 4

Android provides the Switch widget that is similar to slide to unlock. However, you will have to customize it a little, e.g. disable change on click.

Solution 5

You can use this library to quickly and easy customize your unlock.

https://github.com/cheekiat/SlideToUnlock

Use this code on xml

 <cheekiat.slideview.SlideView
        android:id="@+id/slide_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:slideBackground="@drawable/orangesquarebutton"
        app:slideSrc="@drawable/slide_image"
        app:slideText="Slide to unlock"
        app:slideTextColor="#ffffff"
        app:slideTextSize="10dp" />

Slide to unlock screenshort

View more solutions

Comments

[Nemanja Kovacevic]

Although the code need some tweaking (in my case at least) this is by far the easiest way to make a "slide to unlock" feat on android. Great job!

[Aerrow]

@Jignesh Ansodariya: Hi i used the same concept for screen unlock/lock but i can't disable the seekbar on tap

[VipiN Negi]

adding a custom rectangle button is creating a problem .. at start-point the left-half of rectangle button is out of view towards left and after dragging to end half right portion goes out of view towards right. Moreover, while dragging the seekbar round effect is visible.

[Pang]

Is the github link pointing to a project of yours? If so, please clearly mention your affiliation in the answer; otherwise, it could be considered spam. Please see this help center page for details. Thank you.

[Vince]

Good and clean answer. Note that Android Studio recommended me to rather extend androidx.appcompat.widget.AppCompatSeekBar which already has an accesible thumb drawable (no need to have an extra property) and that makes the SlideButton even cleaner.