All Projects → KeepSafe → Taptargetview

KeepSafe / Taptargetview

Licence: apache-2.0
An implementation of tap targets from the Material Design guidelines for feature discovery.

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to Taptargetview

Angular Mdc Web
Angular wrapper for Material Design (Web) Components
Stars: ✭ 542 (-89.4%)
Mutual labels:  material-design, material, material-components
Materialdesign2
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-96.68%)
Mutual labels:  material-design, material, material-components
Material Intro
A simple material design app intro with cool animations and a fluent API.
Stars: ✭ 1,718 (-66.41%)
Mutual labels:  material-design, material, material-components
Material Design Lite
Material Design Components in HTML/CSS/JS
Stars: ✭ 31,931 (+524.38%)
Mutual labels:  material-design, material, material-components
Material Components Ios
[In maintenance mode] Modular and customizable Material Design UI components for iOS
Stars: ✭ 4,484 (-12.32%)
Mutual labels:  material-design, material, material-components
Cyanea
A theme engine for Android
Stars: ✭ 1,319 (-74.21%)
Mutual labels:  material-design, material, material-components
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (-97.2%)
Mutual labels:  material-design, material, material-components
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (-84.69%)
Mutual labels:  material-design, material, material-components
Material Backdrop
A simple solution for implementing Backdrop pattern for Android
Stars: ✭ 221 (-95.68%)
Mutual labels:  material-design, material, material-components
Material Admin
Free Material Admin Template
Stars: ✭ 219 (-95.72%)
Mutual labels:  material-design, material, material-components
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+546.95%)
Mutual labels:  material-design, material, material-components
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (-93.14%)
Mutual labels:  material-design, material, material-components
Material Components
Documentation and policies for Material Components (all platforms)
Stars: ✭ 872 (-82.95%)
Mutual labels:  material-design, material, material-components
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-97.85%)
Mutual labels:  material-design, material, material-components
Matter
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
Stars: ✭ 888 (-82.64%)
Mutual labels:  material-design, material, material-components
Ibackdrop
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-97.32%)
Mutual labels:  material-design, material, material-components
Fluid
📖 Library for QtQuick apps with Material Design
Stars: ✭ 601 (-88.25%)
Mutual labels:  material-design, material, material-components
React Md
React material design - An accessible React component library built from the Material Design guidelines in Sass
Stars: ✭ 2,284 (-55.34%)
Mutual labels:  material-design, material, material-components
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+292.84%)
Mutual labels:  material-design, material, material-components
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (-3.87%)
Mutual labels:  material-design, material, material-components

Video 1 Screenshot 1 Screenshot 2
TapTargetView

Maven Central Release

An implementation of tap targets from Google's Material Design guidelines on feature discovery.

Min SDK: 14

JavaDoc

Installation

TapTargetView is distributed using MavenCentral.

   repositories { 
        mavenCentral()
   }
   
   dependencies {
         implementation 'com.getkeepsafe.taptargetview:taptargetview:x.x.x'
   }

If you wish, you may also use TapTargetView with jitpack. For snapshots, please follow the instructions here.

Usage

Simple usage

TapTargetView.showFor(this,                 // `this` is an Activity
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        // All options below are optional
        .outerCircleColor(R.color.red)      // Specify a color for the outer circle
	.outerCircleAlpha(0.96f)            // Specify the alpha amount for the outer circle
        .targetCircleColor(R.color.white)   // Specify a color for the target circle
        .titleTextSize(20)                  // Specify the size (in sp) of the title text
        .titleTextColor(R.color.white)      // Specify the color of the title text
        .descriptionTextSize(10)            // Specify the size (in sp) of the description text
        .descriptionTextColor(R.color.red)  // Specify the color of the description text
        .textColor(R.color.blue)            // Specify a color for both the title and description text
        .textTypeface(Typeface.SANS_SERIF)  // Specify a typeface for the text
        .dimColor(R.color.black)            // If set, will dim behind the view with 30% opacity of the given color
        .drawShadow(true)                   // Whether to draw a drop shadow or not
        .cancelable(false)                  // Whether tapping outside the outer circle dismisses the view
        .tintTarget(true)                   // Whether to tint the target view's color
        .transparentTarget(false)           // Specify whether the target is transparent (displays the content underneath)
        .icon(Drawable)                     // Specify a custom drawable to draw as the target
        .targetRadius(60),                  // Specify the target radius (in dp)
    new TapTargetView.Listener() {          // The listener can listen for regular clicks, long clicks or cancels
        @Override
        public void onTargetClick(TapTargetView view) {
            super.onTargetClick(view);      // This call is optional
            doSomething();
        }
    });

You may also choose to target your own custom Rect with TapTarget.forBounds(Rect, ...)

Additionally, each color can be specified via a @ColorRes or a @ColorInt. Functions that have the suffix Int take a @ColorInt.

Tip: When targeting a Toolbar item, be careful with Proguard and ensure you're keeping certain fields. See #180

Sequences

You can easily create a sequence of tap targets with TapTargetSequence:

new TapTargetSequence(this)
    .targets(
        TapTarget.forView(findViewById(R.id.never), "Gonna"),
        TapTarget.forView(findViewById(R.id.give), "You", "Up")
                .dimColor(android.R.color.never)
                .outerCircleColor(R.color.gonna)
                .targetCircleColor(R.color.let)
                .textColor(android.R.color.you),
        TapTarget.forBounds(rickTarget, "Down", ":^)")
                .cancelable(false)
                .icon(rick))
    .listener(new TapTargetSequence.Listener() {
        // This listener will tell us when interesting(tm) events happen in regards
        // to the sequence
        @Override
        public void onSequenceFinish() {
            // Yay
        }
        
        @Override
        public void onSequenceStep(TapTarget lastTarget, boolean targetClicked) {
            // Perform action for the current target
        }

        @Override
        public void onSequenceCanceled(TapTarget lastTarget) {
            // Boo
        }
    });

A sequence is started via a call to start() on the TapTargetSequence instance

For more examples of usage, please look at the included sample app.

Tutorials

Third Party Bindings

React Native

Thanks to @prscX, you may now use this library with React Native via the module here

NativeScript

Thanks to @hamdiwanis, you may now use this library with NativeScript via the plugin here

Xamarin

Thanks to @btripp, you may now use this library via a Xamarin Binding located here.

License

Copyright 2016 Keepsafe Software Inc.

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].