Mobil uygulamaların kullanım ortamları telefonla sınırlı değildir. Televizyon, saat vb. ortamlarda mobil yazılım teknolojini kullanarak hayatımızı kolaylaştıran ve eğlenceli hale getiren uygulamaları oluşturabiliriz.
Bu makalemde, Leanback kütüphanesi ile filmlerin listelendiği bir Android TV uygulamasının nasıl oluşturacağımızı anlatacağım.
Şimdi örneğimizin çıktısına bakalım.
Android TV, Android sistemini içerir. TV uygulamalarının kod yapısı, telefon ve tablet uygulamaları ile aynıdır. Fakat geliştirme ve uygulamayı Google Play’e yükleme aşamalarında bazı ayarların yapılması gerekmektedir. Makalede bunlardan da bahsedeceğim.
Leanback Kütüphanesini Neden Kullanmalıyım?
Televizyonlar için oluşturulan yazılımların kullanıcı arayüzlerinde dikkat edilmesi gereken iki önemli nokta vardır:
- Uzaktan kumanda kullanarak TV kullanıcı arayüzünde gezinirsiniz. Bu durum uygulamanızın D-pad girişini desteklemesi gerektiği anlamına gelir.
- TV ekranı büyüktür ve genellikle uzaktan izlenir.
Leanback kütüphanesi, bu iki durumu göz önünde bulundurarak kullanıcı arayüzünü oluşturmayı kolaylaştırmaktadır. Yazılımcılar için bu durum büyük bir avantajdır.
Android TV Emülatör Kurulumu
Uygulamanızı bilgisayarınızda test etmek istiyorsanız Android TV Emülatörü kurmamız gerekmektedir. Android studio da kurmamız gereken Android TV Intel x86 Atom System Image ve emülatörün kurulumunu videoyu izleyerek öğrenebilirsiniz.
Uygulamanın çalıştırma ortamını da hazırladığımıza göre projeyi oluşturma adımlarına başlayabiliriz.
1-Projede Bazı Ayarlar
Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodu yerleştirerek Leanback kütüphanesini yüklüyoruz.
|
1 |
implementation "androidx.leanback:leanback:1.1.0-rc01" |
TV cihazlarında çalışması amaçlanan uygulamalar, dokunmatik ekranlara ihtiyaç duymaz. Bu yüzden TV uygulamanızda android.hardware.touchscreen özelliğine ihtiyaç olmadığını belirtmeniz gerekir. Bu ayar, uygulamanızın Google Play‘de bir TV uygulaması olarak kabul edilmesi içinde gereklidir.
AndroidManifest.xml dosyanızda application tag dışına aşağıdaki kodu yerleştirmelisiniz.
|
1 2 3 4 5 6 7 |
<uses-feature android:name="android.hardware.touchscreen" android:required="false" /> <!--Projenin Android TV'nin gerektirdiği Leanback UI kullanacağını belirtelim--> <uses-feature android:name="android.software.leanback" android:required="true" /> |
2-Kodlama
Leanback kütüphanesi kullanıcı arayüz konusunu kolaylaştırmak adına televizyonlar için bazı tasarım şablonlarını hazırladı. Bu tasarımları da Java/Kotlin tarafında oluşturmamızı sağlamaktadır. Bu yüzden tasarımı Leanback kütüphanesinin içindeki sınıflardan faydalanarak oluşturacağız. Bu sınıflar;
- BrowseSupportFragment; minimum kodla kategoriler ve medyaların (video, resim vb) UI elementleriyle özelleştirilerek gösterilmesini sağlar
- DetailsSupportFragment ; öğelerle ilgili detayların gösterileceği sayfa yapısının oluşumunu sağlar.
- PlaybackSupportFragment; video player içeren bir ekran oluşturmak istediğinizde kullanılır.
Ben oluşturduğum örnek de BrowseSupportFragment sınıfını kullandım. İlk önce bu sınıf yapısını kullanarak kategorileri ve film isimlerinin listelendiği yani işin büyük kısmını oluşturacağım.
|
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 |
import android.graphics.Color; import android.os.Bundle; import android.view.*; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.leanback.app.BrowseSupportFragment; import androidx.leanback.widget.*; public class BrowseFragment extends BrowseSupportFragment { private ArrayObjectAdapter mArrayObjectAdapter; private static final int GRID_ITEM_WIDTH= 300; private static final int GRID_ITEM_HEIGHT= 200; @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); setUpUI(); loadRows(); } private void setUpUI() { //sağ üst köşedeki logoyu eklediğim kod setBadgeDrawable(getActivity().getResources().getDrawable(R.drawable.smality)); //Soldaki kategori menüsünün background rengini belirledim setBrandColor(Color.parseColor("#e0f2f1")); } private void loadRows() { //ListRowPresenter;filmler listeleme görüntüsünü verebilmem için gerekli sınıf mArrayObjectAdapter =new ArrayObjectAdapter(new ListRowPresenter()); //Soldaki kategori bölümü olarak gözüken yerin adı HeaderItem'dır //Item'a GERİLİM kategori isimini ekledim HeaderItem gridPresenterheader = new HeaderItem(0,"GERİLİM"); //Film başlık alanlarını oluşturmak ve görselleştirmek için oluşturduğum sınıfı çağırdım GridItemPresenter gridItemPresenter = new GridItemPresenter(); ArrayObjectAdapter mRowAdapter=new ArrayObjectAdapter(gridItemPresenter); //ArrayObjectAdapter'da film isimlerini ekledim mRowAdapter.add("HANNIBAL LECTER"); mRowAdapter.add("CARGO"); mRowAdapter.add("BIRD BOX"); mRowAdapter.add("THE PLATFORM"); //Üsttekki gibi kategori ve film başlığının gösterilmesi için işlemler //tekrar ettirdim. HeaderItem gridPresenterheader2 = new HeaderItem(1,"KOMEDİ"); ArrayObjectAdapter mRowAdapter2=new ArrayObjectAdapter(gridItemPresenter); mRowAdapter2.add("ŞEKERPARE"); mRowAdapter2.add("KUNFU PANDA"); mRowAdapter2.add("THE INTERN"); mRowAdapter2.add("MASKE"); HeaderItem gridPresenterheader3 = new HeaderItem(1,"BELGESEL"); ArrayObjectAdapter mRowAdapter3=new ArrayObjectAdapter(gridItemPresenter); mRowAdapter3.add("MERCAN PEŞİNDE"); mRowAdapter3.add("DOĞADAKİ İNSAN"); mRowAdapter3.add("INTO THE WILD"); mRowAdapter3.add("127 SAAT"); HeaderItem gridPresenterheader4 = new HeaderItem(2,"BİLİM KURGU"); ArrayObjectAdapter mRowAdapter4=new ArrayObjectAdapter(gridItemPresenter); mRowAdapter4.add("TERMINATOR"); mRowAdapter4.add("MATRIX"); mRowAdapter4.add("ÖRÜMCEK ADAM"); mRowAdapter4.add("X-MEN"); mArrayObjectAdapter.add(new ListRow(gridPresenterheader,mRowAdapter)); mArrayObjectAdapter.add(new ListRow(gridPresenterheader2,mRowAdapter2)); mArrayObjectAdapter.add(new ListRow(gridPresenterheader3,mRowAdapter3)); mArrayObjectAdapter.add(new ListRow(gridPresenterheader4,mRowAdapter4)); setAdapter(mArrayObjectAdapter); } //Presenter sınıfı; bizim tüm UI elementlerimizi ekleyebileceğimiz //ve düzenleceğimiz sınıftır private class GridItemPresenter extends Presenter { @Override public ViewHolder onCreateViewHolder(ViewGroup parent) { //Film başlıklarını gösterilmesi için TextView tanımladım. TextView view = new TextView(parent.getContext()); view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT)); view.setFocusable(true); view.setFocusableInTouchMode(true); //Film başlık alanları için TextView'i görselleştirdim. view.setBackgroundColor(Color.parseColor("#b2ebf2")); view.setTextColor(Color.BLACK); view.setGravity(Gravity.CENTER); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder viewHolder, Object item) { ((TextView) viewHolder.view).setText((String) item); } @Override public void onUnbindViewHolder(ViewHolder viewHolder) { } } } |
Projenizde ilk açılış sayfası olarak kullandığınız Activity sınıfınızda tanımlanmış olan xml dosyanızı açıp aşağıdaki kodu yerleştirmeniz yeterlidir.
Bu xml’de sadece BrowseFragment sınıfını fragment arayüz elementinin içinde çağırdık.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <fragment android:id="@+id/root" android:name="com.smality.androidtvleanback.BrowseFragment" android:layout_width="match_parent" android:layout_height="match_parent"></fragment> </androidx.constraintlayout.widget.ConstraintLayout> |
Kendimizi fazla yormadan Android Tv uygulalamamızıda oluşturmuş olduk.
Dilerseniz projenin tüm dosya ve kodlarına github linkinden ulaşabilirsiniz.
