Flashlightoverlay

Overlay Window İleFlashLight
Merhaba arkadaşlar. Sizlere facebook messenger da kullanılan Overlay Window(ChatHeads) metoduyla bataryanın durumunu da gösteren transparan el feneri uygulamasının bitmiş halini göstereceğim.
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.

Proje Oluşturma Ve Kodlama Kısmına Giriş
File-New-Androd Application
Project Seçiyoruz

Projemiz için bir ad belirliyoruz.İsterseniz bu projenin çalışacağı
Android sürüm aralığını seçebilirsiniz.

Burada uygulamamızı görsel olarak
tasarlayacağımız layout kısmını
Seçiyoruz.

Son olarak burada;otomatik
Olarak oluşacak olan .java
class’ımızın ismini ve res-layout
‘da xml layout’ umuza isim
veriyoruz.

Kodlamaya Giriş
MainActivty.java

MainActivity.java
package com.example.overlyflashlight;
//Yeni proje oluştururken uygulamaya verdiğimiz isim olarak paket ismi atadı
//paket ismi eşşiz olmalıdır.Bu yüzden geliştiriciler genellikle paket isimlerini web sitelerine ait url lerini koyar. Örn: com.stackcuriosity.UygulamaIsmi
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
İmport ifadesi ile bize gerekli olan kütüphane dosyalarını getirir

MainActivity.java
public class MainActivity extends Activity {
//Class ismimiz ve extends ( Kısaca bir sınıfın başka bir sınıftaki methodlara //ve değişkenlere sahip olabilmesi için yapılan işlemdir.) ettiğimiz Activity //class ımız.
@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
Intent overlayIntent = new Intent();
overlayIntent.setClass(this, OverlayService.class);
this.startService(overlayIntent);
finish();
 }
Bu class’ımzı asıl işlemi Yaptığımız OverlayService Class ımızı tetiklemesi için Kullanacağız.Bu yüzden Burada ir intent tanımladık ve service class’ımızı bu mainactivity class’a atadık sonrada finish() metoduyla kapattık.

Kodlamaya Giriş
OverlayService.java

OverlayService.java
Bu class’ımız asıl işlemin overlay tekniğini kullandığımız class’ımız.
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

OverlayService.java
Öncelikle bir servis tanımlıyoruz.
public class OverlayService extends Service{
//
}

OverlayService.java
Daha sonra Window Manager servisini kullanmamız gerektiğinden, yazacağımız servisinonCreate() metodundayken getSystemService() metodu ile Window servisine erişiyoruz:
WindowManager windowManager = (WindowManager) this.getSystemService(WINDOW_SERVICE);

OverlayService.java
Bu servis bize aşağıdaki metotlarla View'ları yönetme olanağı sunuyor:
addView()
removeView()
updateViewLayout()

OverlayService.java
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.
 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.
 Daha sonra WindowManager.addView() ile deserialize ettiğimiz View'ımızı doğrudan ekranımıza ekliyoruz.

OverlayService.java
Daha sonra WindowManager.addView() ile deserialize ettiğimiz View'ımızı doğrudan ekranımıza ekliyoruz.
layoutView=inflater.inflate(R.layout.activity_main,null);
windowsManager.addView(layoutView,params);

OverlayService.java
Burada WindowManager'a yeni View'ımızı eklerken aşağıdaki parametreleri kullanıyoruz
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;

OverlayService.java
Yukarıdaki 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.
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 flaş ışığının açılmasını sağlıyoruz.

OverlayService.java: Kaynak Kodları
public class OverlayService extends Service{
private static final int LayoutParamFlags = WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH
| WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
| WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
| WindowManager.LayoutParams.FLAG_DISMISS_KEYGUARD
| WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED;

private LayoutInflater inflater;
private Display mDisplay;
private View layoutView;
private WindowManager windowManager;
private WindowManager.LayoutParams params;
private View.OnTouchListener touchListener;
private View.OnClickListener clickListener;
int key=0;//1-buton on-off özelliği için
private TextView batteryPercent;//batarya durumu %
static int level ;//bataryanın doluluk oranı
private ProgressBar pbar; // progressbar tanımladık
//Flash için camera ayarları
private boolean flashVarMi;
private boolean flashAcikMi;
private Camera camera;
Parameters paramsCam;

private DisplayMetrics calculateDisplayMetrics() {
DisplayMetrics mDisplayMetrics = new DisplayMetrics();
mDisplay.getMetrics(mDisplayMetrics);
return mDisplayMetrics;
}
@Override
public IBinder onBind(Intent intent) {
return null;
}

@Override
public void onCreate() {
super.onCreate();
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;
windowManager = (WindowManager) this.getSystemService(WINDOW_SERVICE);
mDisplay = windowManager.getDefaultDisplay();
inflater = LayoutInflater.from(this);
layoutView = inflater.inflate(R.layout.activity_main, null);
windowManager.addView(layoutView, params);
Ayrıntıları yukardaki açıklamıştım.

//Şimdi burada hem transparan hemde slidingDrawer olarak bildiğimiz açılır kapanır bir Transparent.java class ımızda tanımladığımız özel bir layout tanımladık.
DrawerLayout nedir ? Ana activity` yi oluşturduğumuzda Layout olarak bununla eşleştireceğiz. Bu bizim soldan gelen menunun oluşması için android` in sağlamış olduğu bi düzen.Aslında bizim burada yaptığımız custom(özelleştirdimiz)drawer layouttur.
final Transparent popup = (Transparent) layoutView.findViewById(R.id.popup_window);
 popup.setVisibility(View.GONE);
final ImageButton button = (ImageButton) layoutView.findViewById(R.id.toggle);
getCam(); //burası flash açmak için telefonun kamerasına bağlandığımız yer.

clickListener = new OnClickListener() { //yukarda bahsettik.
@Override
public void onClick(View view) {
try {
if(key==0){ //burada key dediğimiz aslında butona basıldığında ne yapılacağı eyer key sıfır ise flaş açıktır.
key=1; //key sıfır yaptıktan sonra bu metot’a giriliecek ve bu metottaki kodlarımız çalışcak birdaha butona bastığında kapanması için key’e bir değerini atıyoruz
try {
popup.setVisibility(View.VISIBLE); //slidingDrawer, buton tıklandğında açılması için
view.setBackgroundResource(R.drawable.flashon); //butonun şeklini değiştiriyoruz
if(camera==null){
getCam(); //Burası çok önemli* eyer bu metot’u belirtmezsek ilerde göstericem flash ı tamamen kapattığımızda(release ettiğimizde) tekrar açmaya çalıştığımızda çalışmaz
}

 yukarı slaytın devamı;
getBatteryPercentage(); // oluşturdumuz batarya durumunu okumak için metodu burada kullandık.
flashAc(); //flashı açmak için gerekli kodları tanımladığımız metot.
} catch (Exception e) {
//Olası bir hata durumunda hata buraya düşer sizde buradan alıp logcat vs. araçlarla hatayı görebilirsiniz
}
}

else if(key==1){ //key’i bir yapmıştık bu durumda butona tıklanması halinde bu kod bloğu //çalışacaktır ve flashKapanacaktır.
key=0; //bu kod bloğu çalıştığında tekrar 0 yapıyoruz ki butona bidaha tıklarsa flash açılsın die
try {
popup.setVisibility(View.GONE); //slidingDrawer butona tıklanıp flash kapandığında kapanması için.
flashKapa(); //flash’ı kapattığımız metot
if (camera != null) {
 /*dediğimiz önemli metot* arkadaşlar bunu önemli cılan uygulamamız overlay Windows şeklinde tanımladık yani sürekli ekranda açıkkalacak şekilde böyle olunca flash her zaman açık kalmıyacak eyer biz bu metot ‘u tanımlamazsak flash açık olmasa bile kamerayı kullanmaya devam edecektir.Bu durum da başka bir camerayı kullanan bir uygulama açmaya çalıştığınızda kamerayı kullanamamanıza ve hata almanıza sebeb olacaktır.*/

camera.release(); //kamerayı bırakması için.
camera = null;
}
view.setBackgroundResource(R.drawable.flashoff); // butonun şeklini değiştirme
// TODO: handle exception
}
}
} catch (Exception ex) {
}

touchListener = new View.OnTouchListener() {
private int initialX;
private int initialY;
private float initialTouchX;
private float initialTouchY;
private long downTime;
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downTime = SystemClock.elapsedRealtime();
initialX = params.x;
initialY = params.y;
initialTouchX = event.getRawX();
initialTouchY = event.getRawY();
return true;
Açıklama kısmında bahsettik

case MotionEvent.ACTION_UP:
long currentTime = SystemClock.elapsedRealtime();
if (currentTime - downTime < 200) {
v.performClick();
} else {
updateViewLocation();
}
return true;
case MotionEvent.ACTION_MOVE:
params.x = initialX + (int) (event.getRawX() - initialTouchX);
params.y = initialY + (int) (event.getRawY() - initialTouchY);
windowManager.updateViewLayout(layoutView, params);
return true;
}
return false;
}

private void updateViewLocation() {
DisplayMetrics metrics = calculateDisplayMetrics();
int width = metrics.widthPixels / 2;
if (params.x >= width)
params.x = (width * 2) - 10;
else if (params.x <= width)
params.x = 10;
windowManager.updateViewLayout(layoutView, params);
}
};
Kullanıcın Ekran daki butonu sürüklediğinde,yeri değiştiğinde güncelleme metot’umuz .

button.setOnClickListener(clickListener);
layoutView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent arg1) {
return false;
}
});
button.setOnTouchListener(touchListener);
}
Bir önceki Metot davamı;kullanıcı butona tık- Ladığında gerçekleşmesi için;

Bu kod bloğu natifacation bar’a yerleştireceğimiz ve Window Service’i kapatmamıza yarayacak bir nevi kapat butonu görevi görecek bir sekme.
@Override
public int onStartCommand(Intent intent, int flags, int startId) {
if (intent.getBooleanExtra("stop_service", false)){
// If it's a call from the notification, stop the service.
stopSelf();
}else{
// Make the service run in foreground so that the system does not shut it down.
Intent notificationIntent = new Intent(this, OverlayService.class);
notificationIntent.putExtra("stop_service", true);
PendingIntent pendingIntent = PendingIntent.getService(this, 0, notificationIntent, 0);

Notification notification = new Notification(
R.drawable.flashactionbar, //natification bara icon atadık
"FlashLight Launch", // uygulama ilk başladığında gösterilecek
 System.currentTimeMillis());
notification.setLatestEventInfo(
this,
"FlashLight Başatıldı", //natifacation barı açtığınızda gözükecek başlık
 "FlashLight Kapatmak İçin Dokun.", //kullanıcıya gösterdimiz mesaj
 pendingIntent);
startForeground(86, notification);
}
return START_STICKY;
}

 private void getBatteryPercentage() { //bataryanın durumunu textView olarak bastımız metot
 BroadcastReceiver batteryLevelReceiver = new BroadcastReceiver() { //burada bataryayı dinliyoruz
 public void onReceive(Context context, Intent intent) {
 context.unregisterReceiver(this);
 int currentLevel = intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
 int scale = intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);

 if (currentLevel >= 0 && scale > 0) {
 level = (currentLevel * 100) / scale;
 }
 batteryPercent = (TextView) layoutView.findViewById(R.id.textView1); //textView tanımladık.
 batteryPercent.setText(level + "%"); //batarya durumunu % olarak ekrana yazdık

 pbar = (ProgressBar)layoutView. findViewById(R.id.progress_bar_horiz); //progress bar tanımladık
 Drawable draw = getResources().getDrawable(R.drawable.custom_progress_bar); //kendi custom progress bar’ımızı çizdik draw’a atadık
pbar.setProgressDrawable(draw);
 pbar.setProgress(level); //progress bara bataryanın yüzde durumunu gösterecek şekilde atadık

 }
 };
 IntentFilter batteryLevelFilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
 registerReceiver(batteryLevelReceiver, batteryLevelFilter);
 }

@Override
public void onDestroy() {
super.onDestroy();
if (camera != null) {
camera.release();
camera = null;
}
windowManager.removeView(layoutView);
}
onCreate() metodu ile oluşturulan bir aktivite, onDestroy() aktivitesi ile sonlandırılır. Bu metotla aktivite tamamen uygulamadan kaldırılır.

private void getCam() {
// TODO Auto-generated method stub
 if (camera == null) {
try{
 camera = Camera.open();
paramsCam = camera.getParameters();
 } catch (Exception e) {
 // TODO: handle exception
 }
}
}
Kameraya bağlandığımız ve camerayı bu uygulama için kullanacağımızı belirttimiz metot.

private void flashAc() {
 if (camera == null || params == null) {
return;
}
// play sound
try {
paramsCam.setFlashMode(Parameters.FLASH_MODE_TORCH);
camera.setParameters(paramsCam);
camera.startPreview();
flashAcikMi = true;
}
}
Flash’ı açtığımız metot İsterseniz buraya açıldığında ses çıkması için ekleme yapabilirsiniz.

 private void flashKapa() {
 if (camera == null || params == null) {
return;
}
// play sound
try {
paramsCam.setFlashMode(Parameters.FLASH_MODE_OFF);
camera.setParameters(paramsCam);
camera.stopPreview();
flashAcikMi = false;
}
Aynı şekil de flash’ı kapattığımız metotdur.

Kodlamaya Giriş
Transparent.java

Transparent.java: Kaynak Kodları
public class Transparent extends LinearLayout
{
private Paint innerPaint, borderPaint ;

public Transparent(Context context, AttributeSet as) { //constructor oluşturduk
super(context, as);
init();
}
public Transparent(Context context) {
super(context);
init();
}

Bu metotda custom olarak oluşturduğumuz slidingDrawer in sınırlarını çizdik
private void init() {
innerPaint = new Paint();
innerPaint.setARGB(50, 0, 0, 50); //arka planı şeffaf yapmak için yaptm
innerPaint.setAntiAlias(true);
borderPaint = new Paint();
borderPaint.setARGB(0, 0, 0, 0); //arka planı şeffaf yapmak için yaptm
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
}

public void setInnerPaint(Paint innerPaint) {
this.innerPaint = innerPaint;
}
public void setBorderPaint(Paint borderPaint) {
this.borderPaint = borderPaint;
}
En başta tanımladığımız private Paint innerPaint, borderPaint ‘in Sağ click-source-Generate getter and Setter dan setter ları oluşturduk

@Override
protected void dispatchDraw(Canvas canvas) {
RectF drawRect = new RectF();
drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
canvas.drawRoundRect(drawRect, 5, 5, borderPaint);
super.dispatchDraw(canvas);
 }
}
Son olarak da ekrana çizdik.

Kodlamaya Giriş
custom_dialog.xml

custom_dialog.xml: Kaynak Kod
<layer-list
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:id="@android:id/background">
 <shape>
 <corners
 android:radius="5dip" />
 <gradient
 android:startColor="#59ffffff"
 android:centerColor="#59ffffff"
 android:centerY="0.50"
 android:endColor="#59ffffff"
 android:angle="270" />
 </shape>
 </item>
Belirttiğim şeffaf beyazın alanını oluşturduk;
Burada startColor:üstten-ortaya kadar
centerColor:Ortayı
endColor’da:Alttan ortaya kadar olan alanın
Rengini verir.

 <item
 android:id="@android:id/secondaryProgress">
 <clip>
 <shape>
 <corners
 <gradient
 android:startColor="#770e75af"
 android:endColor="#771997e1"
 </shape>
 </clip>
 </item>
İkinci bir progress’i oluşturur.

<item
 android:id="@android:id/progress">
 <clip>
 <shape>
 <corners
 <gradient
 android:startColor="#01b427"
 android:endColor="#01b427"
 android:centerColor="#009920"
 </shape>
 </clip>
 </item>
</layer-list>
Progress’i oluşturur

Res -Values- Style
<style name="ProgressBar.Horizontal.Bar" parent="@android:style/Widget.ProgressBar.Horizontal">
 <item name="android:indeterminateOnly">false</item>
 <item name="android:progressDrawable">@drawable/custom_progress_bar</item>
 <item name="android:minHeight">10dip</item>
 <item name="android:maxHeight">20dip</item>
 </style>

Kodlamaya Giriş
activity_main.xml

Res-Layout: activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="${relativePackage}.${activityClass}" >
Relative Layout tanımladık.

<com.example.overlyflashlight.Transparent
 android:id="@+id/popup_window"
 android:layout_width="250dp"
 android:layout_height="150dp"
 android:layout_alignParentLeft="true"
 android:layout_marginLeft="0dp"
 android:layout_alignParentTop="true"
 android:layout_marginTop="83dp"
 android:gravity="left"
 android:orientation="vertical"
 android:padding="30px" >
Custom slidingDrawer’ imizi oluşturduk Res-transparent.java class’ımızın üzerin den Çalışacağı için o yolu gösterdik. android:layout_width="250dp" android:layout_height="150dp« Yükselik ve Genişliğini belirledik. android:layout_marginLeft="0dp" Soldan kaç dp boşluk bırakacağını Söyledik. android:layout_marginTop="83dp" Üstten 83dp kadar aşağıda olması Gerektiğini söyledik.

 <ProgressBar
 android:id="@+id/progress_bar_horiz"
 style="@style/ProgressBar.Horizontal.Bar"
 android:layout_height="wrap_content"
 android:layout_weight="0.65"
 android:max="100"

 android:paddingLeft="20dp"
 android:paddingRight="20dp"
 android:paddingTop="30dp" />
Progres’barımızın layout’a yerleştirdik.

<TextView
 android:id="@+id/textView1"
 android:layout_marginTop="-50dip"
 android:layout_weight="0.53"
 android:gravity="center|top"
 android:textAppearance="?android:attr/textAppearanceLarge" />
 </com.example.overlyflashlight.Transparent>
Bataryanın Durumunu yansıtacağımız textView ’imizi tanımladım

<ImageButton
 android:id="@+id/toggle"
 android:layout_width="wrap_content"
 android:layout_alignTop="@+id/popup_window"
 android:layout_toRightOf="@+id/popup_window"
 android:background="@drawable/flashoff"
 android:clickable="true" />
</RelativeLayout>
Tanımladğımız bu buton
slidingDrawerde Handle
butonuna karşılık gelir.
Aynı zamanda biz bu buton-
u overlay Window Olarak
oluşturduğumuz uygulamız’
ın resmi(facebookdaki soh-
bet balonlarına) olarak
kullandık.

Kodlamaya Giriş
Manifest.xml

FlashLightOverlay: Manifest
<uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

 <uses-permission android:name="android.permission.PACKAGE_USAGE_STATS"/>
<service
 android:name="com.example.overlyflashlight.OverlayService"></service>
Flash için kamerayı
kullanma izni
Window üzerine yarı geçirgen-transparan herhangi bir View'ı çizmeye ve yerleştir- meye izni için.
Bataryayı izlemek için.
OverlayService class’ımızda service kullandığımızı söylüyoruz

Flashlightoverlay

Recommended

Recommended

More Related Content

Similar to Flashlightoverlay

Similar to Flashlightoverlay (20)

More from Zafer M. ŞEN

More from Zafer M. ŞEN (20)

Flashlightoverlay