Loading...

ScratchView : UX Design Involving Scratch Cards

Scratching out something inside from coupons, the lottery, and many more have always attracted a lot of people. So, why not apply a similar context in the applications. The scratching experience for some reason satisfies people, which might be due to all those rewards. So, this library allows android applications to have a similar feeling to a coupon or lottery ticket. We present to you an interactive scratch view project.

Although, having new creative ideas are always good. However, when it comes to implementing it on code it is a pain. So, you can try out these libraries to make your life much easier. The scratch view is responsive and interactive, and also keeps the user engaged in different things. Also, it is flexible to be used in various aspects of your application.

Moving onto the library, this offers an amazing design to hide your text or images in the project. Then, allows the user to easily scratch and find out the hidden text or image content. This concept can be applied to various different aspects of your android application. Some of the cool ideas and preview for the project is provided below:

Introduction

This is a UI design to have some image or text content hidden, which gets revealed after getting scratched. As mentioned, two kinds of objects can be hidden inside the scratch layer as follows:

  • ScratchImageView

    • A Child of ImageView 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


This demo will provide you with a great idea of how it works. 


ScratchImageView

ScratchTextView

ScratchImageView

ScratchTextView

Useful Methods

Both views have the 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 that gets called back when the user reveals the text/image through onReveal() method.


Usage

This section will guide you on the usage of the scratch view. The process is a bit long but worth it in the end. You can also move down to the additional section to first add the library to your projects.

ScratchImageView

XML

<com.cooltechworks.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" />
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
    }
});

Adding to your project

Moving on to the implementation of scratch view on your android projects.


  • Add the following configuration to your build.gradle file.

repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

dependencies {
    compile 'com.github.cooltechworks:ScratchView:v1.1'
}

Developed By

  • Harish Sridharan 
  • Download the complete project source code from GitHub
CardView 3549723623403717434
Home item