Android Fade In-Out in Kotlin

Fade In and Fade Out animations are used to change the appearance of any view over a given pe​riod of time, allowing the user to be aware of changes occurring in our programme.

In this post, we will look at the process of adding a Fade-In or Fade-Out to an application by creating an app with infinite content of Mobile Application

Let's take one example of Fade-In and Fade-Out


Step by step implementation
Step 1: Create a new project in Android  or you can use an already created project.  


Step 2: Create an activity_main.xml file in your layout folder . path (res>layout)

 Implement the same in​voke the following code inside activity_main.xml file. 

 <?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"
tools:context=".MainActivity">
<TextView
android:id="@+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_marginTop="80dp"
android:text="Candidroot solutions"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.842"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/fade_in"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="84dp"
android:text="Fade In"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtTitle" />

<Button
android:id="@+id/fade_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="84dp"
android:layout_marginEnd="92dp"
android:layout_toEndOf="@+id/fade_in"
android:text="Fade Out"
android:textAllCaps="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="@+id/fade_in"
app:layout_constraintTop_toBottomOf="@+id/txtTitle" />

<ImageView
android:id="@+id/imgcompaylogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="68dp"
android:src="@drawable/company_logo"
app:layout_constraintEnd_toEndOf="@+id/fade_out"
app:layout_constraintHorizontal_bias="0.563"
app:layout_constraintStart_toStartOf="@+id/fade_in"
app:layout_constraintTop_toBottomOf="@+id/fade_in" />

</androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create an MainActivity.kt file in your package folder .

 Implement the same invoke the fol​lowing code inside MainActivity.kt file.

 import android.os.Bundle
import android.os.Handler
import android.view.View
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
import com.velodate.myapplication.databinding.ActivityMainActivityoneBinding

class MainActivityone : AppCompatActivity() {
private lateinit var mainBinding: ActivityMainActivityoneBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
mainBinding = ActivityMainActivityoneBinding.inflate(layoutInflater)
setContentView(mainBinding.root)

mainBinding.fadeIn.setOnClickListener {
mainBinding.imgcompaylogo.visibility = View.VISIBLE
val animation = AnimationUtils.loadAnimation(this, R.anim.fade_in)
mainBinding.imgcompaylogo.startAnimation(animation)
}
mainBinding.fadeOut.setOnClickListener {
val animation = AnimationUtils.loadAnimation(this, R.anim.fade_out)
mainBinding.imgcompaylogo.startAnimation(animation)
Handler().postDelayed({
mainBinding.imgcompaylogo.visibility = View.GONE
}, 1000)
}
}
}
Step 4 : Output of above example


Happy coding!

365Bloggy June 18, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive