Kotlin Fade In/Fade Out Animasyon Kullanımı



Merhaba arkadaşlar, bugün sizlerle Fade in-Fade Out animasyon kullanımını ele alıyor olacağım. 


Fade In/Fade Out animasyonlarını belirli bir zaman aralığında kullanmak istediğiniz nesnelerin görünümünü ve davranışını değiştirmek için kullanırız. Bu sayede uygulamalarımızda daha akıcı bir görünüm elde etmiş olacağız.

Anim klasörünü oluşturma

Animasyonlarımızı oluşturmak için kullanacağımız .xml dosyalarımızı anim klasörüne ekleyeceğiz. Bunun için app/res öğresine sağ tıklayın. New/Android Resource Directory ‘i seçin ve anim olarak seçim yapınız.



Oluşan anim klasörüne sağ tıklayıp new/Animation Resource File oluşturun ve adını fade_in olarak verin. 



anim klasörü içerisinde fade_in.xml ve fade_out.xml diye iki xml dosyası olacak şekilde aynı işlemleri fade_out.xml’i içinde yapınız.


fade_in.xml kodları

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

fade_out.xml kodları

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>

  • duration: Animasyonun süresini belirtir.

  • fromAlpha: Başlangıç alpha değeri

  • toAlpha: Son alpha değeri

Animasyon için gereken kodlarımızı hazırladığımıza göre şimdi şu şekilde bir layout hazırlayalım ve işlemlerimize başlayalım.


Fade In /  Fade Out animasyonuna göre görünecek olan bir imageview ve istediğimiz animasyonu görebilmemiz için 2 de button ekleyin.









<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/img_doit"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:layout_centerInParent="true"
        android:layout_marginBottom="20dp"
        android:src="@drawable/doit" />

    <Button
        android:id="@+id/btn_fade_in"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_below="@id/img_doit"
        android:layout_alignParentStart="true"
        android:layout_marginEnd="2dp"
        android:text="Fade In" />

    <Button
        android:id="@+id/btn_fade_out"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_below="@id/img_doit"
        android:layout_toEndOf="@+id/btn_fade_in"
        android:text="Fade Out" />

</RelativeLayout>

Layoutumuzu da hazırladığımıza göre artık kod kısmını da yazıp animasyonumuzu gösterebiliriz.


import android.os.Bundle
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

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

        btn_fade_in.setOnClickListener {
            val animation = AnimationUtils.loadAnimation(this, R.anim.fade_in)
            img_doit.startAnimation(animation)
        }

        btn_fade_out.setOnClickListener {
            val animation = AnimationUtils.loadAnimation(this, R.anim.fade_out)
            img_doit.startAnimation(animation)
        }
    }
}


Projenin kodlarına buradan ulaşabilirsiniz.

https://github.com/AyselAydin/FadeinFadeout


Evet arkadaşlar Fade in Fade out animasyon kullanımını bu şekilde tamamlamış olduk. Umarım hepiniz için faydalı olmuştur :)


#android #fadeinfadeout #androidanimation

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın