Overlay Window ile Chatheads Geliştirme

 

Bugün hep beraber Facebook ile popüler olmuş ve yavaş yavaş YouTube, Pocket ve son olarak Skype tarafından kullanılmaya başlanan "overlay drawing" tekniğini kendi uygulamamız için nasıl kullanabileceğimize bir bakalım.

Aslında overlay drawing tekniğini Android'in Window Manager'ını kullanarak sanal bir "çok görevlilik" (multitasking) ortamı oluşturma ve birden çok uygulama arasında geçişi kolaylaştıran farklı bir uygulama geliştirme yaklaşımı olarak açıklayabiliriz.

Bizim bu iş için başvuracağımız tüyo, öncelikle Android tarafında SYSTEM_ALERT_WINDOW yetkisini alarak normal Window üzerine yarı geçirgen-transparan herhangi bir View'ı çizmeye ve yerleştirmeye dayanıyor. View, overlay (kaplama) olarak konulduğundan dolayı, kilit ekranı hariç bütün uygulamalarımızın üzerine kendini konumlandırabiliyor. Bu işlemi gerçekleştirebilmek için

1. Öncelikle bir servis tanımlıyoruz.

[code]public class OverlayService extends Service{
//...
}[/code]

2. Daha sonra Window Manager servisini kullanmamız gerektiğinden, yazacağımız servisin onCreate() metodundayken getSystemService() metodu ile Window servisine erişiyoruz:

[code]WindowManager windowManager = (WindowManager) this.getSystemService(WINDOW_SERVICE);[/code]

Bu servis bize aşağıdaki metotlarla View'ları yönetme olanağı sunuyor:

• addView()
• removeView()
• updateViewLayout()

3. Ayrıca kullanacağımız View'ı XML dosyasından okuyacağımızdan bir LayoutInflater sınıfına ihtiyacımız var. Bunu LayoutInflater.from(this) ile (OverlayService:59) servis üzerinden doğrudan yaratabiliyoruz.

4. Daha sonra layoutInflater.inflate(R.layout.activity_main, null) çağrısıyla View'ımızı XML'den deserialize edip yaratıyoruz ve artık WindowManager ile kullanıma hazır halde.

5. Daha sonra WindowManager.addView() ile deserialize ettiğimiz View'ımızı doğrudan ekranımıza ekliyoruz.

[code]layoutView = inflater.inflate(R.layout.activity_main, null);
windowManager.addView(layoutView, params); [/code]

Burada WindowManager'a yeni View'ımızı eklerken aşağıdaki parametreleri kullanıyoruz:

[code]params = new WindowManager.LayoutParams(
                WindowManager.LayoutParams.WRAP_CONTENT,
                WindowManager.LayoutParams.WRAP_CONTENT,
                WindowManager.LayoutParams.TYPE_PRIORITY_PHONE,
                LayoutParamFlags,
                PixelFormat.TRANSLUCENT);

params.gravity = Gravity.TOP | Gravity.LEFT;[/code]

Bu parametreler eklediğimiz View'ın ilk olarak ekranın sol üst köşesinde çıkmasını, içine koyduğumuz View'ı olduğu gibi sarmasını, standart olarak kullanılan halinin yarı-geçirgen (yarı şeffaf) olmasını, ayrıca Window tipinin Priority Phone olarak ayarlanmış olmasını sağlıyor.

6. Daha sonra View'ımız içinde bulunan ImageView'ı layoutView.findViewById() ile alıp üzerine gerekli listenerları register ediyoruz.

Projede ben iki tane listener register ettim: Birincisi OnClickListener, ikincisi OnTouchListener.

OnTouchListener sayesinde, kullanıcının oluşturmuş olduğumuz ikonu ekran üzerinde sürükleyip bırakması için gerekli işlemleri yapıyoruz. OnClickListener sayesinde de kullanıcının ikonu tıklaması sonucunda gerekli web sayfasının açılmasını sağlıyoruz.

Aşağıda bağlantısını da verdiğim projemiz çalıştığında şöyle gözükecektir:

İmplementasyonla ilgili kod bloklarına ve ayrıntılarına şuradaki projemden ulaşabilirsiniz: https://github.com/keremkusmezer/OverlayDemo