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

Related tags

UI/UX ScratchView
Overview

ScratchView

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

  • 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
ScratchImageView ScratchTextView

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

ScratchImageView

XML
">
<com.cooltechworks.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
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
">
<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

  • Add the following configuration in your build.gradle file.
repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

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

Developed By

License

Copyright 2016 Harish Sridharan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Get percentage of the whole scratch area

    Get percentage of the whole scratch area

    Hi and thank you for this library, it's very helpful! But I have a question, can we get the percentage or check if the whole scratch area is revealed? as for now, we only can detect the percentage of the text/image area inside the scratch view. Any help would be appreciated! Thank you very much

    opened by liauli 4
  • Need to tap the image to reveal instead of scratching the surface.

    Need to tap the image to reveal instead of scratching the surface.

    I created a ScratchImageView and a ScratchTextView. In order to reveal the content, I had to tap over the image and this is not equivalent to shown behaviour of scratching the image as shown on DemoScreen.

    Am I missing on something or this is the actual behaviour?

    opened by atulac 1
  • can not set imageresource

    can not set imageresource

    can not set image resource programetically, if remove src from xml file and try to set src programetically using "scratchimageview.setimageresource" it displays nothing

    opened by 123pavan123 1
  • Multiple quality improvements - squid:S1213, squid:SwitchLastCaseIsDe…

    Multiple quality improvements - squid:S1213, squid:SwitchLastCaseIsDe…

    This pull request is focused on resolving occurrences of Sonar rules squid:S1213 - The members of an interface declaration or class should appear in a pre-defined order squid:SwitchLastCaseIsDefaultCheck - "switch" statements should end with a "default" clause squid:S1197 - Array designators "[]" should be on the type, not the variable pmd:ImmutableField - Immutable Field

    You can find more information about the issues here: https://dev.eclipse.org/sonar/coding_rules#q=squid:S1213 https://dev.eclipse.org/sonar/coding_rules#q=squid:SwitchLastCaseIsDefaultCheck https://dev.eclipse.org/sonar/coding_rules#q=squid:S1197 https://dev.eclipse.org/sonar/coding_rules#q=pmd:ImmutableField

    Please let me know if you have any questions.

    M-Ezzat

    opened by m-ezzat 0
  • AsyncTask Deprecation

    AsyncTask Deprecation

    Hello, in ScratchTextView.java, AsyncTask is Deprecated so what can we do about that, i have used Executors many times but here we need params from doInBackground which we can't get from Executors..

    opened by VivekThummar 0
  • set multiple random background image from drawable -> Exception

    set multiple random background image from drawable -> Exception

    images randoms:ArrayListOf = [R.drawable.a,R.drawable.b,etc..] R = random.nextInt(2)

    Hey, trying to scratch.setBackroundResource(imageRandom[R] but I got a crash ... why?

    opened by ghost 1
  • Reveal() function doesn't work

    Reveal() function doesn't work

    When wanna to reveal the component before displaying, we try to call the Reveal function in body of OnCreate() Activity, the app will crash by dint of many exceptions

    opened by Slimani-Ibrahim 1
  • How to stop scratching when the percent is higher than a certain value

    How to stop scratching when the percent is higher than a certain value

    Could you please tell me how stop the scratching when the percent value is higher than 50% for example. I've tried several methods but none of them work.

    opened by saiyenman 0
  • width and height must be > 0

    width and height must be > 0

    java.lang.IllegalArgumentException: width and height must be > 0 at android.graphics.Bitmap.createBitmap(Bitmap.java:1074) at android.graphics.Bitmap.createBitmap(Bitmap.java:1041) at android.graphics.Bitmap.createBitmap(Bitmap.java:991) at android.graphics.Bitmap.createBitmap(Bitmap.java:952) at com.cooltechworks.views.ScratchTextView.onSizeChanged(ScratchTextView.java:175) at android.view.View.sizeChange(View.java:22602) at android.view.View.setFrame(View.java:22544) at android.widget.TextView.setFrame(TextView.java:7137) at android.view.View.layout(View.java:22404) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1812) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1656) at android.widget.LinearLayout.onLayout(LinearLayout.java:1565) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at androidx.viewpager.widget.ViewPager.onLayout(ViewPager.java:1775) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1812) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1656) at android.widget.LinearLayout.onLayout(LinearLayout.java:1565) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at androidx.constraintlayout.widget.ConstraintLayout.onLayout(ConstraintLayout.java:1915) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at androidx.coordinatorlayout.widget.CoordinatorLayout.layoutChild(CoordinatorLayout.java:1193) at androidx.coordinatorlayout.widget.CoordinatorLayout.onLayoutChild(CoordinatorLayout.java:880) at androidx.coordinatorlayout.widget.CoordinatorLayout.onLayout(CoordinatorLayout.java:899) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323) at android.widget.FrameLayout.onLayout(FrameLayout.java:261) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1812) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1656) at android.widget.LinearLayout.onLayout(LinearLayout.java:1565) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323) at android.widget.FrameLayout.onLayout(FrameLayout.java:261) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1812) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1656) at android.widget.LinearLayout.onLayout(LinearLayout.java:1565) at android.view.View.layout(View.java:22407) at android.view.ViewGroup.layout(ViewGroup.java:6589) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323) at android.widget.FrameLayout.onLayout(FrameLayout.java:261) at com.android.internal.policy.DecorView.onLayout(DecorView.java:1075) at android.view.View.layout(View.java:22407)

    opened by abadoliverco 0
Releases(v1.1)
Owner
Harish Sridharan
Harish Sridharan
💳 A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.

The article on how this library was created is now published. You can read it on this link here. →. ?? EasyFlipView Built with ❤︎ by Wajahat Karim and

Wajahat Karim 1.3k Dec 14, 2022
Rn-scratch-card - React Native Scratch Card which temporarily hides content from user

rn-scratch-card React Native Scratch Card which temporarily hides content from a

Sweatcoin 54 Jan 4, 2023
A Tinder-like Android library to create the swipe cards effect. You can swipe left or right to like or dislike the content.

Swipecards Travis master: A Tinder-like cards effect as of August 2014. You can swipe left or right to like or dislike the content. The library create

Dionysis Lorentzos 2.3k Dec 9, 2022
This is a android custom view , like a scratch card effect!

ScratchView This is a android custom view , like a scratch card effect! Last Update 采纳DearZack童鞋的优化思路,把计算擦除面积比例的操作放在手指离开屏幕时,以降低对CPU的占用。 Articles Scrat

D_clock爱吃葱花 316 Nov 29, 2022
Janishar Ali 2.1k Jan 1, 2023
Inspired by Heinrich Reimer Material Intro and developed with love from scratch

Android Material Intro Screen Material intro screen is inspired by Material Intro and developed with love from scratch. I decided to rewrite completel

Tango Agency 2.7k Dec 19, 2022
Sliding cards with pretty gallery effects.

SlidingCard Sliding cards with pretty gallery effects. Download Include the following dependency in your build.gradle file. Gradle: repositories {

mxn 681 Sep 7, 2022
This project created just for help developer who want to and ability of read VISA, UNION PAY, HUMO, ATTO and some other cards data read.

If you enjoy my content, please consider supporting what I do. Thank you. By me a Coffee To get a Git project into your build: Step 1. Add the JitPack

Fozilbek Imomov 1 Oct 15, 2022
Created a Tinder like Card Deck & Captain Train like Toolbar

TinderView Created A Simple and Beautiful Tinder like card deck & Captain Train like toolbar. This is heavily based on AndroidSwipeableCardStack, wenc

Aradh Pillai 328 Jun 18, 2022
Tooltip Bubble is an information bubble creator tool.

TooltipBubble It's a simple Tooltip. Installing Add the code block to your project allprojects { repositories { jcenter()

Ally Bros Corporation 4 Oct 4, 2022
Android layout decorators : Injecting custom attributes in layout files, Using decorators to get rid of unnecessary class explosion with custom views

Decor Decor is a library that applies decorators to Android layout with additional attributes without the need to extend and create a custom View for

Mouna Cheikhna 304 Nov 25, 2022
A small, easy to use android library for implementing flipping between views as seen in the popular Flipboard application

FlipView About This library is made to be very easy to use and at the same time be feature complete. With only a few lines of code you can have a flip

Emil Sjölander 924 Nov 10, 2022
This is a library to help creating expanding views with animation in Android

About the Library inspiration This library is strongly inspired in this concept from Hila Peleg in dribble. See it below Working example For more deta

Diego Bezerra 944 Dec 27, 2022
Glass-break effect for views

BrokenView Glass-break effect for views. Demo Download APK Usage Android Studio dependencies { compile 'com.zys:brokenview:1.0.3' } Eclipse Just pu

null 858 Jan 6, 2023
An Android library introducing a stack of Views with the first item being flippable.

FlippableStackView An Android library introducing a stack of Views with the first item being flippable. Views inside the stack remain the aspect ratio

Bartek Lipinski 812 Dec 7, 2022
Dead simple Android Tooltip Views

TooltipView A dead simple way to to add tooltips to your Android app. <com.venmo.view.TooltipView android:layout_width="wrap_content"

Venmo 489 Dec 12, 2022
Draggable views with rotation and skew/scale effects

DraggableView Draggable views with rotation and skew/scale effects. Usage Implement DragController.IDragViewGroup Create instance of DragController Ov

Eugene Levenetc 562 Nov 11, 2022
Animation View to Highlight particular Views 🎯 for Android

TargetView Animation View to Highlight particular Views ?? for Android, it can be Used with Views that you see important (Like CountDownTimer), And al

Anas Altair 53 Aug 7, 2021
:balloon: A lightweight popup like tooltips, fully customizable with an arrow and animations.

Balloon ?? A lightweight popup like tooltips, fully customizable with arrow and animations. Including in your project Gradle Add below codes to your r

Jaewoong Eum 2.8k Jan 5, 2023