ScratchView

  • ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal. There are two types of ScratchView

ScratchRelativeLayoutView

  • A Child of RelativeLayout which conceals a relative layout. Scratching over the view will reveal the hidden RelativeLayout. Also the scratch-able view is a RelativeLayout.

ScratchImageView

  • A Child of ImageView which conceals the image. Scratching over the view will reveal the hidden image.

ScratchTextView

  • A Child of TextView which conceals the text. Scratching over the view will reveal the hidden text.

Demo Screen

ScratchImageView ScratchTextView ScratchRelativeLayoutView
scratch_image_view_demo scratch_text_view_demo scratch_relative_layout_image

Useful Methods

Both the views have following three methods which are useful to reveal or determine whether revealed and listener during revealing the hidden text/image.

  • isRevealed() - tells whether the text/image has been revealed.
  • reveal() - reveals the image/text if not revealed yet.
  • setRevealListener(IRevealListener) - a callback listener interface which gets called back when user reveals the text/image
    through onReveal() method.

Usage

ScratchRelativeLayoutView

XML
<com.goibibo.libs.views.ScratchRelativeLayoutView
        android:id="@+id/lytScratch"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@android:color/white">

        <include layout="@layout/lyt_hidden"/>

</com.goibibo.libs.views.ScratchRelativeLayoutView>
XML
JAVA
ScratchRelativeLayoutView scratchRelativeLayoutView = findViewById(R.id.lytScratch);
scratchRelativeLayoutView.setStrokeWidth(20);
scratchRelativeLayoutView.setScratchView(R.layout.lyt_scratch); // scratchable layout
scratchRelativeLayoutView.setRevealListener(new ScratchRelativeLayoutView.IRevealListener() {
   @Override
   public void onRevealed(ScratchRelativeLayoutView tv) {
     // on reveal
   }

   @Override
   public void onRevealPercentChangedListener(ScratchRelativeLayoutView siv, float percent) {
     // on percent change
   }
});
Java

ScratchImageView

XML
<com.goibibo.libs.views.ScratchImageView
  android:id="@+id/sample_image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@android:color/white"
  android:src="@drawable/img_sample2"
  />
XML
JAVA
ScratchImageView scratchImageView = new ScratchImageView(this);

scratchImageView.setRevealListener(new ScratchImageView.IRevealListener() {
    @Override
    public void onRevealed(ScratchImageView tv) {
        // on reveal
    }

    @Override
    public void onRevealPercentChangedListener(ScratchImageView siv, float percent) {
        // on image percent reveal
    }
});
Java

ScratchTextView

XML
<com.goibibo.libs.views.ScratchTextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:gravity="center|end"
  android:text="@string/flat_200"
  android:textSize="15sp"
  android:textStyle="bold" />
XML
JAVA
ScratchTextView scratchTextView = new ScratchTextView(this);

scratchTextView.setRevealListener(new ScratchTextView.IRevealListener() {
    @Override
    public void onRevealed(ScratchTextView tv) {
        //on reveal
    }


    @Override
    public void onRevealPercentChangedListener(ScratchTextView stv, float percent) {
        // on text percent reveal
    }
});
Java

Adding to your project

  • Add the following configuration in your build.gradle file.
repositories {
    jcenter()
}

dependencies {
    implementation 'com.goibibo.libs:scratchcardview:0.1.4'
}
Gradle

GitHub