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
2,167 total views, 4 views today
(Visited 1,283 times, 2 visits today)
