Başlangıç ekranları

Android 12'den itibaren SplashScreen API, uygulamaların animasyonla başlatılmasına olanak tanır. Bu animasyonda, açılışta uygulamaya giriş hareketi, uygulama simgenizi gösteren bir başlangıç ekranı ve uygulamanızın kendisine geçiş yer alır. SplashScreen, bir Window öğesidir ve bu nedenle Activity öğesini kapsar.

Şekil 1. Başlangıç ekranı.

Başlangıç ekranı deneyimi, her uygulama lansmanına standart tasarım öğeleri getirir ancak uygulamanızın benzersiz marka kimliğini koruyabilmesi için özelleştirilebilir.

SplashScreen platform API'sini kullanmanın yanı sıra SplashScreen API'sini sarmalayan SplashScreen uyumluluk kitaplığını da kullanabilirsiniz.

Başlangıç ekranının işleyiş şekli

Kullanıcı, uygulamanın işlemi çalışmazken (sıfırdan başlatma) veya Activity oluşturulmamışken (hazırda başlatma) bir uygulamayı başlattığında aşağıdaki etkinlikler gerçekleşir:

  1. Sistem, temaları ve tanımladığınız animasyonlarla açılış ekranını gösterir.

  2. Uygulama hazır olduğunda açılış ekranı kapatılır ve uygulama gösterilir.

Başlatma ekranı, sıcak başlatma sırasında hiçbir zaman gösterilmez.

Başlangıç ekranındaki öğeler ve mekanikler

Açılış ekranının öğeleri, Android manifest dosyasında XML kaynak dosyalarıyla tanımlanır. Her öğenin açık ve koyu mod sürümleri vardır.

Başlangıç ekranının özelleştirilebilir öğeleri uygulama simgesinden, simge arka planından ve pencere arka planından oluşur:

Başlangıç ekranında bulunan öğeleri gösteren resim
Şekil 2. Başlangıç ekranının özelleştirilebilir öğeleri.

Şekil 2'de gösterilen aşağıdaki öğeleri göz önünde bulundurun:

1 Uygulama simgesi, drawable vektör olmalıdır. Statik veya hareketli olabilir. Animasyonlar sınırsız uzunlukta olabilir ancak 1.000 milisaniyeyi aşmamasını öneririz. Varsayılan olarak başlatıcı simgesi kullanılır.

2 Simge arka planı isteğe bağlıdır ve simge ile pencere arka planı arasında daha fazla kontrasta ihtiyacınız varsa kullanışlıdır. Uyarlanabilir simge kullanıyorsanız pencere arka planıyla yeterli kontrast varsa simgenin arka planı gösterilir.

3 Uyarlanabilir simgelerde olduğu gibi, ön planın üçte biri maskelenmiştir.

4 Pencere arka planı tek bir opak renkten oluşur. Pencere arka planı ayarlanmışsa ve düz bir renkse özellik ayarlanmamışsa varsayılan olarak kullanılır.

Başlangıç ekranı boyutları

Başlangıç ekranı simgesi, uyarlanabilir simgelerle aynı spesifikasyonları kullanır.

  • Markalı resim: 200x80 dp boyutunda olmalıdır.
  • Simge arka planı içeren uygulama simgesi: 240x240 dp boyutunda olmalı ve 160 dp çapında bir daireye sığmalıdır.
  • Simge arka planı olmayan uygulama simgesi: 288x288 dp boyutunda olmalı ve 192 dp çapında bir daireye sığmalıdır.

Örneğin, bir resmin tam boyutu 300x300 dp ise simgenin 200 dp çapında bir daireye sığması gerekir. Çemberin dışındaki her şey görünmez (maskeli) olur.

Katı ve şeffaf arka plan için farklı simge boyutlarını gösteren bir resim
Şekil 3. Sırasıyla düz ve şeffaf arka planlar için başlangıç ekranı simge boyutları.

Başlangıç ekranı animasyonları ve başlatma sırası

Ek gecikmeler genellikle bir uygulamanın soğuk başlatma ile başlatılmasıyla ilişkilidir. Başlangıç ekranınıza animasyonlu bir simge eklemek hem estetik açıdan çekicidir hem de daha premium bir deneyim sunar. Kullanıcı araştırmaları, animasyon görüntülenirken algılanan başlatma süresinin daha kısa olduğunu gösteriyor.

Şekil 4'te gösterildiği gibi, başlangıç animasyonu, başlatma sırası bileşenlerine yerleştirilir.

Başlatıcı simgesine dokunulduğunda ve simge büyüdükçe ekranı doldurduğunda, art arda on iki karede başlatma sırasını gösteren resim
Şekil 4. Başlatma sırası.

  1. Animasyon girme: Başlangıç ekranına giden sistem görünümünden oluşur. Bu boyut, sistem tarafından kontrol edilir ve özelleştirilemez.

  2. Başlangıç ekranı (sıranın "bekleme" bölümünde gösterilir): Başlangıç ekranı özelleştirilebilir. Böylece kendi logo animasyonunuzu ve markanızı ekleyebilirsiniz. Düzgün çalışması için bu sayfada açıklanan şartları karşılamalıdır.

  3. Çıkış animasyonu: Başlangıç ekranını gizleyen animasyondan oluşur. Özelleştirmek isterseniz SplashScreenView simgesini kullanın. Dönüşüm, opaklık ve renk ayarlarıyla bunlarda herhangi bir animasyon çalıştırabilirsiniz. Bu durumda, animasyon bittiğinde başlangıç ekranını manuel olarak kaldırın.

Simge animasyonu çalıştırıldığında, uygulamanın daha önce hazır olduğu durumlarda uygulama başlatma işlemi size sırayı atlama seçeneği sunar. Uygulama onResume()'yi tetikler veya açılış ekranının süresi otomatik olarak dolar. Bu nedenle, hareketin rahatça atlanabildiğinden emin olun. Başlangıç ekranı yalnızca uygulama görsel açıdan kararlı olduğunda onResume() ile kapatılmalıdır. Bu nedenle ek döndürücülere gerek yoktur. Eksik bir arayüz sunmak kullanıcılar için can sıkıcı olabilir ve öngörülemezlik ya da özensizlik izlenimi verebilir.

Başlangıç ekranı animasyonu koşulları

Başlangıç ekranınız aşağıdaki özelliklere uygun olmalıdır:

  • Şeffaflık içermeyen tek bir pencere arka plan rengi ayarlayın. Gündüz ve gece modu, SplashScreen uyumluluk kitaplığı ile desteklenir.

  • Animasyonlu simgesinin aşağıdaki özellikleri karşıladığından emin olun:

    • Biçim: Simge bir AnimatedVectorDrawable (AVD) XML olmalıdır.
    • Boyutlar: AVD simgesi, aşağıdaki gibi uyarlanabilir simgenin dört katı boyutunda olmalıdır:
      • Simge alanı 432 dp olmalıdır. Yani maskesiz bir uyarlanabilir simgesinin 108 dp alanının dört katı olmalıdır.
      • Resmin iç üçte biri başlatıcı simgesinde görünür ve 288 dp olmalıdır. Yani uyarlanabilir bir simgesinin maskelenmiş iç alanını oluşturan 72 dp'nin dört katı olmalıdır.
    • Süre: Telefonlarda 1.000 ms'yi aşmamanızı öneririz. Gecikmeli başlatma kullanabilirsiniz ancak bu süre 166 ms'den uzun olamaz. Uygulamanın başlatma süresi 1.000 ms'den uzunsa döngüsel animasyon kullanabilirsiniz.

  • Uygulamanız ilk karesini çizerken açılış ekranını kapatmak için uygun bir süre belirleyin. Bunu, başlangıç ekranını daha uzun süre ekranda tutma ile ilgili bölümde açıklandığı şekilde daha fazla özelleştirebilirsiniz.

Başlangıç ekranı kaynakları

Şekil 5. Örnek AVD.

Bir animasyonu nasıl oluşturacağınızı, biçimlendireceğinizi ve AVD'ye nasıl dışa aktaracağınızı gösteren örnek başlangıç setini indirin. Aşağıdakiler bu kapsamdadır:

  • Animasyonun Adobe After Effects proje dosyası.
  • Dışa aktarılan nihai ortalama AVD XML dosyası.
  • Animasyonun örnek GIF'i.

Bu dosyaları indirerek Google Hizmet Şartları'nı kabul etmiş olursunuz.

Google Gizlilik Politikası, verilerin bu hizmette nasıl işlendiğini açıklar.

Uygulamanızdaki açılış ekranını özelleştirme

Varsayılan olarak SplashScreen, windowBackground tek bir renkse temanızın windowBackground değerini kullanır. Başlangıç ekranını özelleştirmek için uygulama temasına özellikler ekleyin.

Aşağıdakilerin birini yaparak uygulamanızın başlangıç ekranını özelleştirebilirsiniz:

  • Görünümünü değiştirmek için tema özelliklerini ayarlayın.

  • Reklamı daha uzun süre ekranda tutun.

  • Başlangıç ekranını kapatma animasyonunu özelleştirin.

Başlayın

Temel SplashScreen kitaplığı, Android 12 açılış ekranını API 23'ten sonraki tüm cihazlara getirir. Bu özelliği projenize eklemek için build.gradle dosyanıza aşağıdaki snippet'i ekleyin:

Groovy

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

Başlangıç ekranının görünümünü değiştirmek için bir tema ayarlama

Uygulamanızın başlangıç ekranını özelleştirmek için Activity temanızda aşağıdaki özellikleri belirtebilirsiniz. android:windowBackground gibi özellikleri kullanan eski bir başlangıç ekranı uygulamanız zaten varsa Android 12 ve sonraki sürümler için alternatif bir kaynak dosyası sağlayabilirsiniz.

  1. Arka planı tek bir renkle doldurmak için windowSplashScreenBackground simgesini kullanın:

    <item name="android:windowSplashScreenBackground">@color/...</item>

  2. Başlangıç penceresinin ortasındaki simgeyi değiştirmek için windowSplashScreenAnimatedIcon simgesini kullanın.

    Yalnızca Android 12'yi (API düzeyi 32) hedefleyen uygulamalar için aşağıdakileri yapın:

    Nesne, animasyona uygun ve AnimationDrawable ile AnimatedVectorDrawable üzerinden çizilebilirse başlangıç penceresini gösterirken animasyonu oynatmak için windowSplashScreenAnimationDuration öğesini ayarlayın. Süre doğrudan AnimatedVectorDrawable'ten anlaşıldığı için Android 13 için bu gerekli değildir.

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>

  3. Başlangıç ekranı simgesi animasyonunun süresini belirtmek için windowSplashScreenAnimationDuration öğesini kullanın. Bu ayarın, açılış ekranının gösterildiği gerçek süre üzerinde herhangi bir etkisi yoktur ancak SplashScreenView.getIconAnimationDuration kullanarak açılış ekranı çıkış animasyonunu özelleştirirken bu değeri alabilirsiniz. Daha fazla bilgi için açılış ekranını ekranda daha uzun süre tutma ile ilgili aşağıdaki bölüme bakın.

    <item name="android:windowSplashScreenAnimationDuration">1000</item>

  4. Başlangıç ekranı simgesinin arkasına arka plan ayarlamak için windowSplashScreenIconBackgroundColor simgesini kullanın. Bu seçenek, pencere arka planı ile simge arasında yeterli kontrast yoksa yararlı olur.

    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

  5. Başlangıç ekranının alt kısmında gösterilecek bir resim ayarlamak için windowSplashScreenBrandingImage öğesini kullanabilirsiniz. Ancak tasarım yönergeleri, marka resmi kullanmamanızı önerir.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

  6. Android 13 ve sonraki sürümlerde uygulamanızın başlangıç ekranında simgeyi her zaman gösterip göstermeyeceğini belirtmek için windowSplashScreenBehavior aracını kullanabilirsiniz. Varsayılan değer 0'dır. Bu değer, başlatma etkinliği splashScreenStyle öğesini SPLASH_SCREEN_STYLE_ICON olarak ayarlarsa başlangıç ekranında simgeyi görüntüler veya başlatma etkinliği bir stil belirtmiyorsa sistem davranışını uygular. Boş bir başlangıç ekranını hiçbir zaman göstermeyi tercih etmiyorsanız ve animasyonlu simgenin her zaman gösterilmesini istiyorsanız bu değeri icon_preferred olarak ayarlayın.

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>

Başlangıç ekranını daha uzun süre ekranda tutma

Uygulamanız ilk karesini çizer çizmez açılış ekranı kapatılır. Uygulama içi ayarları yerel diskten eşzamansız olarak yüklemek gibi küçük miktarda veri yüklemeniz gerekiyorsa uygulamayı askıya alarak ilk karesini çizmek için ViewTreeObserver.OnPreDrawListener kullanabilirsiniz.

Başlangıç etkinliğiniz çizimden önce sona ererse (ör. içerik görünümü ayarlanmadığı ve onResume'ten önce sona erdiği için) çizim öncesi dinleyiciye gerek yoktur.

Kotlin

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

Java

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

Başlangıç ekranını kapatma animasyonunu özelleştirme

Activity.getSplashScreen() simgesini kullanarak açılış ekranının animasyonunu daha da özelleştirebilirsiniz.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.doOnEnd { splashScreenView.remove() }

        // Run your animation.
        slideUp.start()
    }
}

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

        // Run your animation.
        slideUp.start();
    });
}

Bu geri çağırmanın başlangıcında başlangıç ekranındaki animasyonlu vektör çekilebilir işlemi başlar. Uygulamanın başlatılma süresine bağlı olarak, çizilebilir öğe animasyonunun ortasında olabilir. Animasyonun ne zaman başladığını öğrenmek için SplashScreenView.getIconAnimationStart öğesini kullanın. Simge animasyonunun kalan süresini aşağıdaki gibi hesaplayabilirsiniz:

Kotlin

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

Java

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

Ek kaynaklar