A “Before And After” Image Comparison Slide Control in Android

Question

Is there a possibility to build a image comparison slide control in Android as one that exists in HTML 5?

http://thenewcode.com/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5

How can I achieve this thing?

Answer 1

I have created library for this functionality, may be someone who steel need this feature,it will be good for them.

compile 'com.github.developer--:beforeafterslider:1.0.4'

Answer 2

One way is using a seekbar and a framelayout that sits on top of the original Image. As you slide the seekbar the frames height adjusts which contains the 2nd image.

Code for top down reveal

    private SeekBar seekBar;

under protected void onCreate(Bundle savedInstanceState) {

add

seekBar = (SeekBar) findViewById(R.id.seekBar1);

        seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

            int progress = 0;

            @Override

            public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) {
                FrameLayout target = (FrameLayout) findViewById(R.id.target);

                progress = progresValue;

                ViewGroup.LayoutParams lp = target.getLayoutParams();
                lp.height = progress;
                target.setLayoutParams(lp);

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

the layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="600dp"
        android:layout_height="300dp"
        android:src="@drawable/pug_color"/>
    <FrameLayout
        android:id="@+id/target"
        android:layout_width="600dp"
        android:layout_height="150dp">
        <ImageView
            android:id="@+id/imageb"
            android:layout_width="600dp"
            android:layout_height="300dp"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/pug_bw"/>
    </FrameLayout>

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_below="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:progress="300"
        android:max="600" />
</RelativeLayout>