How do I make a green success / red fail screen with fade?

Question

So I've got this very basic test app, that calls an API, and get's back a 50/50 response whether it's success or fail. I only have a "Call API button", and when I click on that, I want to app to fade into a green screen with a text that says something like "Success!" and stays there for like 5 seconds, of if it fails, it would do something similar, just a red fade with "Fail!".

By now, I've just got a simple main_view looking like this:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/mainContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">

<TextView
            android:id="@+id/testApiLabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="100dp"
            android:layout_marginTop="4dp"
            android:layout_marginEnd="100dp"
            android:layout_marginBottom="4dp"
            android:text="Click the button to test API"
            android:textAlignment="center"
            android:textColor="@color/black"
            android:textSize="20sp"
            app:layout_constraintBottom_toTopOf="@id/testApiButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.4" />

        <Button
            android:id="@+id/testApiButton"
            style="@style/DefaultButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="100dp"
            android:layout_marginEnd="100dp"
            android:onClick="@{() -> view.onCallAPI()}"
            android:text="Test API"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.95" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

How could I make this code? Hope it makes sense what I'm asking. I was thinking of doing like a DialogFragment, but I'm not sure that's a pretty way to do it.

You need to use [handler with postDelayed](https://stackoverflow.com/q/42379301/7948109) to make the image stay for 5 sec. — Rahul Gaur, Jan 16 '20 at 11:19
I was more looking into how to make the screen go full green with some text, like UI wise, because instead of handler stuff I'll see if I can go the kotlin way. — Mikkel Larsen, Jan 16 '20 at 11:32
for full screen have a look [here](https://stackoverflow.com/q/2868047/7948109). You can create a separate activity to show only colours and text and `finish()` it after 5 seconds — Rahul Gaur, Jan 16 '20 at 11:35

score 0 · Answer 1 · answered Jan 17 '20 at 11:15

I ended up making 3 constraint layouts in the same view, and when I get back a response from the API, I use this code to change

private fun startAnimationOfNewView(view: ConstraintLayout) {
        val cx = view.width / 2
        val cy = view.height / 2

        val finalRadius = hypot(cx.toDouble(), cy.toDouble()).toFloat()
        val anim =
            ViewAnimationUtils.createCircularReveal(view, cx, cy, 0f, finalRadius)
        view.visibility = View.VISIBLE
        anim.start()
    }

The other views just start as invisible and this works just fine. Then after some seconds I switch back.

How do I make a green success / red fail screen with fade?

1 Answers1