Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kotlin Android Hakkında Temel Bilgiler 10.3: Herkes için tasarım

Bu codelab, Android Kotlin Hakkında Temel Bilgiler kursunun bir parçasıdır. Bu kurstan en iyi şekilde yararlanmak için codelab'leri sırayla tamamlamanızı öneririz. Kursla ilgili tüm codelab'ler Android Kotlin Hakkında Temel Bilgiler codelab'leri açılış sayfasında listelenir.

Giriş

İster eğlence için ister ticari amaçlarla geliştirme yapın, uygulamanızı en çok kullanıcı tarafından kullanılabilir hale getirmek mantıklıdır. Bunu başarmanın birden fazla boyutu vardır.

Sağdan sola yazılan diller desteklenir. Avrupa dilleri ve diğer birçok dil soldan sağa okunur. Bu yerel ayarlardan çıkan uygulamalar genellikle bu dillere uygun şekilde tasarlanır. Arapça gibi, çok sayıda konuşanı olan başka birçok dil sağdan sola doğru okunur. Potansiyel kitlenizi artırmak için uygulamanızın sağdan sola (RTL) yazılan dillerle çalışmasını sağlayın.
Erişilebilirlik taraması yapın. Uygulamanızı başka bir kullanıcının nasıl deneyimleyebileceğini tahmin etmek riskli bir seçenektir. Erişilebilirlik Tarayıcısı uygulaması, tahmin etme sürecini ortadan kaldırır ve uygulamanızı analiz ederek erişilebilirliğini iyileştirebileceğiniz noktaları belirler.
İçerik açıklamalarıyla TalkBack için tasarım yapın. Görsel engeller, sanılandan daha yaygındır ve yalnızca görme engelli kullanıcılar değil, birçok kullanıcı ekran okuyucu kullanır. İçerik açıklamaları, kullanıcının ekranın bir öğesiyle etkileşimde bulunduğunda ekran okuyucunun söyleyeceği ifadelerdir.
Gece modunu destekleyin. Ekran renklerini değiştirmek, görme engelli birçok kullanıcının kontrastı iyileştirmesine ve uygulamanızla görsel olarak çalışmasına yardımcı olur. Android, gece modunu desteklemeyi kolaylaştırır. Kullanıcılara varsayılan ekran renklerine basit bir alternatif sunmak için gece modunu her zaman desteklemeniz gerekir.

Bu codelab'de bu seçeneklerin her birini keşfedecek ve GDG Finder uygulamasına destek ekleyeceksiniz.

Ayrıca Android uygulamanızda çipleri nasıl kullanacağınızı da öğrenirsiniz. Çipler, uygulamanızı erişilebilir tutarken daha ilgi çekici hale getirmenize yardımcı olur.

Bilmeniz gerekenler

Aşağıdaki konular hakkında bilgi sahibi olmanız gerekir:

Etkinlikleri ve parçaları olan uygulamalar oluşturma ve veri aktararak parçalar arasında gezinme
Kullanıcı arayüzü oluşturmak için görünümleri ve görünüm gruplarını (özellikle RecyclerView) kullanma.
İyi yapılandırılmış ve verimli bir uygulama oluşturmak için önerilen mimariyle birlikte ViewModel dahil olmak üzere Architecture Components'ı kullanma
Veri bağlama, eş yordamlar ve fare tıklamalarını işleme.
Room veritabanını kullanarak internete bağlanma ve verileri yerel olarak önbelleğe alma
Görünüm özelliklerini ayarlama ve kaynakları XML kaynak dosyalarına ayıklayıp kullanma.
Uygulamanızın görünümünü özelleştirmek için stilleri ve temaları kullanma
Material bileşenlerini, boyut kaynaklarını ve özel renklendirmeyi kullanma.

Neler öğreneceksiniz?

Uygulamanızı en fazla sayıda kullanıcının kullanabileceği şekilde tasarlama
Uygulamanızın sağdan sola (RTL) yazılan dillerde çalışmasını sağlama
Uygulamanızın erişilebilirliğini değerlendirme
Uygulamanızın ekran okuyucularla daha iyi çalışmasını sağlamak için içerik açıklamalarını kullanma
Çipler nasıl kullanılır?
Uygulamanızın koyu modda çalışmasını sağlama

Yapacaklarınız

Sağdan sola yazılan dillerde çalışmasını sağlayarak belirli bir uygulamayı değerlendirin ve erişilebilirliği artırmak için genişletin.
Erişilebilirliğin hangi noktalarda iyileştirilebileceğini belirlemek için uygulamanızı tarayın.
Resimler için içerik açıklamaları kullanın.
Çizilebilir öğeleri nasıl kullanacağınızı öğrenin.
Uygulamanıza gece modu kullanma özelliği ekleyin.

GDG-finder başlangıç uygulaması, bu kursta şimdiye kadar öğrendiğiniz her şeyi temel alır.

Uygulama, üç ekranı düzenlemek için ConstraintLayout kullanıyor. Ekranlardan ikisi, Android'de renkleri ve metni keşfetmek için kullanacağınız düzen dosyalarıdır.

Üçüncü ekran, GDG bulma aracıdır. GDG'ler (Google Geliştirici Grupları), Android de dahil olmak üzere Google teknolojilerine odaklanan geliştirici topluluklarıdır. Dünyanın dört bir yanındaki GDG'ler buluşmalar, konferanslar, çalışma grupları ve diğer etkinlikleri düzenler.

Bu uygulamayı geliştirirken gerçek GDG listesi üzerinde çalışırsınız. Bulucu ekranı, GDG'leri mesafeye göre sıralamak için cihazın konumunu kullanır.

Şanslıysanız ve bölgenizde bir GDG varsa web sitesini ziyaret edip etkinliklerine kaydolabilirsiniz. GDG etkinlikleri, diğer Android geliştiricilerle tanışmak ve bu kursa sığmayan sektördeki en iyi uygulamaları öğrenmek için harika bir fırsattır.

Aşağıdaki ekran görüntüleri, bu codelab'in başından sonuna kadar uygulamanızda yapılacak değişiklikleri göstermektedir.

Soldan sağa (LTR) ve sağdan sola (RTL) yazılan diller arasındaki temel fark, gösterilen içeriğin yönüdür. Kullanıcı arayüzü yönü soldan sağa (LTR) yerine sağdan sola (RTL) olarak değiştirildiğinde (veya tam tersi) bu işleme genellikle yansıtma adı verilir. Yansıtma, metinler, metin alanı simgeleri, düzenler ve yön içeren simgeler (ör. oklar) dahil olmak üzere ekranın büyük bir bölümünü etkiler. Sayılar (saat, telefon numaraları), yönü olmayan simgeler (uçak modu, kablosuz), oynatma kontrolleri ve çoğu grafik gibi diğer öğeler yansıtılmaz.

Sağdan sola metin yönünü kullanan diller, dünya genelinde bir milyardan fazla kişi tarafından kullanılıyor. Android geliştiricileri dünyanın her yerinde olduğundan GDG Finder uygulamasının sağdan sola dilleri desteklemesi gerekir.

1. adım: Sağdan sola dil desteği ekleyin

Bu adımda, GDG Finder uygulamasının sağdan sola dillerle çalışmasını sağlayacaksınız.

Bu codelab'in başlangıç uygulaması olan GDGFinderMaterial uygulamasını indirip çalıştırın veya önceki codelab'in son kodundan devam edin.
Android Manifest'i açın.
<application> bölümüne, uygulamanın sağdan sola dil desteği sunduğunu belirtmek için aşağıdaki kodu ekleyin.

<application
        ...
        android:supportsRtl="true">

Tasarım sekmesinde activity_main.xml dosyasını açın.
Önizleme için Yerel Ayar açılır menüsünden Sağdan Sola Önizleme'yi seçin. (Bu menüyü bulamıyorsanız bölmeyi genişletin veya Özellikler bölmesini kapatın.)

Önizleme bölümünde, "GDG Bulucu" başlığının sağa taşındığını ve ekranın geri kalanının neredeyse aynı kaldığını görebilirsiniz. Genel olarak bu ekran kabul edilebilir. Ancak metin görünümündeki hizalama artık yanlış. Çünkü sağa değil, sola hizalanıyor.

Bu özelliği cihazınızda kullanmak için cihazınızın veya emülatörünüzün Ayarlar bölümündeki Geliştirici Seçenekleri'nde RTL düzenini zorla'yı seçin. (Geliştirici Seçenekleri'ni etkinleştirmeniz gerekiyorsa Derleme Numarası'nı bulup geliştirici olduğunuzu belirten bir bildirim alana kadar tıklayın. Bu, cihaza ve Android sisteminin sürümüne göre değişir.)

Uygulamayı çalıştırın ve cihazda ana ekranın Önizleme'dekiyle aynı göründüğünü doğrulayın. FAB'ın artık sola, hamburger menüsünün ise sağa geçtiğini göreceksiniz.
Uygulamada gezinme çekmecesini açıp Arama ekranına gidin. Aşağıda gösterildiği gibi, simgeler solda kalır ve metin görünmez. Metnin, simgenin solunda ve ekranın dışında olduğu anlaşılıyor. Bunun nedeni, kodun görünüm özelliklerinde ve düzen kısıtlamalarında sol/sağ ekran referanslarını kullanmasıdır.

2. adım: Sol ve sağ yerine başlangıç ve bitişi kullanın

Ekrana baktığınızda ekranda "sol" ve "sağ" değişmez. Metnin yönü değişse bile bu durum geçerlidir. Örneğin, layout_constraintLeft_toLeftOf her zaman öğenin sol tarafını ekranın sol tarafıyla sınırlar. Uygulamanızda ise metin, yukarıdaki ekran görüntüsünde gösterildiği gibi sağdan sola dillerde ekranın dışında kalıyor.

Bu sorunu düzeltmek için "sol" ve "sağ" yerine Start ve End terminolojisini kullanın. Bu terminoloji, metnin başlangıcını ve sonunu mevcut dildeki metnin yönüne uygun şekilde ayarlar. Böylece kenar boşlukları ve düzenler ekranların doğru alanlarında yer alır.

Open list_item.xml.
Left ve Right ile ilgili tüm referansları Start ve End ile ilgili referanslarla değiştirin.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

ImageView adlı kullanıcının layout_marginLeft öğesini layout_marginStart ile değiştirin. Bu işlem, simgeyi ekranın kenarından uzaklaştırmak için kenar boşluğunu doğru yere taşır.

<ImageView
android:layout_marginStart="
?

fragment_gdg_list.xml adlı kişiyi aç. Önizleme bölmesindeki GDG listesini kontrol edin. Simgenin yansıtıldığı için hâlâ yanlış yöne baktığını unutmayın (Simge yansıtılmamışsa sağdan sola önizlemeyi görüntülediğinizden emin olun). Materyal Tasarım kurallarına göre simgeler yansıtılmamalıdır.
res/drawable/ic_gdg.xml dosyasını açın.
Yansıtmayı devre dışı bırakmak için XML kodunun ilk satırında android:autoMirrored="true" öğesini bulup silin.
Önizleme'yi kontrol edin veya uygulamayı tekrar çalıştırıp GDG'yi Ara ekranını açın. Düzen artık düzeltilmiş olmalıdır.

3. adım: Android Studio'nun işi sizin için yapmasına izin verin

Önceki alıştırmada, sağdan sola yazılan dilleri destekleme konusunda ilk adımlarınızı attınız. Neyse ki Android Studio, uygulamanızı tarayıp birçok temel ayarı sizin için yapabilir.

list_item.xml dosyasında, TextView içinde layout_marginStart öğesini layout_marginLeft olarak değiştirin. Böylece tarayıcı bulabileceği bir öğeye sahip olur.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

Android Studio'da Refactor > Add RTL support where possible (Yeniden düzenle > Mümkün olduğunda RTL desteği ekle) seçeneğini belirleyin ve manifesti güncellemek için kutuları işaretleyin. Ayrıca, başlangıç ve bitiş özelliklerini kullanmak üzere düzen dosyalarını da işaretleyin.

Yeniden Düzenleme Önizlemesi bölmesinde app klasörünü bulun ve tüm ayrıntılar açılana kadar genişletin.
Uygulama klasöründe, az önce değiştirdiğiniz layout_marginLeft öğesinin yeniden düzenlenecek kod olarak listelendiğini göreceksiniz.

Önizlemede sistem ve kitaplık dosyalarının da listelendiğini unutmayın. layout, layout-watch-v20 ve app'in parçası olmayan diğer klasörleri sağ tıklayıp bağlam menüsünden Hariç tut'u seçin.

Şimdi yeniden düzenlemeyi yapın. (Sistem dosyalarıyla ilgili bir pop-up alırsanız uygulama kodunuzun parçası olmayan tüm klasörleri hariç tuttuğunuzdan emin olun.)

layout_marginLeft öğesinin tekrar layout_marginStart olarak değiştirildiğini unutmayın.

3. adım: Yerel ayarlar için klasörleri keşfedin

Şimdiye kadar yalnızca uygulama için kullanılan varsayılan dilin yönünü değiştirdiniz. Üretim uygulaması için strings.xml dosyasını bir çevirmene göndererek yeni bir dile çevrilmesini sağlarsınız. Bu codelab'de uygulama, İspanyolca bir strings.xml dosyası sağlar (Çevirileri oluşturmak için Google Çeviri'yi kullandığımızdan çeviriler mükemmel değildir).

Android Studio'da proje görünümünü Proje Dosyaları olarak değiştirin.
res klasörünü genişletin ve res/values ile res/values-es klasörlerini inceleyin. Klasör adındaki "es", İspanyolcanın dil kodudur. values-"dil kodu" klasörleri, desteklenen her dil için değerler içerir. Uzantısız values klasörü, aksi takdirde geçerli olan varsayılan kaynakları içerir.

values-es içinde strings.xml dosyasını açın ve tüm dizelerin İspanyolca olduğunu görün.
Android Studio'da Tasarım sekmesinde activity_main.xml simgesini açın.
Önizleme için Yerel Ayar açılır listesinde İspanyolca'yı seçin. Metniniz artık İspanyolca olmalıdır.

[İsteğe bağlı] Sağdan sola yazılan bir dilde uzmanlığınız varsa bu dilde bir values klasörü ve strings.xml dosyası oluşturup cihazınızda nasıl göründüğünü test edin.
[İsteğe bağlı] Cihazınızdaki dil ayarlarını değiştirin ve uygulamayı çalıştırın. Cihazınızın dilini okumadığınız bir dile değiştirmeyin. Bu durumda işlemi geri almak biraz zor olabilir.

Önceki görevde, uygulamanızı manuel olarak değiştirmiş ve ardından Android Studio'yu kullanarak ek RTL iyileştirmeleri yapıp yapamayacağınızı kontrol etmiştiniz.

Uygulamanızı erişilebilir hale getirmek için en iyi yardımcınız Erişilebilirlik Tarayıcısı uygulamasıdır. Hedef cihazınızdaki uygulamanızı tarar ve uygulamanızı daha erişilebilir hale getirmek için dokunma hedeflerini büyütme, kontrastı artırma ve resimler için açıklamalar sağlama gibi iyileştirmeler önerir. Erişilebilirlik Tarayıcısı, Google tarafından geliştirilmiştir ve Play Store'dan yüklenebilir.

1. adım: Erişilebilirlik Tarayıcısı'nı yükleyip çalıştırın

Play Store'u açın ve gerekirse oturum açın. Bu işlemi fiziksel cihazınızda veya emülatörde yapabilirsiniz. Bu codelab'de emülatör kullanılır.

Play Store'da Google LLC tarafından geliştirilen Erişilebilirlik Tarayıcısı'nı arayın. Tarama için birçok izin gerektiğinden Google tarafından yayınlanan doğru uygulamayı edindiğinizden emin olun.

Tarayıcıyı emülatöre yükleyin.
Yüklendikten sonra Aç'ı tıklayın.
Başlayın'ı tıklayın.
Ayarlar'da Erişilebilirlik Tarayıcısı kurulumunu başlatmak için Tamam'ı tıklayın.

Cihazın Erişilebilirlik ayarlarına gitmek için Erişilebilirlik Tarayıcısı'nı tıklayın.

Etkinleştirmek için Hizmeti kullan'ı tıklayın.

Ekrandaki talimatları uygulayın ve tüm izinleri verin.
Ardından Tamam, anladım'ı tıklayın ve ana ekrana dönün. Ekranda bir yerde onay işareti içeren mavi bir düğme görebilirsiniz. Bu düğmeyi tıkladığınızda ön plandaki uygulama için test başlatılır. Düğmeyi sürükleyerek yeniden konumlandırabilirsiniz. Bu düğme tüm uygulamaların üzerinde kalır. Böylece, istediğiniz zaman testi tetikleyebilirsiniz.

Uygulamanızı açın veya çalıştırın.
Mavi düğmeyi tıklayın ve ek güvenlik uyarılarını ve izinlerini kabul edin.

Erişilebilirlik Tarayıcı simgesini ilk kez tıkladığınızda uygulama, ekranınızda gösterilen her şeyi almak için izin ister. Bu izin çok korkutucu görünüyor ve gerçekten de öyle.

Bu tür izinler, uygulamaların e-postanızı okumasına ve hatta banka hesabı bilgilerinizi almasına olanak tanıdığı için neredeyse hiçbir zaman verilmemelidir. Ancak Erişilebilirlik Tarayıcısı'nın çalışabilmesi için uygulamanızı bir kullanıcının gözünden incelemesi gerekir. Bu nedenle bu izne ihtiyaç duyar.

Mavi düğmeyi tıklayın ve analizin tamamlanmasını bekleyin. Başlık ve FAB kırmızı kutu içinde olacak şekilde aşağıdaki ekran görüntüsüne benzer bir şey görürsünüz. Bu, ekranda erişilebilirlik iyileştirmeleriyle ilgili iki öneri olduğunu gösterir.

GDG Finder'ı çevreleyen kutuyu tıklayın. Bu işlem, aşağıdaki örnekte gösterildiği gibi, görüntü kontrastıyla ilgili sorunları belirten ek bilgilerin yer aldığı bir bölme açar.
Görüntü Kontrastı bilgilerini genişletin. Araç, çözümler önerir.
Sonraki öğe hakkında bilgi edinmek için sağdaki okları tıklayın.

Uygulamanızda GDG'ye başvur ekranına gidin ve Erişilebilirlik Tarayıcısı uygulamasıyla tarayın. Bu işlem, solda gösterildiği gibi birçok öneri sunar. Tam olarak 12. Adil olmak gerekirse bunların bazıları benzer öğelerin kopyalarıdır.
Tüm önerilerin listesini almak için alt araç çubuğundaki "yığın" simgesini tıklayın. Bu simge, aşağıdaki sağ ekran görüntüsünde gösterilmiştir. Bu codelab'de bu sorunların tümünü ele alıyoruz.

Google'ın uygulama koleksiyonu olan Android Erişilebilirlik Araçları, uygulamaları daha erişilebilir hale getirmeye yardımcı olacak araçlar içerir. TalkBack gibi araçlar bu kapsamdadır. TalkBack, işitsel, dokunsal ve sözlü geri bildirim sunan bir ekran okuyucudur. Bu sayede kullanıcılar, gözlerini kullanmadan cihazlarında gezinip içerik tüketebilir.

TalkBack'in yalnızca görme engelliler tarafından değil, çeşitli görme bozuklukları olan birçok kişi tarafından kullanıldığı ortaya çıktı. Hatta sadece gözlerini dinlendirmek isteyenler bile bu özelliği kullanabilir.

Dolayısıyla erişilebilirlik herkes içindir. Bu görevde TalkBack'i deneyecek ve uygulamanızı TalkBack ile iyi çalışacak şekilde güncelleyeceksiniz.

1. adım: Erişilebilirlik Paketi'ni yükleyip çalıştırın

TalkBack birçok fiziksel cihaza önceden yüklenmiş olarak gelir ancak emülatörde yüklemeniz gerekir.

Play Store'u açın.
Erişilebilirlik Paketi'ni bulun. Uygulamanın Google'a ait doğru uygulama olduğundan emin olun.
Yüklü değilse Erişilebilirlik Paketi'ni yükleyin.
Cihazda TalkBack'i etkinleştirmek için Ayarlar > Erişilebilirlik'e gidin ve Hizmeti kullan'ı seçerek TalkBack'i etkinleştirin. TalkBack, ekrandaki içerikleri okumak için erişilebilirlik tarayıcısında olduğu gibi izin gerektirir. İzin isteklerini kabul ettiğinizde TalkBack, sizi TalkBack'i etkili bir şekilde kullanmayı öğreten bir eğitim listesiyle karşılar.
Burada duraklayın ve TalkBack'i kullanmayı bitirdiğinizde nasıl kapatacağınızı öğrenmek için eğitimleri inceleyin.
Eğitimden çıkmak için geri düğmesini tıklayarak seçin, ardından ekranın herhangi bir yerine iki kez dokunun.

GDG Finder uygulamasını TalkBack ile kullanmayı keşfedin. TalkBack'in ekran veya kontrol hakkında faydalı bilgi vermediği yerleri fark edin. Bunu bir sonraki alıştırmada düzelteceksiniz.

2. adım: İçerik açıklaması ekleyin

İçerik tanımlayıcılar, görüntülemelerin anlamını açıklayan tanımlayıcı etiketlerdir. Görünümlerinizin çoğunda içerik açıklamaları olmalıdır.

GDG Finder uygulaması çalışırken ve TalkBack etkin durumdayken GDG çalıştırmak için başvur ekranına gidin.
Ana resme dokunuyorum ancak hiçbir şey olmuyor.
add_gdg_fragment.xml dosyasını açın.
ImageView bölümüne, aşağıda gösterildiği gibi bir içerik açıklayıcı özelliği ekleyin. stage_image_description dizesi, strings.xml dosyasında sizin için sağlanır.

android:contentDescription="@string/stage_image_description"

Uygulamanızı çalıştırın.
GDG çalıştırmak için başvur'a gidin ve resmi tıklayın. Artık resmin kısa açıklamasını duyabilirsiniz.
[İsteğe bağlı] Bu uygulamadaki diğer resimler için içerik açıklamaları ekleyin. Üretim uygulamasında tüm resimlerin içerik açıklaması olması gerekir.

3. adım: Düzenlenebilir metin alanlarına ipuçları ekleyin

EditText gibi düzenlenebilir öğelerde, kullanıcıların ne yazacağını anlamasına yardımcı olmak için XML'de android:hint kullanabilirsiniz. İpucu, giriş alanındaki varsayılan metin olduğundan kullanıcı arayüzünde her zaman gösterilir.

Hâlâ add_gdg_fragment.xml dosyasındayız.
Aşağıdaki kodu rehber olarak kullanarak içerik açıklamaları ve ipuçları ekleyin.

textViewIntro uygulamasına ekleme:

android:contentDescription="@string/add_gdg"

Düzenleme metinlerine sırasıyla ekleyin:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

labelTextWhy için içerik açıklaması ekleyin.

android:contentDescription="@string/motivation"

EditTextWhy için ipucu ekleyin. Düzenleme kutularını etiketledikten sonra etikete bir içerik açıklaması ve kutuya bir ipucu ekleyin.

android:hint="@string/enter_motivation"

Gönder düğmesi için içerik açıklaması ekleyin. Tüm düğmelerin, basıldıklarında ne olacağını açıklayan bir açıklaması olmalıdır.

android:contentDescription="@string/submit_button_description"

Uygulamanızı TalkBack etkin olarak çalıştırın ve GDG çalıştırmak için başvuruda bulunmak üzere formu doldurun.

4. adım: İçerik grubu oluşturun

TalkBack'in grup olarak ele alması gereken kullanıcı arayüzü kontrolleri için içerik gruplandırmayı kullanabilirsiniz. Birlikte gruplandırılmış ilgili içerikler birlikte duyurulur. Böylece, yardımcı teknoloji kullanıcılarının ekrandaki tüm bilgileri keşfetmek için daha az kaydırması, taraması veya beklemesi gerekir. Bu durum, kontrollerin ekranda görünme şeklini etkilemez.

Kullanıcı arayüzü bileşenlerini gruplandırmak için bunları ViewGroup içine yerleştirin (ör. LinearLayout). GDG Finder uygulamasında, labelTextWhy ve editTextWhy öğeleri semantik olarak birbirine ait olduğundan gruplandırma için mükemmel adaylardır.

add_gdg_fragment.xml dosyasını açın.
İçerik grubu oluşturmak için LinearLayout ile LabelTextWhy ve EditTextWhy öğelerini sarın. Aşağıdaki kodu kopyalayıp yapıştırın. Bu LinearLayout, ihtiyacınız olan stil özelliklerinin bir kısmını zaten içeriyor. (button simgesinin LinearLayout simgesinin DIŞINDA olduğundan emin olun.)

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

Tüm kodlara uygun şekilde girinti uygulamak için Code > Reformat code'u (Kod > Kodu yeniden biçimlendir) seçin.
labelTextWhy ve editTextWhy'deki tüm düzen kenar boşluklarını kaldırın.
labelTextWhy içinde layout_constraintTop_toTopOf kısıtlamasını contentGroup olarak değiştirin.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

editTextWhy içinde layout_constraintBottom_toBottomOf kısıtlamasını contentGroup olarak değiştirin.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

Hataları gidermek için EditTextRegion ve Button öğelerini contentGroup ile sınırlayın.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

LinearLayout öğesine kenar boşlukları ekleyin. İsteğe bağlı olarak bu marjı boyut olarak ayıklayın.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

Yardıma ihtiyacınız olursa kodunuzu çözüm kodundaki add_gdg_fragment.xml ile karşılaştırın.

Uygulamanızı çalıştırın ve TalkBack ile GDG çalıştırmak için başvur ekranını keşfedin.

5. adım: Canlı bölge ekleyin

Gönder düğmesindeki etiket şu anda Tamam'dır. Form gönderilmeden önce düğmenin tek bir etiketi ve açıklaması olması, kullanıcı tıkladıktan ve form gönderildikten sonra ise farklı bir etiket ve içerik açıklamasıyla dinamik olarak değişmesi daha iyi olur. Bu işlemi canlı bölge kullanarak yapabilirsiniz.

Canlı bölge, görünüm değiştiğinde kullanıcının bilgilendirilip bilgilendirilmeyeceğini erişilebilirlik hizmetlerine bildirir. Örneğin, kullanıcıyı yanlış şifre veya ağ hatası hakkında bilgilendirmek, uygulamanızı daha erişilebilir hale getirmenin harika bir yoludur. Bu örnekte, basit olması için gönder düğmesinin durumu değiştiğinde kullanıcıyı bilgilendiriyorsunuz.

add_gdg_fragment.xml dosyasını açın.
Sağlanan submit dize kaynağını kullanarak düğmenin metin atamasını Gönder olarak değiştirin.

android:text="@string/submit"

android:accessibilityLiveRegion özelliğini ayarlayarak düğmeye canlı bölge ekleyin. Yazarken değer için birkaç seçeneğiniz vardır. Değişikliğin önemine bağlı olarak kullanıcıyı kesintiye uğratıp uğratmayacağınızı seçebilirsiniz. "Assertive" değeriyle, erişilebilirlik hizmetleri bu görünümdeki değişiklikleri hemen duyurmak için devam eden konuşmayı kesintiye uğratır. Değeri "none" (yok) olarak ayarlarsanız herhangi bir değişiklik duyurulmaz. "Kibar" olarak ayarlandığında erişilebilirlik hizmetleri değişiklikleri duyurur ancak sırasını bekler. Değeri "polite" olarak ayarlayın.

android:accessibilityLiveRegion="polite"

add paketinde AddGdgFragment.kt dosyasını açın.
showSnackBarEvent Observer içinde, SnackBar gösterme işlemini tamamladıktan sonra düğme için yeni bir içerik açıklaması ve metin belirleyin.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

Uygulamanızı çalıştırın ve düğmeyi tıklayın. Maalesef düğme ve yazı tipi çok küçük.

6. adım: Düğme stilini düzeltin

add_gdg_fragment.xml dosyasında, düğmenin width ve height değerlerini wrap_content olarak değiştirin. Böylece, tam etiket görünür ve düğme uygun boyutta olur.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Uygulamanın daha iyi tema stilini kullanması için düğmedeki backgroundTint, textColor ve textSize özelliklerini silin.
textViewIntro öğesinden textColor özelliğini silin. Tema renkleri iyi bir kontrast sağlamalıdır.
Uygulamayı çalıştırın. Çok daha kullanışlı olan Gönder düğmesini fark edin. Gönder'i tıklayın ve Bitti olarak değiştiğini görün.

Çipler, bir özelliği, metni, varlığı veya işlemi temsil eden kompakt öğelerdir. Kullanıcıların bilgi girmesine, seçim yapmasına, içeriği filtrelemesine veya bir işlemi tetiklemesine olanak tanır.

Chip widget'ı, tüm düzen ve çizim mantığını içeren ChipDrawable öğesinin etrafındaki ince bir görünüm sarmalayıcısıdır. Ek mantık, dokunma, fare, klavye ve erişilebilirlik navigasyonunu desteklemek için kullanılır. Ana çip ve kapatma simgesi ayrı mantıksal alt görünümler olarak kabul edilir ve kendi gezinme davranışlarını ve durumlarını içerir.

Çipler, çizilebilir öğeleri kullanır. Android çizilebilirleri, ekranda resimler, şekiller ve animasyonlar çizmenize olanak tanır. Sabit boyutlu veya dinamik olarak boyutlandırılabilirler. GDG uygulamasındaki resimler gibi resimleri çizilebilir öğe olarak kullanabilirsiniz. Ayrıca, hayal edebileceğiniz her şeyi çizmek için vektör çizimlerini kullanabilirsiniz. Bu Codelab'de ele alınmayan, 9 parçalı çizilebilir adlı yeniden boyutlandırılabilir bir çizilebilir öğe de vardır. drawable/ic_gdg.xml dosyasındaki GDG logosu başka bir çizilebilir öğedir.

Çizilebilir öğeler görünüm olmadığından doğrudan ConstraintLayout içine yerleştiremezsiniz. Çizilebilir öğeleri ImageView içine yerleştirmeniz gerekir. Ayrıca, bir metin görünümü veya düğme için arka plan sağlamak üzere çizilebilir öğeler de kullanabilirsiniz. Arka plan, metnin arkasında çizilir.

1. adım: GDG'ler listesine çip ekleyin

Aşağıdaki işaretli çipte üç çizilebilir öğe kullanılıyor. Arka plan ve onay işareti, çizilebilir öğelerdir. Çipe dokunulduğunda, durum değişikliklerine yanıt olarak dalgalanma efekti gösteren özel bir RippleDrawable ile yapılan bir dalgalanma efekti oluşturulur.

Bu görevde, GDG'ler listesine çip ekleyip seçildiklerinde durumlarını değiştirmelerini sağlayacaksınız. Bu alıştırmada, Arama ekranının üst kısmına çip adı verilen bir düğme satırı ekleyeceksiniz. Her düğme, GDG listesini filtreleyerek kullanıcının yalnızca seçilen bölgedeki sonuçları almasını sağlar. Bir düğme seçildiğinde düğmenin arka planı değişir ve onay işareti gösterilir.

fragment_gdg_list.xml dosyasını açın.
com.google.android.material.chip.ChipGroup öğesini HorizontalScrollView. öğesinin içine yerleştirin. Tüm çipleri yatay olarak kaydırılabilir tek bir satırda sıralamak için singleLine özelliğini true olarak ayarlayın. Grupta aynı anda yalnızca bir çipin seçilebilmesi için singleSelection özelliğini true olarak ayarlayın. Kodu aşağıda bulabilirsiniz.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

layout klasöründe, bir Chip için düzeni tanımlamak üzere region.xml adlı yeni bir düzen kaynak dosyası oluşturun.
egion.xml dosyasında tüm kodu, aşağıda verilen bir Chip düzeniyle değiştirin. Bu Chip öğesinin bir Materyal bileşeni olduğunu unutmayın. Ayrıca, app:checkedIconVisible özelliğini ayarlayarak onay işareti aldığınızı da unutmayın. Eksik selected_highlight rengi için hata alırsınız.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

Eksik selected_highlight rengini oluşturmak için imleci selected_highlight üzerine getirin, amaç menüsünü açın ve seçili vurgu için renk kaynağı oluşturun. Varsayılan seçenekler uygundur. Bu nedenle, Tamam'ı tıklamanız yeterlidir. Dosya, res/color klasöründe oluşturulur.
res/color/selected_highlight.xml dosyasını açın. <selector> olarak kodlanan bu renk durumu listesinde, farklı durumlar için farklı renkler sağlayabilirsiniz. Her durum ve ilişkili renk, <item> olarak kodlanır. Bu renkler hakkında daha fazla bilgi için Renk Temaları bölümüne bakın.

<selector> içinde, durum listesine varsayılan renge sahip colorOnSurface bir öğe ekleyin. Durum listelerinde her zaman tüm durumları ele almak önemlidir. Bunu yapmanın bir yolu varsayılan bir renk kullanmaktır.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

Varsayılan rengin üzerine item renginde bir colorPrimaryVariant ekleyin ve kullanımını, seçili durumun true olduğu zamanlarla sınırlayın. Durum listeleri, bir durum ifadesi gibi yukarıdan aşağıya doğru işlenir. Durumların hiçbiri eşleşmezse varsayılan durum uygulanır.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

2. adım: Çiplerin sırasını gösterin

GDG uygulaması, GDG'lerin bulunduğu bölgeleri gösteren bir çip listesi oluşturur. Bir çip seçildiğinde uygulama, sonuçları yalnızca o bölgedeki GDG sonuçlarını gösterecek şekilde filtreler.

Arama paketinde GdgListFragment.kt dosyasını açın.
onCreateView() içinde, return ifadesinin hemen üstünde, viewModel.regionList üzerinde bir gözlemci ekleyin ve onChanged()'ü geçersiz kılın. Görünüm modeli tarafından sağlanan bölge listesi değiştiğinde çipleri yeniden oluşturmak gerekir. Sağlanan data null ise hemen iade etmek için bir ifade ekleyin.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

onChanged() içinde, boş testin altında, regionList öğesini önbelleğe almak için binding.regionList öğesini chipGroup adlı yeni bir değişkene atayın.

val chipGroup = binding.regionList

Aşağıda, chipGroup.context öğesinden gelen çipleri şişirmek için yeni bir layoutInflator oluşturun.

val inflator = LayoutInflater.from(chipGroup.context)

Veri bağlama hatasını gidermek için projenizi temizleyip yeniden oluşturun.

Artık, şişiricinin altında regionList içindeki her bölge için bir tane olacak şekilde gerçek çipleri oluşturabilirsiniz.

Tüm çipleri tutmak için bir değişken (children) oluşturun. Her çipi oluşturup döndürmek için iletilen data üzerinde bir eşleme işlevi atayın.

val children = data.map {}

Harita lambda'sının içinde, her regionName için bir çip oluşturup şişirin. Tamamlanmış kod aşağıda verilmiştir.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

Lambda'nın içinde, chip döndürülmeden hemen önce bir tıklama işleyici ekleyin. chip tıklandığında durumunu checked olarak ayarlayın. onFilterChanged() işlevini viewModel içinde çağırır. Bu işlem, bu filtrenin sonucunu getiren bir etkinlik dizisini tetikler.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

Lambanın sonunda, chipGroup simgesinden mevcut tüm görünümleri kaldırın, ardından children simgesindeki tüm çipleri chipGroup simgesine ekleyin. (Çipleri güncelleyemezsiniz. Bu nedenle, chipGroup içeriğini kaldırıp yeniden oluşturmanız gerekir.)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

Tamamlanmış gözlemciniz şu şekilde olmalıdır:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

Uygulamanızı çalıştırın ve yeni çiplerinizi kullanmak için Arama ekranını açmak üzere GDGS'yi arayın. Her çipi tıkladığınızda uygulama, altındaki filtre gruplarını gösterir.

Gece modu, cihaz ayarları gece modunu etkinleştirecek şekilde ayarlandığında uygulamanızın renklerini koyu temaya dönüştürmesine olanak tanır. Gece modunda uygulamalar, varsayılan açık renkli arka planlarını koyu renkli arka planlarla değiştirir ve diğer tüm ekran öğelerini buna göre değiştirir.

1. adım: Gece modunu etkinleştirin

Uygulamanızda koyu tema sağlamak için temasını Light temasından DayNight adlı temaya değiştirirsiniz. DayNight teması, moda bağlı olarak açık veya koyu görünür.

styles.xml, içinde AppTheme üst temasını Light yerine DayNight olarak değiştirin.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

MainActivity'nın onCreate() yönteminde, koyu temayı programatik olarak etkinleştirmek için AppCompatDelegate.setDefaultNightMode()'yi çağırın.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Uygulamayı çalıştırın ve koyu temaya geçiş yaptığını doğrulayın.

2. adım: Kendi koyu tema renk paletinizi oluşturun

Koyu temayı özelleştirmek için kullanılacak koyu tema ile ilgili -night niteleyicisi içeren klasörler oluşturun. Örneğin, values-night adlı bir klasör oluşturarak gece modunda belirli renkleri kullanabilirsiniz.

material.io renk seçici aracını ziyaret edin ve gece teması renk paleti oluşturun. Örneğin, koyu mavi bir rengi temel alabilirsiniz.
colors.xml dosyasını oluşturup indirin.
Projenizdeki tüm klasörleri listelemek için Proje Dosyaları görünümüne geçin.
res klasörünü bulup genişletin.
res/values-night kaynak klasörü oluşturun.
Yeni colors.xml dosyasını res/values-night kaynak klasörüne ekleyin.
Uygulamanızı gece modu etkin durumdayken çalıştırın. Uygulama, res/values-night için tanımladığınız yeni renkleri kullanmalıdır. Çiplerin yeni ikincil rengi kullandığını fark edin.

Android Studio projesi: GDGFinderFinal.

Sağdan sola yazılan diller için destek

Android Manifest'te android:supportsRtl="true" değerini ayarlayın.
Sağdan sola dil desteğini emülatörde önizleyebilir ve ekran düzenlerini kontrol etmek için kendi dilinizi kullanabilirsiniz. Bir cihazda veya emülatörde Ayarlar'ı açın ve Geliştirici Seçenekleri'nde RTL düzenini zorla'yı seçin.
Left ve Right referanslarını Start ve End referanslarıyla değiştirin.
android:autoMirrored="true" öğesini silerek çizilebilir öğeler için yansıtmayı devre dışı bırakın.
Android Studio'nun işi sizin için yapmasına izin vermek üzere Yeniden düzenle > Mümkün olduğunda RTL desteği ekle 'yi seçin.
Dile özel kaynakları depolamak için values-"dil kodu" klasörlerini kullanın.

Erişilebilirlik için tarama

Play Store'dan Google LLC tarafından geliştirilen Erişilebilirlik Tarayıcısı'nı indirip çalıştırarak iyileştirilecek ekran öğelerini tarayın.

İçerik açıklamalarıyla TalkBack için tasarım

Google tarafından geliştirilen ve TalkBack'i içeren Android Erişilebilirlik Seti'ni yükleyin.
Tüm kullanıcı arayüzü öğelerine içerik açıklamaları ekleyin. Örneğin:
android:contentDescription="@string/stage_image_description"
EditText gibi düzenlenebilir bir öğe için, kullanıcılara ne yazacakları konusunda ipucu vermek üzere XML'de android:hint özelliği kullanın.
İlgili öğeleri bir görünüm grubuna sararak içerik grupları oluşturun.
Kullanıcılara android:accessibilityLiveRegion ile ek geri bildirim vermek için canlı bölge oluşturun.

Filtre uygulamak için çipleri kullanma

Çipler, bir özelliği, metni, varlığı veya işlemi temsil eden kompakt öğelerdir.
Çip grubu oluşturmak için com.google.android.material.chip.ChipGroup kullanın.
Bir com.google.android.material.chip.Chip için düzeni tanımlayın.
Çiplerinizin renk değiştirmesini istiyorsanız durum bilgisi içeren renklerle birlikte <selector> olarak bir renk durumu listesi sağlayın:
<item android:color="?attr/colorPrimaryVariant" android:state_selected="true" />
Görünüm modelindeki verilere bir gözlemci ekleyerek çipleri canlı verilere bağlayın.
Çipleri görüntülemek için çip grubu için bir şişirici oluşturun:
LayoutInflater.from(chipGroup.context)
Çipleri oluşturun, istenen işlemi tetikleyen bir tıklama işleyici ekleyin ve çipleri çip grubuna ekleyin.

Koyu modu destekleme

Koyu modu desteklemek için DayNight AppTheme kullanın.
Koyu modu programatik olarak ayarlayabilirsiniz:
AppCompatDelegate.setDefaultNightMode()
Koyu mod için özel renkler ve değerler sağlamak üzere res/values-night kaynak klasörü oluşturun.

Android geliştirici belgeleri:

Diğer kaynaklar:

Kotlin ile Android Uygulamaları Geliştirme (Udacity kursu)
Kotlin Bootcamp for Programmers (Udacity kursu)
Programcılar için Kotlin Temel Eğitim Programı codelab'leri

Bu bölümde, bir eğitmenin yönettiği kurs kapsamında bu codelab'i tamamlayan öğrenciler için olası ödevler listelenmektedir. Eğitmen, aşağıdakileri yapmalıdır:

Gerekirse ödev atayın.
Öğrencilere ev ödevi ödevlerini nasıl göndereceklerini bildirin.
Ödevlere not verin.

Eğitmenler bu önerileri istedikleri kadar kullanabilir ve uygun olduğunu düşündükleri diğer ödevleri verebilirler.

Bu codelab'i kendi başınıza tamamlıyorsanız bilginizi test etmek için bu ödevleri kullanabilirsiniz.

1. Soru

Aşağıdakilerden hangisi sağdan sola dilleri desteklemek için zorunludur?

▢ Mülklerdeki Left ve Right değerlerini Start ve End ile değiştirin

▢ Sağdan sola yazılan bir dile geçme

▢ Tüm simgelerin android:autoMirrored="true" kullandığından emin olun.

▢ İçerik açıklamaları ekleyin

2. Soru

Aşağıdaki erişilebilirlik araçlarından hangisi çoğu Android cihazda yerleşik olarak bulunur?

▢ TalkBack

▢ Erişilebilirlik Tarayıcısı

▢ Android Studio'da Refactor > Add RTL support where possible (Yeniden düzenle > Mümkün olduğunda sağdan sola dil desteği ekle)

▢ Lint

3. Soru

Aşağıdakilerden hangisi cipsler hakkında doğru değildir?

▢ Çipleri ChipGroup kapsamında gösteriyorsunuz.

▢ ChipGroup için renk durumu listesi sağlayabilirsiniz.

▢ Çipler, giriş, özellik veya işlemi temsil eden kompakt öğelerdir.

▢ Uygulamanızda çip kullanılıyorsa DarkTheme her zaman etkinleştirilmelidir.

4. Soru

Hangi tema, koyu ve açık modlar için stil oluşturmanıza olanak tanır?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

5. Soru

Canlı bölge nedir?

▢ Kullanıcı için önemli bilgiler içeren bir düğüm

▢ Material Design yönergelerine göre şekli değişen bir ekran bölgesi

▢ Video yayınına izin veren bir görünüm

▢ Animasyonlu bir çizilebilir öğe