Simulate Slide to Unlock in application

Here I will showcase on how to create a slide to unlock similar to old Android lockscreen. I will customize the seekbar to transparent and replace the generic circle with custom icons. We will need 2 different icons to reflect locked and unlocked state.

First, we need to define the seekbar element in our layout file

<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="0"
android:progressDrawable="@android:color/transparent"
android:thumb="@drawable/ic_lock"/>;

Second, we need to hook up the seekbar that we specified in the layout file in our class

// Hooking up seekbar
SeekBar mSeekbar = (SeekBar) view.findViewById(R.id.seekbar);
// Set listener to our newly created seekbar
mSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

        // Perform your animation of the thumb icon if any, here I will progressively make the thumb icon transparent
        int alpha = (int)(progress * (255/100));
        seekBar.getThumb().setAlpha(255 - alpha);
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // This will be called when user starts to touch the icon
    }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
               
                // When user lift up the touch, we will check if it is at the end of the bar. If it is not the end, then we will set the progress status to 0 so it jumps back to the origin point
                if (seekBar.getProgress() &lt; 85){
                    seekBar.setThumb(getActivity().getResources().getDrawable(R.drawable.ic_lock));
                    seekBar.setProgress(0);
                } else {
                    // Put all the logic we want to proceed after unlock here
        }
    }
});
Advertisements

Posted on March 3, 2016, in Education and tagged . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: