An android library to highlight different features of the app built using Jetpack Compose.

Related tags

Jetpack Compose android kotlin material-design kotlin-library showcase android-library android-development intro feature app-intro jetpack-compose
Overview

Intro Showcase View

An android library to highlight different features of the app built using Jetpack Compose.

The library is inspired by the TapTargetView that is useful for legacy views.

Configuration

Add it in your root build.gradle at the end of repositories:

repositories {
    maven { url 'https://jitpack.io' }
}

Add the dependency

  implementation 'com.github.canopas:Intro-showcase-view:1.0.2'

How to use ?

@Composable
fun ShowcaseSample() {
    val targets = remember {
        mutableStateMapOf<String, ShowcaseProperty>()
    }
    Box {
        FloatingActionButton(
            onClick = {},
            modifier = Modifier.padding(16.dp).align(Alignment.BottomStart).onGloballyPositioned { coordinates ->
                targets["email"] = ShowcaseProperty(
                    1, coordinates, "Check emails", "Click here to check/send emails"
                )
            },
            backgroundColor = ThemeColor,
            contentColor = Color.White,
            elevation = FloatingActionButtonDefaults.elevation(6.dp)
        ) {
            Icon(
                Icons.Filled.Email,
                contentDescription = "Email"
            )
        }

        IntroShowCase(targets) {
            // Showcase finished!!
        }
    }
}

Further reading

For more details, checkout the tutorial

Bugs and Feedback

For bugs, questions and discussions please use the Github Issues.

Credits

Canopas Software LLP

Licence

Copyright 2022 Canopas Software LLP

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.
You might also like...
JetFlix - A clone of Android NetFlix app in Android built using Jetpack compose.
JetFlix - A clone of Android NetFlix app in Android built using Jetpack compose.

JetFlix A clone of Android NetFlix app in Android built using Jetpack compose. This sample app showcases the following: MVVM Architecture (ViewModel +

Pushpal Roy 40 Dec 6, 2022
This app can be used to track open slots for vaccination. This is built using Jetpack Compose.
This app can be used to track open slots for vaccination. This is built using Jetpack Compose.

Covid Vaccine This projects used the Cowin APIs provided by the government. Screenshots Tech Stack Used Kotlin Dagger Hilt Clean Architecture with Mod

Himanshu Singh 101 Dec 15, 2022
Formula 1 app to show current Standings from a REST API.Built using jetpack compose and kotlin.
Formula 1 app to show current Standings from a REST API.Built using jetpack compose and kotlin.

Formula1 Formula 1 app to show Standings fetching data from REST API 📸 Screenshots Tech Stack. Kotlin - Kotlin is a programming language that can run

Ezra Kanake 5 Oct 28, 2022
A library that adds useful features for Compose Desktop apps

Desktopose This is a set of utilities and components meant to help with developing desktop apps that use Compose for Desktop library. It contains the

Szeweq 3 Nov 21, 2022
Instagram Clone built in Android using concept of Jetpack compose.
Instagram Clone built in Android using concept of Jetpack compose.

Instagram_Clone Instagram clone is an app build using new technologies/trends and other advanced Jetpack compose specific concepts. Following are the

raj narayan mishra 4 Dec 2, 2022
📱 WhatsApp clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat SDK for Compose.
📱 WhatsApp clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat SDK for Compose.

This is a WhatsApp clone app built with Jetpack Compose and Stream Chat SDK for Compose. The purpose of this repository is to demonstrate below: Imple

Stream 689 Dec 25, 2022
🧱 A tetris game fully built using Jetpack Compose
🧱 A tetris game fully built using Jetpack Compose

A tetris game fully built using Jetpack Compose, almost all UI elements are created by code, including the following app icon, which is also generated by Composable with @Preview.

fundroid 590 Jan 5, 2023
LearnCompose - A simple UI built using Jetpack Compose
LearnCompose - A simple UI built using Jetpack Compose

Compose course UI A simple UI built using Jetpack Compose. Consists of a list sc

ComposeDesign 40 Nov 13, 2022
❤️ A heart-shaped toggle switch component built using Jetpack Compose
❤️ A heart-shaped toggle switch component built using Jetpack Compose

heart-switch A heart-shaped toggle switch component built using Jetpack Compose. Inspired by Tore Bernhoft's I heart toggle Dribbble shot and Anatoliy

Anton Popov 30 Dec 14, 2022
Comments
  • Intro showcase state

    Intro showcase state

    Hi, nice work with this library! I've been playing around with it and I found some place for potential improvement, feel free to go through it and tell me what you think.

    It felt a bit rough how user has to keep targets map and add targets to it itself and also how onGloballyPositioned modifier has to be used directly. So I created IntroShowCaseState, pretty much how core compose ui components do it, which holds the targets map, and introShowCaseTarget modifier which wraps onGloballyPositioned so that user doesn't have to know about LayoutCoordinates and the low level implementation.

    I also created IntroShowCaseScaffold which can optionally be used instead of wrapping the content and IntroShowCase in a Box, can handle IntroShowCaseState creation in most cases, and introduces IntroShowCaseScope with simplified version of introShowCaseTarget modifier.

    opened by janbina 1
  • On a fullscreen app (Edge to edge), showcase Y coords are offset

    On a fullscreen app (Edge to edge), showcase Y coords are offset

    Showcase is offset when using :

    WindowCompat.setDecorFitsSystemWindows(window, false)

setContent {
    Surface(
                    modifier = Modifier
                        .background(colorResource(id = R.color.colorSurface))
                        .systemBarsPadding()
                ) {
                    // IntroShowCaseScaffold( ....
                }
}

    using lib with 1.07 version The target element is the settings icon :

    image

    opened by jscti 0
  • The library doesn't seem to be complete

    The library doesn't seem to be complete

    There are quite a few things that are not in the library, fun Modifier.introShowCaseTarget, fun rememberIntroShowCaseState, fun IntroShowCaseScaffold, etc.

    I'm trying com.canopas.intro-showcase-view:introshowcaseview:1.0.5.

    opened by d2callpod 5
Releases(1.0.8)
Owner
Canopas Software
We're here to share knowledge and learnings about #android #iOS #web development. Follow us to learn something new everyday.
Canopas Software
GitHub
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

Clément Beffa 548 Jan 7, 2023
Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Denis Rudenko 59 Dec 14, 2022
A library that you can use in 4 different types toast written with Jetpack Compose

Composable Sweet Toast A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose. You can use this t

Talha Fakıoğlu 67 Dec 19, 2022
A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose.

Composable Sweet Toast A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose. You can use this t

Talha Fakıoğlu 67 Dec 19, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022
This is a sample app(For beginners - App #1) built using Jetpack Compose

This is a sample app(For beginners - App #1) built using Jetpack Compose. It is a simple - single screen app to demonstrate use of basic Jetpack Compose UI elements like Text, Image and Button & LazyColumn (Vertical Recyclerview). It also demonstrates how compose manages state with a Boolean State.

BHAVNA THACKER 3 Apr 3, 2022
OTPView is a view made in Jetpack compose. It is highly customisable and can be used to show OTP view with different length and shapes.

OTPView OTPView is a highly costumizable OTP view made in the Jetpack compose UI. Usage: CircleOtpView is a sample composable that calls the OtpView w

kunalsale 17 Aug 4, 2022
Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose

✏️?? Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose. Displays numbers either in circle or rounded rectangle shape based on badge count and selected threshold to transform from circle to rounded rectangle.

Smart Tool Factory 4 Jul 27, 2022