Facebook Chat Baloncuğu Gibi Widgetlar Oluşturma

Kullanıcı Android cihazda ekran görüntüsüne bakılmaksızın, arayüz üzerinde bir görselin kaydırma işlemi yapmak ya da arayüz de ilgili görsel kapatmadan kenarda bırakıp, başka uygulamalar açarak farklı işlevler de yapmak isteyebilir. Örneğin, kullanıcı hesap makinesi uygulaması açıkken, Widget içinde olan müzik çaları açıp , müziği aynı anda kontrol etmek gibi taleplerde bulunabilir. Hatta Facebook Chat baloncuğu da bu mantığı barındırmaktadır. İşte bu gibi işlemleri yapabilmek için Floating Widgets yapısını kullanmanız gerekir.

Bu yazıda basit bir örnekle Floating Widgets’ın nasıl oluşturulacağını öğreneceğiz.

İlk öncelikle örneğimizin çalışır halini inceleyelim.

Şimdi bu örneği nasıl yapacağımızı bakalım.

1- Yapılış Mantığını Anlama

Floating widget, diğer uygulamaların üzerine çizilen bir görünümden başka bir şey değildir. Android sistemi, uygulamanın android.permission.SYSTEM_ALERT_WINDOW iznine sahip olması durumunda, uygulamanın diğer uygulama üzerinde çizmesine izin verir.  Geçerli ekranın view hiyerarşisine  floating widget’i eklemek için arka plan servisini kullanacağız.

2-Projede Yapılması Gereken Ayarlar

1- Bu linkden indirdiğiniz res.zip’i içindeki tüm dosyaları, yeni oluşturduğunuz projedeki res dizinin içine yerleştiriniz.

2- AndroidManifest.xml dosyasında android.permission.SYSTEM_ALERT_WINDOW iznini veriniz.Sonrasında FloatingViewService adında bir Java sınıfı oluşturup AndroidManifest.xml dosyasında da asağıdaki gibi service tag ekleyiniz.

3- Xml Kodları

Layout dizininde layout_floating_widget.xml  arayüz dosyasını oluşturunuz. Aşağıdaki kodu ekleyiniz.

Collapsed view

Yuvarlak şeklindeki kaset resimli olan görüntünün , Android ekran üzerinde gösterilmesi sağlayan bölümdür.

Expanded View

Yuvarlak ikona tıkladığında ekranda açılan müzik çalar alanının gösterilmesi sağlayan bölümdür.

 

4- Java Kodları

Bu adıma kadar Floating Widget kullanımıyla alakalı daha çok gerekli ayarları yaptık. Hem olayı bütün olarak görmeniz hemde Java, Xml kod tarafını daha iyi anlayabilmeniz için son kod kısmını aşağıda vermiş olduğum Kod İndir resmine tıklayarak github’a yüklemiş olduğum projeyi indirip, incelemenizi isteyeceğim. Java kodlarının içinde bir sürü türkçe açıklama bulunmaktadır. 😉

download

 

Kaynaklar

1- http://www.androhub.com/android-floating-widget-like-facebook-messenger-chat-head/

2- http://www.androidhive.info/2016/11/android-floating-widget-like-facebook-chat-head/

 

 

Kategori Genel
Etiketler