Hello <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

How to add the skip button about spotlight HOT 1 CLOSED

PatelJa02 commented on August 15, 2024

How to add the skip button

from spotlight.

Comments (1)

NicholasMata commented on August 15, 2024

@PatelJa02

If you run the example. You will see that the spotlight titled "Pull Down" has an example of adding a skip button. In this case the skip button visibility is delayed.

The gist is you need to set a custom message layout.

In the example project this is called SkippableMessageViewLayout.kt

class SkippableMessageViewLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr), SpotlightMessage {
    override var spotlightGravity: SpotlightMessageGravity? = null
    override var spotlightView: SpotlightView? = null


    override fun onFinishInflate() {
        super.onFinishInflate()

        val button = findViewById<MaterialButton>(R.id.spotlight_message_next_button)
        button.setOnClickListener {
            spotlightView?.endSpotlight()
        }
        Handler(Looper.getMainLooper()).postDelayed({
            button.visibility = View.VISIBLE
        }, 5000)
    }
}

Then you will have to create a layout in res. In the example this is file is spotlight_skippable_message_view.xml

<?xml version="1.0" encoding="utf-8"?>
<...SkippableMessageViewLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/simple_message_background"
    android:gravity="center"
    android:orientation="vertical"
    android:animateLayoutChanges="true"
    android:padding="10dp">

    <TextView
        android:id="@id/spotlight_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:textSize="18sp"
        android:textStyle="bold"
        tools:text="Title" />


    <TextView
        android:id="@id/spotlight_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:textSize="16sp"
        tools:text="This is a test description" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/spotlight_message_next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:text="Skip" />

</..SkippableMessageViewLayout>

Some important notes are that the id's for the title and description are specific. In this case
@id/spotlight_description and @id/spotlight_title . But the layout can look anyway you want, in this example the layout adds a button.

How it looks

from spotlight.

How to add the skip button about spotlight HOT 1 CLOSED

Comments (1)

Related Issues (2)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent