UI/UX

Facebook Chat Baloncuğu Gibi Widgetlar Oluşturma

1318
Share

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="info.androidhive.floatingview">
    
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name="info.androidhive.floatingview.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <service
            android:name="info.androidhive.floatingview.FloatingViewService"
            android:enabled="true"
            android:exported="false"/>
    </application>
</manifest>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <!--Root container-->
    <RelativeLayout
        android:id="@+id/root_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:ignore="UselessParent">
        <!--Collapsed View -->
        <RelativeLayout
            android:id="@+id/collapse_view"
            android:layout_width="wrap_content"
            android:visibility="visible"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!--Icon of floating widget -->
            <ImageView
                android:id="@+id/collapsed_iv"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginTop="8dp"
                android:src="@drawable/ic_android_circle"
                tools:ignore="ContentDescription"/>
            <!--Close button-->
            <ImageView
                android:id="@+id/close_btn"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginLeft="40dp"
                android:src="@drawable/ic_close"
                tools:ignore="ContentDescription"/>
        </RelativeLayout>
        <!--Expanded View -->
        <LinearLayout
            android:id="@+id/expanded_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F8BBD0"
            android:visibility="gone"
            android:orientation="horizontal"
            android:padding="8dp">
            <!--Album image for the song currently playing.-->
            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/music_player"
                tools:ignore="ContentDescription"/>
            <!--Previous button-->
            <ImageView
                android:id="@+id/prev_btn"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="20dp"
                android:src="@mipmap/ic_previous"
                tools:ignore="ContentDescription"/>
            <!--Play button-->
            <ImageView
                android:id="@+id/play_btn"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/ic_play"
                tools:ignore="ContentDescription"/>
            <!--Next button-->
            <ImageView
                android:id="@+id/next_btn"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/ic_play_next"
                tools:ignore="ContentDescription"/>
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <ImageView
                    android:id="@+id/close_button"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/ic_close"/>
                <ImageView
                    android:id="@+id/open_button"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_alignParentBottom="true"
                    android:src="@drawable/ic_open"/>
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

 

4- Java Kodları

Bu adıma kadar Floating Widget kullanımıyla alakalı daha çok gerekli ayarları yaptık. Örneklediğim projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey Github linkine tıklamak.Java kodlarının içinde bir sürü türkçe açıklama bulunmaktadır. 😉

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/

 

 

1318
Share
Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.