Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong Spotlight on Element in Layout #119

Open
SimonHaenle opened this issue Feb 28, 2021 · 2 comments
Open

Wrong Spotlight on Element in Layout #119

SimonHaenle opened this issue Feb 28, 2021 · 2 comments

Comments

@SimonHaenle
Copy link

SimonHaenle commented Feb 28, 2021

Hey there.
Using spotlight 2.0.3 (latest) I have the following issue. It keeps making a spotlight on a button in my layout, but I don't even put a spotlight there.
Screenshot_20210228-165740_LetsFlix
As you can see in the screenshot, there is a spotlight on the "Suchen" button, even though I never put a spotlight there.
Here is my spotlight code.

fun showTutorial() {
        view?.doOnPreDraw {
            val zeroRoot = View.inflate(requireContext(), R.layout.tutorial_start_target_layout, null)
            val zeroTarget = Target.Builder()
                .setAnchor(0F, 0F)
                .setOverlay(zeroRoot)
                .build()

            val firstRoot = View.inflate(requireContext(), R.layout.country_picker_target_layout, null)
            val firstTarget = Target.Builder()
                .setAnchor(country_search)
                .setShape(
                    RoundedRectangle(
                        country_search.height.toFloat(),
                        country_search.width.toFloat(),
                        8F
                    )
                )
                .setOverlay(firstRoot)
                .build()

            val secondRoot = View.inflate(requireContext(), R.layout.type_picker_target_layout, null)
            val secondTarget = Target.Builder()
                .setAnchor(type_search)
                .setShape(
                    RoundedRectangle(
                        type_search.height.toFloat(),
                        type_search.width.toFloat(),
                        8F
                    )
                )
                .setOverlay(secondRoot)
                .build()

            val thirdRoot = View.inflate(requireContext(), R.layout.genre_picker_target_layout, null)
            val thirdTarget = Target.Builder()
                .setAnchor(genre_search)
                .setShape(
                    RoundedRectangle(
                        genre_search.height.toFloat(),
                        genre_search.width.toFloat(),
                        8F
                    )
                )
                .setOverlay(thirdRoot)
                .build()

            val fourthRoot = View.inflate(requireContext(), R.layout.imdb_picker_target_layout, null)
            val fourthTarget = Target.Builder()
                .setAnchor(imdb_search)
                .setShape(
                    RoundedRectangle(
                        imdb_search.height.toFloat(),
                        imdb_search.width.toFloat(),
                        8F
                    )
                )
                .setOverlay(fourthRoot)
                .build()

            val fifthRoot = View.inflate(requireContext(), R.layout.audio_picker_target_layout, null)
            val fifthTarget = Target.Builder()
                .setAnchor(audio_language_search)
                .setShape(
                    RoundedRectangle(
                        audio_language_search.height.toFloat(),
                        audio_language_search.width.toFloat(),
                        8F
                    )
                )
                .setOverlay(fifthRoot)
                .build()

            val sixthRoot = View.inflate(requireContext(), R.layout.keyword_target_layout, null)
            val sixthTarget = Target.Builder()
                .setAnchor(keyword_search)
                .setShape(
                    RoundedRectangle(
                        keyword_search.height.toFloat(),
                        keyword_search.width.toFloat(),
                        8F
                    )
                )
                .setOverlay(sixthRoot)
                .build()

            val spotlight = Spotlight.Builder(requireActivity())
                .setTargets(
                    zeroTarget,
                    firstTarget,
                    secondTarget,
                    thirdTarget,
                    fourthTarget,
                    fifthTarget,
                    sixthTarget
                )
                .setBackgroundColorRes(R.color.blackTransparent)
                .setDuration(500L)
                .setAnimation(DecelerateInterpolator(2f))
                .setContainer(rootLayoutSearch)
                .build()
            spotlight.start()

            val nextTarget = View.OnClickListener { spotlight.next() }
            val closeSpotlight = View.OnClickListener {
                SharedPreferenceManager.tutorialSeen = true
                spotlight.finish()
            }
            zeroRoot.setOnClickListener(nextTarget)
            firstRoot.setOnClickListener(nextTarget)
            secondRoot.setOnClickListener(nextTarget)
            thirdRoot.setOnClickListener(nextTarget)
            fourthRoot.setOnClickListener(nextTarget)
            fifthRoot.setOnClickListener(nextTarget)
            sixthRoot.setOnClickListener(nextTarget)
            zeroRoot.findViewById<TextView>(R.id.skipTutBtn).setOnClickListener(closeSpotlight)
            firstRoot.findViewById<TextView>(R.id.skipTutBtn).setOnClickListener(closeSpotlight)
            secondRoot.findViewById<TextView>(R.id.skipTutBtn).setOnClickListener(closeSpotlight)
            thirdRoot.findViewById<TextView>(R.id.skipTutBtn).setOnClickListener(closeSpotlight)
            fourthRoot.findViewById<TextView>(R.id.skipTutBtn).setOnClickListener(closeSpotlight)
            fifthRoot.findViewById<TextView>(R.id.skipTutBtn).setOnClickListener(closeSpotlight)
            sixthRoot.findViewById<TextView>(R.id.skipTutBtn).setOnClickListener(closeSpotlight)
        }
    }
And this is the xml of my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rootLayoutSearch"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:background="@color/black">

    <TextView
        android:id="@+id/suggestionTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/suggestionTitle"
        android:layout_marginTop="8dp"
        android:textSize="17sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <include
        android:id="@+id/country_search"
        layout="@layout/country_search"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="4dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/suggestionTitle" />

    <include
        android:id="@+id/type_search"
        layout="@layout/type_search"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="1.5dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/country_search" />

    <include
        android:id="@+id/genre_search"
        layout="@layout/genre_search"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="1.5dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/type_search" />

    <include layout="@layout/imdb_search"
        android:id="@+id/imdb_search"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="1.5dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/genre_search" />

    <include layout="@layout/audio_language_search"
        android:id="@+id/audio_language_search"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="1.5dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imdb_search" />

    <include layout="@layout/keyword_search"
        android:id="@+id/keyword_search"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="1.5dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/audio_language_search"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/buttonSearch"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="1.5dp"
        app:backgroundTint="@color/darkGrey"
        android:background="@drawable/round_corner_bg"
        android:drawableStart="@drawable/ic_baseline_search_24"
        android:textAllCaps="false"
        android:text="@string/go"
        android:textColor="?android:attr/textColorSecondary"
        android:textStyle="bold"
        android:textSize="15sp"
        android:drawablePadding="6dp"
        android:paddingStart="6dp"
        android:paddingEnd="6dp"
        app:layout_constraintStart_toStartOf="parent"
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:layout_constraintTop_toBottomOf="@+id/keyword_search" />

    <include
        android:id="@+id/include"
        layout="@layout/glow_button"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="1.5dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/keyword_search" />

</androidx.constraintlayout.widget.ConstraintLayout>

I just can't figure out why there is a spotlight on this button and how to get rid of it.

Greetings,
Simon

@SimonHaenle
Copy link
Author

Fyi: I was able to find a workaround by putting a FrameLayout around that button.

@uestueab
Copy link

uestueab commented Aug 5, 2021

@SimonHaenle Hi, can you tell me how you did the arrow pointing to the spotlight? I'm working on my Thesis it would be really helpful if you i knew how to do that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants