Başlangıç ekranları

SplashScreen API, Android 12'den itibaren uygulamaların animasyonlu olarak başlatılmasına olanak tanır. Bu kontroller arasında başlangıçta uygulamaya giriş hareketi, uygulama simgenizi gösteren bir başlangıç ekranı ve uygulamanıza geçiş yer alır. SplashScreen bir Window olup bu nedenle bir Activity anlamına gelir.

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

Başlangıç ekranı deneyimi, her uygulama lansmanına standart tasarım öğeleri katar. Bununla birlikte, uygulamanızın benzersiz marka özelliklerini koruyabilmesi için özelleştirilebilir.

SplashScreen platform API'sinin yanı sıra SplashScreen API'yi sarmalayan SplashScreen uyumlu kitaplığını da kullanabilirsiniz.

Başlangıç ekranı nasıl çalışır?

Kullanıcı, uygulama işlemi çalışmıyorken uygulamayı başlatırsa (soğuk başlatma) veya Activity oluşturulmamışsa (hazır başlatma) aşağıdaki etkinlikler gerçekleşir:

  1. Sistem, temaları ve tanımladığınız 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ı, çalışırken başlatma sırasında hiçbir zaman gösterilmez.

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

Başlangıç ekranı öğ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 uygulama simgesi, simge arka planı ve pencere arka planından oluşur:

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

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

1 Uygulama simgesi vektör çekilebilir olmalıdır. Statik veya animasyonlu olabilir. Animasyonların sınırsız bir süresi olabilse de 1.000 milisaniyeyi aşmamanızı öneririz. Başlatıcı simgesi varsayılan ayardır.

2 Simge arka planı, simge ile pencere arka planı arasında daha fazla kontrasta ihtiyacınız varsa isteğe bağlıdır. Uyarlanabilir simge kullanırsanız pencere arka planıyla yeterli kontrast varsa arka planı görüntülenir.

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 ayarlanmamışsa varsayılan olarak bu arka plan kullanılır.

Başlangıç ekranı boyutları

Başlangıç ekranı simgesi, aşağıdaki gibi uyarlanabilir simgeler ile aynı spesifikasyonları kullanır:

  • Markalı resim: 200×80 dp olmalıdır.
  • Arka planı simgeli uygulama simgesi: 240×240 dp boyutunda olmalı ve 160 dp genişliğindeki bir daire içine sığmalıdır.
  • Simge arka planı olmayan uygulama simgesi: 288×288 dp boyutunda olmalı ve 192 dp genişliğindeki bir daire içine sığmalıdır.

Örneğin, bir resmin tam boyutu 300×300 dp ise simgenin çapı 200 dp olan bir dairenin içine 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 resim
Şekil 3. Sırasıyla düz ve şeffaf arka planlar için başlangıç ekranı simgesinin 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, bariz bir estetik çekicilik sağlar ve daha üst düzey bir deneyim sunar. Kullanıcı araştırmaları, animasyon izlerken algılanan başlatma süresinin daha kısa olduğunu göstermektedir.

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

Başlatıcı simgesine dokunulmasıyla başlayan ve simge büyüdükçe ekranı dolduran, art arda on iki karede başlatma sırasını gösteren resim
Şekil 4. Adım sırasını başlat.
  1. Animasyon girin: Başlangıç ekranının sistem görünümünden oluşur. Sistem tarafından kontrol edilir ve özelleştirilemez.

  2. Başlangıç ekranı (dizinin "bekleme" bölümünde gösterilir): Başlangıç ekranı özelleştirilebilir. Böylece kendi logo animasyonunuzu ve markalamanızı sağlayabilirsiniz. Etiketin düzgün çalışması için bu sayfada açıklanan gereksinimleri karşılaması gerekir.

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

Simge animasyonunu çalıştırırken uygulama başlatma, uygulamanın daha önce hazır olduğu durumlarda diziyi atlama seçeneği sunar. Uygulama onResume() işlemini tetikler veya başlangıç ekranı otomatik olarak zaman aşımına uğrar. Bu nedenle, hareketin rahatça atlanabileceğinden emin olun. Başlangıç ekranı, yalnızca uygulama görsel olarak sabit olduğunda onResume() ile kapatılmalıdır. Bu nedenle ek değer değiştiriciye gerek yoktur. Eksik bir arayüz kullanmak, kullanıcılar açısından rahatsız edici olabilir ve öngörülemez veya iyi görünmeyen izlenimi yaratabilir.

Başlangıç ekranı animasyon gereksinimleri

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

  • Saydamlık içermeyen tek bir pencere arka plan rengi ayarlayın. Gündüz ve Gece modu, SplashScreen uyumlu kitaplığı ile desteklenir.

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

    • Biçim: Simge, bir AnimatedVectorDrawable (AVD) XML'i olmalıdır.
    • Boyutlar: Ortalama görüntüleme süresi simgesi, aşağıdaki gibi uyarlanabilir simgenin dört katı boyutunda olmalıdır:
      • Simge alanı 432 dp, yani maskelenmemiş uyarlanabilir simgenin 108 dp alanının dört katı olmalıdır.
      • Resmin içteki üçte ikisi başlatıcı simgesinde görülebilir ve 288 dp, yani uyarlanabilir bir simgenin iç 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. Uygulamanın başlatma süresi 1.000 ms'den uzunsa döngülü bir animasyon kullanmayı düşünün.
  • Başlangıç ekranını kapatmak için uygulamanız ilk kareyi çizdiğinde uygun bir zaman belirleyin. Bunu, başlangıç ekranını daha uzun süre ekranda tutma bölümünde açıklanan şekilde daha da özelleştirebilirsiniz.

Başlangıç ekranı kaynakları

Şekil 5. Örnek ortalama görüntüleme süresi.

Animasyonların nasıl oluşturulacağını, biçimlendirileceğini ve AAD'ye nasıl dışa aktarılacağını gösteren örnek başlangıç setini indirin. Şunları içerir:

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

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

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

Uygulamanızın 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.

Aşağıdakilerden 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.

  • Videonuzu daha uzun bir süre ekranda tutun.

  • Animasyonu başlangıç ekranını kapatacak şekilde özelleştirin.

Başlayın

Temel SplashScreen kitaplığı, Android 12 başlangıç ekranını API 23'ten tüm cihazlara taşır. Projenize eklemek için aşağıdaki snippet'i build.gradle dosyanıza 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 zaten varsa Android 12 ve sonraki sürümler için alternatif bir kaynak dosyası sağlamanız önerilir.

  1. Arka planı belirli bir renkle doldurmak için windowSplashScreenBackground 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 canlandırılabiliyor ve AnimationDrawable ve AnimatedVectorDrawable ile çekilebiliyorsa windowSplashScreenAnimationDuration öğesini başlangıç penceresini gösterirken animasyonu oynatacak şekilde ayarlayın. Süre doğrudan AnimatedVectorDrawable aracılığıyla tahmin edildiğinden bu işlem Android 13'te gerekli değildir.

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
    
  3. Başlangıç ekranı simgesi animasyonunun süresini belirtmek için windowSplashScreenAnimationDuration değerini kullanın. Bunu ayarlamanın başlangıç ekranının gösterildiği gerçek süre üzerinde herhangi bir etkisi yoktur, ancak SplashScreenView.getIconAnimationDuration kullanarak başlangıç ekranından çıkış animasyonunu özelleştirirken bunu alabilirsiniz. Daha fazla ayrıntı için başlangıç ekranını uzun süre ekranda tutma hakkındaki aşağıdaki bölüme bakın.

    <item name="android:windowSplashScreenAnimationDuration">1000</item>
    
  4. Başlangıç ekranı simgesinin arkasına bir arka plan ayarlamak için windowSplashScreenIconBackgroundColor kullanın. Bu, 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 kullanabilirsiniz. Ancak tasarım yönergelerinde, marka resmi kullanmamanız önerilir.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
    
  6. Android 13 ve sonraki sürümlerde uygulamanızın başlangıç ekranında simgenin her zaman görüntülenip görüntülenmeyeceğ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 veya başlatma etkinliği bir stil belirtmiyorsa sistem davranışını izlerse başlangıç ekranında simgeyi görüntüler. Hiçbir zaman boş başlangıç ekranı görüntülememeyi tercih ediyor ve her zaman animasyonlu simgenin görüntülenmesini istiyorsanız bunu icon_preferred değerine ayarlayın.

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

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

Uygulamanız ilk karesini çizer çizmez başlangıç ekranı kapanır. Uygulama içi ayarları yerel bir diskten eşzamansız olarak yüklemek gibi az miktarda veri yüklemeniz gerekiyorsa uygulamayı ilk karesini çizmek için askıya almak için ViewTreeObserver.OnPreDrawListener kullanabilirsiniz.

Başlangıç etkinliğiniz çizimden önce bitiyorsa (örneğin, içerik görünümünü ayarlamayarak ve onResume öncesinde bitirerek) önceden çizim işleyicisine 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ı kapatmak için animasyonu özelleştirme

Başlangıç ekranının animasyonunu Activity.getSplashScreen() ile 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şlatılmasıyla birlikte başlangıç ekranındaki animasyonlu vektör çekilebilir başlar. Çekilebilir, uygulamanın başlatılmasının süresine bağlı olarak animasyonunun ortasında olabilir. Animasyonun ne zaman başladığını öğrenmek için SplashScreenView.getIconAnimationStart değerini kullanın. Simge animasyonunun kalan süresini aşağıdaki ş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