Android Scratch Card View
Contents
Intro
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 |
|---|---|---|
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
1 2 3 4 5 6 7 8 9 10 | <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> |
JAVA
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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 } }); |
ScratchImageView
XML
1 2 3 4 5 6 7 | <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" /> |
JAVA
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 } }); |
ScratchTextView
XML
1 2 3 4 5 6 7 | <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" /> |
JAVA
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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
- Add the following configuration in your build.gradle file.
1 2 3 4 5 6 7 | repositories { jcenter() } dependencies { implementation 'com.goibibo.libs:scratchcardview:0.1.4' } |
Contributors
- Mohit Gupt – mohit.gupt@go-mmt.com
- Akash Agrawal – akash.agrawal@go-mmt.com
Special Thanks
- Harish Sridharan – harish.sridhar@gmail.com
4,627 total views, 1 views today
(Visited 2,084 times, 1 visits today)
