Android - Açılış Ekranı (Splash Screen) ve Animasyonlar

Splash Screen olarak da geçen ve mobil uygulamaların açılışlarında karşılama ekranlarının nasıl yapıldığı ve nasıl animasyon eklendiği anlatılmıştır.

Animasyon ekleyebilmek için öncelikle projemizde res klasörü altında, anim isminde yeni bir klasör oluşturmamız gerekir.

anim klasörü içerisinde sağ tuş tıklayarak “New / Animation Resource File” seçilerek yeni bir animasyon xml dosyası projeye eklenir.

Animasyon Çeşitleri ve Parametreleri

Temelde dört çeşit animasyon türü bulunmaktadır. Bu parametrelerin tamamı için ortak olarak kullanılabilecek parametreler vardır.

android:duration="..." ile animasyonun süresi milisaniye cinsinden belirtilir.

android:startOffset="..." ile milisaniye cinsinden animasyonun ne kadar süre ile gecikmeli başlayacağı belirtilir.

android:repeatCount="..." ile animasyonun kaç kez tekrar edeceği belirtilir.

android:repeatMode="..." ile animasyonun tekrarında ne şekilde davranacağı belirtilir. repeat ile baştan sona aynı şekilde tekrar etmesi sağlanırken reverse ile aynı animasyonun sonra başa doğru oynatılması sağlanır.

<alpha />

Şeffaflık değerini ayarlayabiliriz.

<alpha
        android:fromAlpha="float"
        android:toAlpha="float" />

<alpha

android:fromAlpha="float"

android:toAlpha="float" />

fromAlpha başlangıçtaki şeffaflık değeri, toAlpha animasyonun sonundaki şeffaflık değeridir. Her iki parametre de 0.0 – 1.0 aralığında değer alabilir.

<scale />

Boyutlandırma yapabiliriz.

<scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />

<scale

android:fromXScale="float"

android:toXScale="float"

android:fromYScale="float"

android:toYScale="float"

android:pivotX="float"

android:pivotY="float" />

fromXScale ve fromYScale sırasıyla başlangıçtaki genişlik ve yükseklik değerlerini ifade ederken toXScale ve toYScale parametreleri de animasyonun sonundaki genişlik ve yükseklik değerlerini ifade eder. pivotX ve pivotY ise merkez noktanın belirlenmesi için kullanılır. Tüm parametreler yüzdelik değerler alabilir. Nesnenin merkez noktasını belirtmek için pivotX ve pivotY değerlerine 50% verilir.

<translate />

Taşıma yapabilliriz.

    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />

<translate

android:fromXDelta="float"

android:toXDelta="float"

android:fromYDelta="float"

android:toYDelta="float" />

fromXDelta ve fromYDelta sırasıyla yatay ve dikey düzende başlangıç konumlarını belirtirken toXDelta ve toYDelta da son konumları belirtir.

<rotate />

Döndürme yapabiliriz.

<rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />

<rotate

android:fromDegrees="float"

android:toDegrees="float"

android:pivotX="float"

android:pivotY="float" />

fromDegrees başlangıç açısıyken toDegrees animasyon sonundaki açıyı belirtir. pivotX ve pivotY değerleri nesnenin döndürme merkez noktasını ifade eder.

Splash Screen Örneği – 1

logo_animasyon.xml dosyasının içeriği örnek olarak aşağıdaki gibidir:

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

    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXScale="0.5"
        android:toXScale="1"
        android:fromYScale="0.5"
        android:toYScale="1"
        android:duration="1000" />

    <translate
        android:fromYDelta="-100%"
        android:toYDelta="0%"
        android:duration="1500" />

    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="1500" />

</set>

<?xml version="1.0" encoding="utf-8"?>

<scale xmlns:android="http://schemas.android.com/apk/res/android"

android:fromXScale="0.5"

android:toXScale="1"

android:fromYScale="0.5"

android:toYScale="1"

android:duration="1000" />

<translate

android:fromYDelta="-100%"

android:toYDelta="0%"

android:duration="1500" />

<alpha

android:fromAlpha="0.1"

android:toAlpha="1.0"

android:duration="1500" />

</set>

MainActivity içindeki kod şu şekildedir:

package com.teknikakil.animasyon;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Animasyon dosyasına erişim
        Animation logo_animasyon = AnimationUtils.loadAnimation(this,R.anim.logo_animasyon);

        //ImageView nesnesine erişiliyor.
        ImageView logo = findViewById(R.id.imageView2);
        //ImageView nesnesine ilgili animasyon tanımlanıyor.
        logo.setAnimation(logo_animasyon);

        TextView slogan = findViewById(R.id.textView);
        slogan.setAnimation(logo_animasyon);

        //Karşılama ekranının ne kadar süre görünmesi gerektiği ayarlanıyor.
        //Bu örnekte 5000 ms, diğer bir deyişle 5 sn ayarlanmıştır.
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                //Intent nesnesi ile diğer ekrana geçiş ayarlanıyor.
                Intent ikinci_ekran = new Intent(MainActivity.this,IkinciEkran.class);
                startActivity(ikinci_ekran);
                finish();
            }
        },5000);



    }
}

package com.teknikakil.animasyon;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Animasyon dosyasına erişim

Animation logo_animasyon = AnimationUtils.loadAnimation(this,R.anim.logo_animasyon);

//ImageView nesnesine erişiliyor.

ImageView logo = findViewById(R.id.imageView2);

//ImageView nesnesine ilgili animasyon tanımlanıyor.

logo.setAnimation(logo_animasyon);

TextView slogan = findViewById(R.id.textView);

slogan.setAnimation(logo_animasyon);

//Karşılama ekranının ne kadar süre görünmesi gerektiği ayarlanıyor.

//Bu örnekte 5000 ms, diğer bir deyişle 5 sn ayarlanmıştır.

new Handler().postDelayed(new Runnable() {

@Override

public void run() {

//Intent nesnesi ile diğer ekrana geçiş ayarlanıyor.

Intent ikinci_ekran = new Intent(MainActivity.this,IkinciEkran.class);

startActivity(ikinci_ekran);

finish();

}

},5000);

}

Yukarıda da görüldüğü gibi her nesne için ayrı animasyon oluşturmamıza gerek kalmıyor. İstenirse aynı animasyon birden fazla nesne için tekrar tekrar kullanılabilir.

Yeni bir Activity’e geçiş ve gerekirse veri gönderimi için bu yazıya bakabilirsiniz.

Splash Screen Örneği – 2

Bazı durumlarda animasyonun gerçekleşmesinden sonra nesnenin ekrandan kaybolmasını isteyebiliriz, aksi halde animasyonun bitmesiyle Activity üzerindeki nesne ilk konumunda görünecektir.

Activity üzerindeki herhangi bir nesneyi gizlemek için setVisibility(View.INVISIBLE) metodu ve parametreleri kullanılabilir.

Logo için logo_animasyon.xml dosyası içeriği şu şekildedir:

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

    <alpha android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="2000"></alpha>

    <translate
        android:fromYDelta="300%"
        android:toYDelta="0%"
        android:duration="1000"></translate>

    <rotate
        android:fromDegrees="1"
        android:toDegrees="360"
        android:duration="1000"
        android:startOffset="1000"
        android:pivotX="50%"
        android:pivotY="50%"></rotate>

    <translate
        android:fromYDelta="0%"
        android:toYDelta="-300%"
        android:duration="1000"
        android:startOffset="2000"></translate>

</set>

<?xml version="1.0" encoding="utf-8"?>

<alpha android:fromAlpha="0"

android:toAlpha="1"

android:duration="2000"></alpha>

<translate

android:fromYDelta="300%"

android:toYDelta="0%"

android:duration="1000"></translate>

<rotate

android:fromDegrees="1"

android:toDegrees="360"

android:duration="1000"

android:startOffset="1000"

android:pivotX="50%"

android:pivotY="50%"></rotate>

<translate

android:fromYDelta="0%"

android:toYDelta="-300%"

android:duration="1000"

android:startOffset="2000"></translate>

</set>

Bunun yanında slogan için de ayrı bir animasyon oluşturmak istiyorsak benzer şekilde slogan_animasyon.xml dosyası oluşturarak aşağıdaki örnek kodları kullanabiliriz:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="1000"
        android:startOffset="1000"></alpha>

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="1000"
        android:startOffset="2000"></alpha>

    <translate
        android:fromYDelta="300%"
        android:toYDelta="0%"
        android:duration="2000"></translate>
</set>

<?xml version="1.0" encoding="utf-8"?>

<alpha

android:fromAlpha="0"

android:toAlpha="1"

android:duration="1000"

android:startOffset="1000"></alpha>

<alpha

android:fromAlpha="1"

android:toAlpha="0"

android:duration="1000"

android:startOffset="2000"></alpha>

<translate

android:fromYDelta="300%"

android:toYDelta="0%"

android:duration="2000"></translate>

</set>

MainActivity.java dosyasının içeriği ise şu şekildedir:

package com.teknikakil.animasyon2;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Animasyon nesnesine erişim
        Animation logo_animasyon = AnimationUtils.loadAnimation(this,R.anim.logo_animasyon);
        Animation slogan_animasyon = AnimationUtils.loadAnimation(this,R.anim.slogan_animasyon);

        //Animasyonun uygulanacağı nesneler
        ImageView logo = findViewById(R.id.imageView);
        logo.setAnimation(logo_animasyon);
        logo.setVisibility(View.INVISIBLE);

        TextView slogan = findViewById(R.id.textView);
        slogan.setAnimation(slogan_animasyon);
        slogan.setVisibility(View.INVISIBLE);


        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                //Yeni activity'e geçiş
                Intent ikinci = new Intent(MainActivity.this, IkinciEkran.class);
                startActivity(ikinci);
                finish();
            }
        }, 5000);


    }
}

package com.teknikakil.animasyon2;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Animasyon nesnesine erişim

Animation logo_animasyon = AnimationUtils.loadAnimation(this,R.anim.logo_animasyon);

Animation slogan_animasyon = AnimationUtils.loadAnimation(this,R.anim.slogan_animasyon);

//Animasyonun uygulanacağı nesneler

ImageView logo = findViewById(R.id.imageView);

logo.setAnimation(logo_animasyon);

logo.setVisibility(View.INVISIBLE);

TextView slogan = findViewById(R.id.textView);

slogan.setAnimation(slogan_animasyon);

slogan.setVisibility(View.INVISIBLE);

new Handler().postDelayed(new Runnable() {

@Override

public void run() {

//Yeni activity'e geçiş

Intent ikinci = new Intent(MainActivity.this, IkinciEkran.class);

startActivity(ikinci);

finish();

}

}, 5000);

}

Android – Açılış Ekranı (Splash Screen) ve Animasyonlar

Animasyon Çeşitleri ve Parametreleri

<alpha />

<scale />

<translate />

<rotate />

Splash Screen Örneği – 1

Splash Screen Örneği – 2

About Hürkal HÜSEM

Bir yanıt yazın Yanıtı iptal et

Animasyon Çeşitleri ve Parametreleri

<alpha />

<scale />

<translate />

<rotate />

Splash Screen Örneği – 1

Splash Screen Örneği – 2

Related Posts

Android – SQLite Veritabanı Uygulaması

Android – Fragment Kullanımı

Android’de Layout Türleri

About Hürkal HÜSEM

Bir yanıt yazın Yanıtı iptal et