Monthly Archives: March 2016

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