Why is My Confetti Coming from the Corner of the Screen in Android

Question

I am using the nl.dionsegijn.konfetti.KonfettiView provided by Daniel Martinus GitHub . But whenever I come to this screen which contains the confetti, the confetti comes out from the corner.

Here is the activty.xml file for it:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context=".EndScreen"
    tools:ignore="HardcodedText">


<nl.dionsegijn.konfetti.KonfettiView
    android:id="@+id/viewKonfetti"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0" />

<TextView
    android:id="@+id/tvCongrats"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:text="Well done, you got an acheivement"
    android:textSize="30sp"
    android:textColor="@color/white"
    android:textAlignment="center"
    android:fontFamily="@font/m_extrabolditalic"

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

Now here is the Activity.kt file for it:

package com.appmania.guess_o_rama

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

import android.graphics.Color
import android.widget.Toast
import nl.dionsegijn.konfetti.KonfettiView
import nl.dionsegijn.konfetti.models.Shape
import nl.dionsegijn.konfetti.models.Size

class EndScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_end)

        val konfetti = findViewById<KonfettiView>(R.id.viewKonfetti)

        konfetti.build()
            .addColors( Color.rgb(244, 195, 88))
            .setDirection(0.0, 359.0)
            .setSpeed(1f, 4f)
            .setFadeOutEnabled(true)
            .setTimeToLive(2000L)
            .addShapes(Shape.RECT, Shape.CIRCLE)
            .addSizes(Size(12))
            .setPosition(-50f, konfetti.width + 50f, -50f, -50f)
            .streamFor(300, 5000L) }
}

Here is a screenshot of the confetti coming from the corner:

* Sorry it is so big - I don't know how to fix that

I would greatly appreciate any help on this.

Answer 1

I would advise you to experiment with different values for direction and position until you are satisfied.

Try changing the direction and position

konfetti.build()
        .addColors( Color.rgb(244, 195, 88))
        .setDirection(0.0, 0.0) // chnage this to set the direction
        .setSpeed(1f, 4f)
        .setFadeOutEnabled(true)
        .setTimeToLive(2000L)
        .addShapes(Shape.RECT, Shape.CIRCLE)
        .addSizes(Size(12))
        .setPosition(-50f, konfetti.width + 50f, -50f, -50f) // and change position from here
        .streamFor(300, 5000L)