Başlangıç ekranları

Android 12'den itibaren SplashScreen API'si, 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, Window olduğundan Activity kapsar.

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

Başlangıç ekranı deneyimi, her uygulama başlatma işlemine standart tasarım öğeleri getirir ancak uygulamanızın benzersiz markasını 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ışmıyorken (baştan başlatma) veya Activity oluşturulmamışken (hazır durumda başlatma) uygulamayı başlattığında aşağıdaki etkinlikler gerçekleşir:

  1. Sistem, tanımladığınız temaları ve animasyonları kullanarak başlangıç ekranını gösterir.

  2. Uygulama hazır olduğunda başlangıç ekranı kapatılır ve uygulama görüntülenir.

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

Başlangıç ekranının öğeleri ve mekanikleri

Başlangıç ekranının öğeleri, Android manifest dosyasındaki XML kaynak dosyaları tarafından tanımlanır. Her öğenin açık ve koyu mod sürümleri vardır.

Başlangıç ekranının özelleştirilebilir öğeleri arasında uygulama simgesi, simge arka planı ve pencere arka planı bulunur:

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

Şekil 2'de gösterilen aşağıdaki öğeleri inceleyin:

1 Uygulama simgesi, drawable vektör olmalıdır. Statik veya hareketli olabilir. Animasyonların süresi sınırsız olabilir ancak 1.000 milisaniyeyi aşmamanızı öneririz. Başlatıcı simgesi varsayılan simgedir.

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 maskelenir.

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

Başlangıç ekranı boyutları

Başlangıç ekranı simgesi, uyarlanabilir simgelerle aynı özellikleri kullanır:

  • Markalı resim: 200×80 dp olmalıdır.
  • Simge arka planı olan uygulama simgesi: Bu simge 240×240 dp boyutunda olmalı ve 160 dp çapında bir daireye sığmalıdır.
  • Simge arka planı olmayan uygulama simgesi: Bu simge 288×288 dp boyutunda olmalı ve 192 dp çapında bir daireye sığmalıdır.

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

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

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

Ek gecikme genellikle bir uygulamanın baştan başlatılmasıyla ilişkilendirilir. Başlangıç ekranınıza animasyonlu bir simge eklemek, estetik açıdan daha çekici ve daha kaliteli bir deneyim sunar. Kullanıcı araştırmaları, animasyon izlerken algılanan başlatma süresinin daha kısa olduğunu gösteriyor.

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

Başlatıcı simgesine dokunulmasıyla başlayan ve simge büyüyerek ekranı doldururken on iki ardışık karede başlatma sırasını gösteren bir resim
Şekil 4. Başlatma sırası.
  1. Giriş animasyonu: Bu, sistem görünümünden başlangıç ekranına geçişi içerir. 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şılaması gerekir.

  3. Çıkış animasyonu: Başlangıç ekranını gizleyen animasyondan oluşur. Özelleştirmek isterseniz SplashScreenView ve simgesini kullanın. Dönüştürme, opaklık ve renk ayarlarıyla bu öğeler üzerinde istediğiniz animasyonu çalıştırabilirsiniz. Bu durumda, animasyon tamamlandığında başlangıç ekranını manuel olarak kaldırın.

Simge animasyonu çalıştırılırken uygulama başlatma, uygulamanın daha erken hazır olduğu durumlarda sırayı atlama seçeneği sunar. Uygulama onResume() tetikliyor veya başlangıç ekranı otomatik olarak zaman aşımına uğruyor. Bu nedenle, hareketin kolayca atlanabildiğinden emin olun. Başlangıç ekranı yalnızca uygulama görsel açıdan kararlı olduğunda onResume() ile kapatılmalıdır. Böylece ek dönen simgelere gerek kalmaz. Tamamlanmamış bir arayüz sunmak kullanıcılar için rahatsız edici olabilir ve öngörülemezlik veya özensizlik izlenimi verebilir.

Başlangıç ekranı animasyonuyla ilgili koşullar

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

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

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

    • Biçim: Simge, AnimatedVectorDrawable (AVD) XML olmalıdır.
    • Boyutlar: AVD simgesi, uyarlanabilir simgenin dört katı büyüklükte olmalıdır:
      • Simge alanı 432 dp olmalıdır. Diğer bir deyişle, maskelenmemiş uyarlanabilir simgenin 108 dp'lik alanının dört katı olmalıdır.
      • Resmin içteki üçte ikilik kısmı başlatıcı simgesinde görünür ve 288 dp olmalıdır. Diğer bir deyişle, uyarlanabilir simgenin içteki maskelenmiş 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. Uygulama başlatma süresi 1.000 ms'den uzunsa döngüsel animasyon kullanabilirsiniz.
  • Uygulamanız ilk karesini çizerken başlangıç ekranını kapatmak için uygun bir zaman belirleyin. Başlangıç ekranını daha uzun süre ekranda tutma ile ilgili bölümde açıklandığı şekilde bu ekranı daha da özelleştirebilirsiniz.

Başlangıç ekranı kaynakları

Şekil 5. Örnek AVD.

Animasyon oluşturma, biçimlendirme ve AVD'ye aktarma işlemlerinin nasıl yapıldığını gösteren örnek başlangıç kitini indirin. Bu, aşağıdakileri içerir:

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

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

Google Gizlilik Politikası'nda, bu hizmette verilerin nasıl işlendiği açıklanmaktadır.

Uygulamanızdaki başlangıç ekranını özelleştirme

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

Uygulamanızın başlangıç ekranını aşağıdaki yöntemlerden birini kullanarak özelleştirebilirsiniz:

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

  • Ekranda daha uzun süre tutun.

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

Başlayın

Temel SplashScreen kitaplığı, Android 12 başlangıç ekranını API 23'ten itibaren tüm cihazlara getirir. Projenize eklemek için build.gradle dosyanıza aşağıdaki snippet'i ekleyin:

Modern

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 ayarlayın.

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 varsa Android 12 ve sonraki sürümler için alternatif bir kaynak dosyası sağlamayı düşünebilirsiniz.

  1. Arka planı belirli 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, AnimationDrawable ve AnimatedVectorDrawable aracılığıyla canlandırılabilir ve çizilebilir ise başlangıç penceresini gösterirken animasyonu oynatmak için windowSplashScreenAnimationDuration değerini ayarlayın. Süre doğrudan AnimatedVectorDrawable üzerinden çıkarıldığı için Android 13'te bu gerekli değildir.

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
    
  3. Başlangıç ekranı simge animasyonunun süresini belirtmek için windowSplashScreenAnimationDuration kullanın. Bu ayar, başlangıç ekranının gösterildiği gerçek süre üzerinde herhangi bir etkiye sahip değildir ancak SplashScreenView.getIconAnimationDuration kullanarak başlangıç ekranı çıkış animasyonunu özelleştirirken bu ayarı alabilirsiniz. Daha fazla bilgi için başlangıç ekranını daha uzun süre ekranda 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 kullanın. Bu, pencere arka planı ile simge arasında yeterli kontrast olmadığında kullanışlıdır.

    <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 imajı kullanılmasını önermez.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
    
  6. Uygulamanızın Android 13 ve sonraki sürümlerde başlangıç ekranında her zaman simge gösterip göstermeyeceğini belirtmek için windowSplashScreenBehavior kullanabilirsiniz. Varsayılan değer 0'dır. Bu değer, başlatma etkinliği splashScreenStyle değerini SPLASH_SCREEN_STYLE_ICON olarak ayarlarsa simgeyi başlangıç ekranında gösterir veya başlatma etkinliği bir stil belirtmezse sistem davranışını izler. Boş bir başlangıç ekranının hiçbir zaman gösterilmemesini ve animasyonlu simgenin her zaman gösterilmesini tercih ediyorsanı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 çizdiğinde başlangıç ekranı kapatılır. Yerel diskten uygulama içi ayarları eşzamansız olarak yüklemek gibi az miktarda veri yüklemeniz gerekiyorsa uygulamanın ilk karesini çizmesini askıya almak için ViewTreeObserver.OnPreDrawListener kullanabilirsiniz.

Başlangıç etkinliğiniz çizimden önce tamamlanırsa (örneğin, içerik görünümü ayarlanmazsa ve onResume öncesinde tamamlanırsa) ç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

Başlangıç ekranının animasyonunu Activity.getSplashScreen() aracılığıyla 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ğırma başladığında başlangıç ekranındaki animasyonlu drawable vektör başlar. Uygulama başlatma süresine bağlı olarak çizilebilir öğe, animasyonunun ortasında olabilir. Animasyonun ne zaman başladığını öğrenmek için SplashScreenView.getIconAnimationStart kullanın. Simge animasyonunun kalan süresini şu şekilde 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