Snackbar’lar, bir işlem hakkında hafif geri bildirim sağlar. Mobil cihazlarda ekranın alt kısmında ve daha büyük cihazlarda sol alt kısımda kısa bir mesaj gösterirler. Snackbar’lar, ekrandaki diğer tüm öğelerin üzerinde görünür ve aynı anda yalnızca biri görüntülenebilir.
Kullanıcıya bazı geri bildirimler göstermek için, android’de bir tost gösterme, bir snack bar veya bir iletişim kutusu vb. gibi android’de farklı yöntemler kullanabiliriz. Bu eğitimde, bazı mesajları göstermek için Snackbar’ı kullanacağız.
Snackbar, YouTube (internet bağlantısı olmadığında ve YouTube bize indirilen içeriği görüntülememiz için bir mesaj gösterdiğinde), Google fotoğrafları (google fotoğraflara herhangi bir resim yüklediğimizde), Google Drive (silmek istediğimizde) gibi birçok uygulamada kullanılmaktadır. bazı dosya), vb. İşte buna bir örnek:
Snackbar nedir?
Snackbar, Toast‘a alternatif olarak kullanabileceğimiz hafif bir widget’tır (bazı durumlarda toast, snackbardan daha faydalıdır, ancak projeden projeye değişir). Snackbar, uygulama ekranının alt kısmında kullanıcıya mesajları göstermek için kullanılır. Snackbar ayrıca isteğe bağlı bir eylem düğmesi içerir.
Snackbar’ı android uygulamamızda uygulamak için Material library kullanacağız.
Snackbar, aşağıda gösterildiği gibi temel olarak 3 bölümden oluşur:
Text Label: Mobil ve tabletler için tek satırlık bir metin veya çok satırlı (2 satıra kadar) metin içerir.
Container: Snackbar’lar, varsayılan gri arka plana sahip dikdörtgen bir kap içinde görüntülenir. Metin etiketinin kullanıcı tarafından görülebilmesi için kaplar tamamen opak olmalıdır.
Action Button: Bu isteğe bağlıdır, ayrıca snackbar’ı gizlemek veya kapatmak için de kullanabiliriz. Metin etiketi uzunsa, eylem düğmesi üçüncü satırda görüntülenecektir. Kullanıcının her ikisini de ayırt edebilmesi için eylem düğmesi ve bir metin etiketi için farklı renkler kullanmalısınız.
Toast ve Snackbar Arasındaki Farklar
İşte Toast ve Snackbar arasındaki birkaç temel farklar:
| Toast | Snackbar |
|---|---|
| Toast, ekranın orta alt kısmında gösterilir. | Snackbar da ekranın alt kısmında gösterilir. |
| Toast, ekranın herhangi bir yerinde gösterilecek şekilde özelleştirilebilir. | Snackbar, ekranın herhangi bir yerinde gösterilecek şekilde özelleştirilemez, yalnızca ekranın alt kısmında gösterilir |
| Toast mesajında, kullanıcı geri bildirimlerini kaydetmek için herhangi bir işlem düğmesi yok | Snackbar’ın isteğe bağlı bir eylem düğmesi vardır, ancak yalnızca bir eylem düğmesi desteklenir. |
Süresi bitene kadar bir toast mesajı gösterilecektir (Toast için süre değişkenleri: Length.Long ve Length.Short) | Snackbar, kullanıcı tarafından hızlıca kaydırılarak veya işlem düğmesi kullanılarak veya Java kodu kullanılarak zamanından önce kapatılabilir. |
Snackbar Süresi Nasıl Ayarlanır?
Snackbar’ın süresini ayarlamak için kullanılabilecek sabitler şunlardır:
LENGTH_INDEFINITE: Kullanıcı tarafından kapatılana veya başka bir Snackbar eklenene kadar Snackbar’ı sonsuz bir süre boyunca gösterir.
LENGTH_LONG: Snackbar’ı uzun süre (10 saniye) gösterir.
LENGTH_SHORT: Snackbar’ı kısa süreli (4 saniye) gösterir.
Snackbar için Bazı Önemli Metodlar:
Aşağıda bazı yararlı Snackbar yöntemleri verilmiştir:
Metod: void dismiss()
Tanımı: Snackbar’ı kapatır ve hiçbir şey döndürmez.
Metod: int getDuration()
Tanımı: Snackbar’ın süresini döndürür.
Metod: boolean isShown()
Tanımı: Snackbar‘ın gösterilip gösterilmediğini kontrol etmek için kullanılır. Snackbar kullanıcıya gösterilirse true, aksi takdirde false döndürür.
Metod: make()
Tanımı: Snackbar yapmak için kullanılır ve 3 parametresi vardır:
- View
- Character Sequence yada resId
- Duration
Sözdizimi:
1 2 3 | make (View view, CharSequence text, int duration); |
Örnek:
1 2 3 4 | Snackbar snackbar = Snackbar.make(mainLayout, "Tasarım Kodlama", Snackbar.LENGTH_LONG); snackbar.show(); |
Metod: setAction()
Tanımı: Snackbar’da işlem butonunu ayarlamak için kullanılır, 2 parametre alır:
- Character Sequence yada resId
- View.OnClickListener
Sözdizimi:
1 2 3 | setAction(CharSequence text, View.OnClickListener listener); |
Örnek:
1 2 3 4 5 6 7 8 9 10 11 | Snackbar snackbar = Snackbar.make(mainLayout, "Tasarım Kodlama", Snackbar.LENGTH_LONG); snackbar.show(); snackbar.setAction("Tamam", new View.OnClickListener() { @Override public void onClick(View view) { // tıklandığında yapılacaklar } }); |
Örnek 2: Snackbar kapatılınca toast mesajını çıkartma
1 2 3 4 5 6 7 8 9 10 11 12 13 | Snackbar snackbar = Snackbar.make(mainLayout, "Tasarım Kodlama", Snackbar.LENGTH_LONG); snackbar.show(); snackbar.setAction("Tamam", new View.OnClickListener() { @Override public void onClick(View view) { // tıklandığında yapılacaklar Toast.makeText(getApplicationContext(),"Merhaba Dünya!", Toast.LENGTH_LONG).show(); } }); |
Metod: setActionTextColor()
Tanımı: Eylemin metin rengini ayarlamak için kullanılır, sadece 1 parametre alır:
- ColorStateList veya int
Sözdizimi:
1 2 3 4 5 | setActionTextColor(int renk); // yada setActionTextColor(ColorStateList renkler); |
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Snackbar snackbar = Snackbar.make(mainLayout, "Tasarım Kodlama", Snackbar.LENGTH_LONG); snackbar.setActionTextColor(Color.YELLOW); snackbar.setAction("Tamam", new View.OnClickListener() { @Override public void onClick(View view) { // tıklandığında yapılacaklar } }); snackbar.show(); |
Çıktı:
Metod: setBackgroundTint()
Tanımı : Snackbar’ın arka planının renk tonunu ayarlamak için kullanılır, ayrıca 1 parametre alır:
- int veya ColorStateList
Sözdizimi:
1 2 3 4 5 | setBackgroundTint(int color); // yada setBackgroundTint(ColorStateList colors); |
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | Snackbar snackbar = Snackbar.make(mainLayout, "Tasarım Kodlama", Snackbar.LENGTH_LONG); snackbar.setActionTextColor(Color.YELLOW); snackbar.setBackgroundTint(Color.RED); snackbar.setAction("Tamam", new View.OnClickListener() { @Override public void onClick(View view) { // tıklandığında yapılacaklar } }); snackbar.show(); |
Çıktı:
Metod: setText()
Tanımı: Snackbar metnini ayarlamak için kullanılır, ayrıca sadece bir parametre alır:
Character Sequence yada resId
Sözdizimi:
1 2 3 4 5 | setText(CharSequence text); // yada setText(int resId); |
Metod: setTextColor()
Tanımı: Snackbar metninin rengini ayarlamak için kullanılır, ayrıca sadece bir parametre alır:
- ColorStateList yada
int
Sözdizimi:
1 2 3 4 5 | setTextColor(int color); // yada setTextColor(ColorStateList colors); |
Metod: show()
Tanımı: Snackbar’ı göstermek için kullanılır. Hiçbir şey döndürmez ve argümanı yoktur.
Snackbar hakkında bazı temel bilgileri öğrendik, şimdi bu harika özelliği android uygulamamıza eklemenin zamanı geldi. Aşağıda gösterildiği gibi uygulamamıza snackbar eklemek için bazı temel adımları izlemeliyiz.
Android Snackbar Kullanımı Örneği
Adım 1: Yeni Proje Oluşturma
- Android Studio’nuzu açın “Create New Android Project”e tıklayın (Android Studio‘yu nasıl kuracağınızı ve ilk Android projenizi nasıl oluşturacağınızı öğrenin)
- Proje şablonu penceresinden “Empty Activity“i seçin ve İleri’ye tıklayın.
- Uygulama Adını, Paket adını, kaydetme konumunu, dili (Java/Kotlin, bu eğitim için Java kullanacağız) ve minimum SDK’yı (API 19 kullanıyoruz: Android 4.4 (KitKat)) girin
- Yukarıdaki bilgileri doldurduktan sonra Finish düğmesine tıklayın.
- Şimdi, projenin inşasını bitirmesini bekleyin.
Adım 2: Material bağımlılıklarını ekleyin
SnackBar‘ı uygulamamızda göstermek için uygulamamızda Malzeme kitaplığını uygulamamız gerekiyor, bunun için aşağıdaki adımları izleyin.
Gradle Scripts -> build.gradle (Module: app) bölümüne gidin ve aşağıdaki bağımlılıkları içe aktarın ve en üstteki “sync Now” gösterisini tıklayın:
(Yeni bir proje oluşturduğunuzda bağımlılıklar içinde yüklü gelecektir. Yüklü gelmediğinde bunu yapın)
1 2 3 4 5 6 | dependencies { // Uygulamamızda snackBar eklemek için malzeme kitaplığı ekleme implementation 'com.google.android.material:material:1.3.0' } |
Adım 3: activity_main.xml’yi değiştirin
Şimdi app -> res -> layout ->activity_main.xml‘e gidin ve vertical yönlendirmeli bir LinearLayout ekleyin ve LinearLayout‘un içinde farklı snackbar türleri için farklı düğmeler ekliyoruz. Şimdi activity_main.xml dosyamız aşağıdaki gibi görünecek.
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 | <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity" android:id="@+id/constraintLayout"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF" android:orientation="vertical"> <Button android:id="@+id/snackBar1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:text="TEK SATIRLI SNACKBAR" android:padding="20dp" /> <Button android:id="@+id/snackBar2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:text="ÇOK SATIRLI SNACKBAR" android:padding="20dp" /> <Button android:id="@+id/snackBar3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:text="EYLEM BUTONU İLE TEK SATIRLI SNACKBAR" android:padding="20dp" /> <Button android:id="@+id/snackBar4" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:text="EYLEM BUTONU İLE ÇOK SATIRLI SNACKBAR" android:padding="20dp" /> <Button android:id="@+id/snackBar5" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:text="EYLEM BUTONU İLE CUSTOM SNACKBAR" android:padding="20dp" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout> |
Adım 4: MainActivity.java dosyası
Bu, uygulamamıza snackbar eklemenin ana kısmıdır, önce MainActivity.java dosyasını açıyoruz ve aşağıda gösterildiği gibi bazı temel sınıfları içe aktarıyoruz:
1 2 3 4 5 6 7 8 9 10 11 12 13 | import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; import android.widget.Toast; import com.google.android.material.snackbar.Snackbar; |
Ardından, MainActivity sınıfı içinde Android Button ve ConstraintLayout nesnelerini aşağıda gösterildiği gibi oluşturuyoruz:
1 2 3 4 5 | private Button b1, b2, b3, b4, b5; ConstraintLayout constraintLayout; Snackbar snackbar; |
MainActivity sınıfının OnCreate() metodu içine aşağıdaki gibi Snackbar örneklerini oluşturuyoruz.
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 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout); b1=(Button)findViewById(R.id.snackBar1); b2=(Button)findViewById(R.id.snackBar2); b3=(Button)findViewById(R.id.snackBar3); b4=(Button)findViewById(R.id.snackBar4); b5=(Button)findViewById(R.id.snackBar5); b1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "SnackBar Tek Satır", Snackbar.LENGTH_SHORT); snackbar.show(); } }); b2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "SnackBar Çok satırlı metin bu şekilde ekranda olacaktır. Biraz daha yazı... ", Snackbar.LENGTH_SHORT); snackbar.show(); } }); b3.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "Dosya Silinsin mi?", Snackbar.LENGTH_SHORT); snackbar.setAction("Evet", new View.OnClickListener() {@Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Dosya Silindi ", Toast.LENGTH_SHORT).show(); } }); snackbar.show(); } }); b4.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "Bu mesaj çok satırlıdır. İşlem Yapmak için Evet butonuna tıklayın. ", Snackbar.LENGTH_SHORT); snackbar.setAction("Evet", new View.OnClickListener() {@Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Evet yaptınız ", Toast.LENGTH_SHORT).show(); } }); snackbar.show(); } }); b5.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "İnternet bağlantınız yok ", Snackbar.LENGTH_LONG).setAction("TEKAR DENE", new View.OnClickListener() {@Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Bağlanıyor...", Toast.LENGTH_SHORT).show(); } }); //setting action text color o red snackbar.setActionTextColor(Color.RED); View sbView = snackbar.getView(); //getting the textview of the snackbar TextView textView = (TextView) sbView.findViewById(com.google.android.material.R.id.snackbar_text); //setting snackbar text color to green textView.setTextColor(Color.GREEN); snackbar.show(); } }); } |
Ekran Çıktıları:
Tam MainActivity.java dosyası
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 110 111 112 | package com.example.tasarimkodlama; import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; import android.widget.Toast; import com.google.android.material.snackbar.Snackbar; public class MainActivity extends AppCompatActivity { private Button b1, b2, b3, b4, b5; ConstraintLayout constraintLayout; Snackbar snackbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout); b1=(Button)findViewById(R.id.snackBar1); b2=(Button)findViewById(R.id.snackBar2); b3=(Button)findViewById(R.id.snackBar3); b4=(Button)findViewById(R.id.snackBar4); b5=(Button)findViewById(R.id.snackBar5); b1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "SnackBar Tek Satır", Snackbar.LENGTH_SHORT); snackbar.show(); } }); b2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "SnackBar Çok satırlı metin bu şekilde ekranda olacaktır. Biraz daha yazı... ", Snackbar.LENGTH_SHORT); snackbar.show(); } }); b3.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "Dosya Silinsin mi?", Snackbar.LENGTH_SHORT); snackbar.setAction("Evet", new View.OnClickListener() {@Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Dosya Silindi ", Toast.LENGTH_SHORT).show(); } }); snackbar.show(); } }); b4.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "Bu mesaj çok satırlıdır. İşlem Yapmak için Evet butonuna tıklayın. ", Snackbar.LENGTH_SHORT); snackbar.setAction("Evet", new View.OnClickListener() {@Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Evet yaptınız ", Toast.LENGTH_SHORT).show(); } }); snackbar.show(); } }); b5.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { snackbar = Snackbar.make(constraintLayout, "İnternet bağlantınız yok ", Snackbar.LENGTH_LONG).setAction("TEKAR DENE", new View.OnClickListener() {@Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Bağlanıyor...", Toast.LENGTH_SHORT).show(); } }); //setting action text color o red snackbar.setActionTextColor(Color.RED); View sbView = snackbar.getView(); //getting the textview of the snackbar TextView textView = (TextView) sbView.findViewById(com.google.android.material.R.id.snackbar_text); //setting snackbar text color to green textView.setTextColor(Color.GREEN); snackbar.show(); } }); } } |
Bu eğitimde, Material kitaplığını kullanarak Android Uygulamamıza Snackbar eklemeyi öğrendik. Android uygulamasında Snackbar‘ı gösterecek kodun nasıl yazılacağını ve çeşitli fonksiyonların nasıl ekleneceğini öğrendik.
Daha fazla Android içeriği için Android Dersleri yazısını inceleyebilirsiniz.
admin
[…] EditTextAndroid RadioButton ve CheckBoxAndroid ButtonAndroid ImageView ve ImageButtonAndroid ToastAndroid SnackbarAndroid Switch ButtonAndroid ToggleButtonAndroid […]