“Facebook Shimmer”: Yükleniyor Ekranlarını Şıklaştırıyoruz!

2 min read4 days ago

Giriş

Merhaba arkadaşlar! 👋 Uygulama geliştirme sırasında hepimiz “loading” ekranlarıyla karşılaşıyoruz, dimi? Uzun veri yükleme süreçlerinde boş sayfalar kullanıcılara hoş bir deneyim sunmuyor. İşte tam da bu noktada, Facebook Shimmer beliriyor! Hem göz alıcı bir animasyon hem de kullanıcıya sayfanın yüklendiğini hissettiren harika bir efekt.

Hadi gelin, birlikte bu parıldayan SDK’ı keşfedelim! 💫

Shimmer Nedir?

Shimmer dediğimiz bu güzel SDK, veri yüklenirken gösterilen boş placeholder’ların üzerine animasyon ekleyerek kullanıcıya bir yükleniyor hissi verir. Hem şık görünür hem de bekleme sürecini daha katlanılabilir hale getirir. Yani kısaca, o sıkıcı boş sayfalara veda ediyoruz! 🙌

Neden Shimmer Kullanmalıyız?

1. UX Artısı
Kullanıcılar, boş sayfaları sevmezler. Shimmer sayesinde sayfanın yüklendiğini anlarlar ve bekleme süresi daha az rahatsız edici olur.

2. Daha Dinamik Görüntü
Animasyonlarla zenginleştirilmiş “loading” ekranları, uygulamanızı daha canlı ve profesyonel gösterir. Bu, özellikle veri yoğun uygulamalarda büyük bir artıdır.

Shimmer Nasıl Kullanılır?

Projene Facebook Shimmer’ı dahil etmek oldukça basit. Hadi adım adım nasıl yapabileceğimizi görelim:

1. Shimmer Kütüphanesini Dahil Et:
build.gradle dosyamıza şu satırı ekleyerek başlıyoruz:

implementation ("com.facebook.shimmer:shimmer:0.5.0")

2. XML’de Shimmer Efektini Ekleyelim:
Şimdi Shimmer efektini hangi view üzerinde kullanacaksan, ona bir ShimmerFrameLayout ekliyoruz:

<!-- ... -->
<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:shimmer_auto_start="true">
    
    <!-- Buraya view’ları koyuyoruz. -->
    <View
        android:layout_width="mach_parent"
        android:layout_height="wrap_content"
        android:background="@color/gray" />
        
</com.facebook.shimmer.ShimmerFrameLayout>
<!-- ... -->

3. Shimmer’ı Kotlin’de Yönetmek:
Shimmer animasyonunu başlatmak veya durdurmak da oldukça kolay:

private fun startShimmer() {
    binding.scrollView.visibility = View.INVISIBLE
    binding.shimmerContainer.visibility = View.VISIBLE
    binding.shimmerContainer.startShimmer()
}
// Ana layoutumuzu gizleyerek Shimmer'ı gösteriyoruz.

private fun stopShimmer() {
   CoroutineScope(Dispatchers.Main).launch {
        delay(2000)
        binding.scrollView.visibility = View.VISIBLE
        binding.shimmerContainer.visibility = View.GONE
        binding.shimmerContainer.stopShimmer()
    }
}
// Buradaki delay isteğe göre ben veriler çekildikten sonra 
// view'e yüklendiği gözükmemesi için ekledim :)

Kapanış

Shimmer ile uygulamalarınıza sadece işlevsellik değil, estetik katabilirsiniz. Özellikle veri yüklemeleri sırasında, bu tür animasyonlar kullanıcıya büyük bir rahatlık sağlar. Artık yükleniyor ekranları daha az sıkıcı ve çok daha şık olacak!

Bir sorunuz olursa bana aşağıdaki iletişim kanallarından ulaşabilirsiniz.

Şimdiden iyi kodlamalar! 😎🚀

İletişim:

Web Sitesi
Email: yunusemre-kurt@outlook.com
Detaylı Kaynak: Facebook Shimmer

Hoşça kalın!