Android Studio Arayüz Çalışması
Bu yazımda sizlere bu tasarımı nasıl yaptığımı açıklayacağım. Kaynak kodu incelerseniz projenin Türkçe dil desteği olduğunu da göreceksiniz. Çoklu dil desteğinin nasıl yapıldığını öğrenmek için bu yazımı inceleyebilirsiniz 🥳
1- Görsel Materyalinizi Hazırlayın
Herhangi bir telif hakkı bulunmayan pek çok görsele internet sayesinde erişebilirsiniz. Benim en çok kullandığım sitelerden biri freepik. Ancak bu uygulamada storyset’ den yararlandım. Siz de aynı görseli, dilediğiniz renkte alıp bilgisayarınıza indirebilirsiniz.
2- Renk Araçları
Uygulamanın pek çok yerinde görsel bütünlüğü sağlamak için renklere bol bol ihtiyacımız olacak. Pek çok aralıkta renk çeşidi olduğu için bizim bu renklerin kodlarını ezbere bilmemiz ya da tam anlamıyla istediğimiz rengi elde etmemiz çok zor. Bu yüzden yine kendi kullandığım bir kaç siteyi buraya ekliyorum.
⭐️https://coolors.co/palettes/trending
⭐️https://material.io/resources/color/#!/?view.left=0&view.right=0
⭐️https://color.adobe.com/tr/create/color-wheel
⭐️https://www.materialpalette.com/brown/grey
3- Android Studio’da Proje Oluşturun
- “Create New Project” butonuna tıkladığımızda bizden ne tür bir proje oluşturmak istediğimiz sorgulanır. Bu kısımda “Empty Activity” seçeneğinden devam edebilirsiniz.
- Bu aşamada “Name” kısmına proje adınızı yazmanız gerekmektedir. Ben örnek olarak “TasarimCalismasi” şeklinde oluşturdum. Türkçe karakter kullanmamaya dikkat etmelisiniz.
- “Package name” kısmı özellikle uygulamanızı Play Store’a ya da Google Play’e yüklerken oldukça önemlidir. Çünkü o zaman bu ismin spesifik olması beklenmektedir. Siz proje ismini oluştururken otomatik olarak package kısmına da proje ismi eklenecektir. Benim package name kısmımda “com.yamure.tasarimcalismasi” yazmaktadır. Siz de araya kendi adınızı ekleyebilirsiniz.
- “Finish” butonuna basıp projenin oluşması için bekleyiniz. Bu işlem bilgisayarınızın performansına göre biraz zaman alabilir. İlk çalıştırmada bu gecikmeler normal bu yüzden korkmanıza gerek yok.
4-Görselin Android Studio’ya Eklenmesi
- En üstte belirttiğim storyset sitesinden ya da herhangi bir siteden indirdiğiniz görselin adını basitçe Türkçe karakter kullanmadan değiştirin. Benim görselimin ismi “welcome.png”. Daha sonra görseli kopyalayın ve Android Studio’ya geri dönün.
- Burada dikkat etmeniz gereken ilk nokta en üstte “Android” seçili olması. Daha sonra Resources yani kaynaklar anlamına gelen “res” klasörünü içindeki “drawable” klasörüne sağ tıklayıp “paste” işlemini gerçekleştiriyoruz.
- Artık görselimiz Android Studio içinde kullanılabilir durumdadır.
5- activity_main.xml
- Yine “res” klasöründe bulunan “layout” package’daki activity_main.xml dosyasını üzerine çift tıklayarak açın.
- Açılan sayfada yan sekmeden ImageView’a basın ve ekrana sürükleyin. Tam bu esnada bir ekran açılacak ve size hangi görseli yüklemek istediğinizi soracak. Burada benim welcome.png olarak isimlendirdiğim görseli siz de kendi klasörünüz içinde bulup işlemi bitirin.
- Gördüğünüz üzere “Remember Me!” ve LOGIN butonu dışında her şey ekrana ortalanmış durumda. Bunu elde etmek için, örneğin görseli ekrana sürükledikten sonra görselin üzerine sağ tıklayıp açılan pencereden “Center” kısmından “Horizontally” seçeneğini işaretlemelisiniz.
- “Username or Email” ve “Password” yazılarını, daha önce ImageView’u sürüklediğimiz yerden “TextView” sürükleyip düzenleyerek elde edebilirsiniz.
- LOGIN butonunu elde etmek için yine aynı yerden “button” sürüklemeniz gerekmektedir.
- “Remember Me” butonu için ise “CheckBox” eklemelisiniz.
- Tüm bunları ekledikten sonra aralarındaki mesafeyi şekilde gördüğünüz ölçülerde ayarlayabilirsiniz.
Projenin kaynak koduna buradan ulaşabilirsiniz 🦸
