Özellikle mobil uygulamar için tasarım konusu çok önemli bir nokta. Çünkü kullanıcı uygulama ile bizim oluşturduğumuz tasarım üzerinden iletişime geçiyor. Bu sebepten tasarım ve uygulamanın kullanım kolaylığı kullanıcıyı içeride tutmak için olmazsa olmazlardan.
Tasarım konusunda bazı standartlarımız olmalı ve uygulamayı kullanan kişi hangi sayfada olursa olsun bir standartın olduğunu görebilmeli. Bunun için ;
- Kullanılan fontların aynı componentler için uygulamanın her yerinde aynı olmalı.
- Kullanılan font, size, renk, padding ve background gibi özellikler benzerlik taşımalı.
- Sayfaların tasarımlarında bütünlük yakalanmalıdır.
Bu bütünlüğü sağlayabilmek için style dosyaları oluşturacağız.
Şimdi örnek bir giriş sayfası tasarlayarak inceleyelim.
activity_login.xml
|
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 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:layout_gravity="center" android:gravity="center" android:background="@color/white" tools:context=".activity.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_gravity="center"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/editTextStyle" android:id="@+id/txtLoginEmail" android:inputType="textWebEmailAddress" android:hint="Email"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_gravity="center"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/editTextStyle" android:id="@+id/txtLoginPassword" android:inputType="textPassword" android:hint="Şifre"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:gravity="center"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/btnStyle" android:id="@+id/btnLogin" android:text="Giriş"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="20dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/txtKayitOl" style="@style/textViewStyle" android:text="Kayıt Ol"/> </LinearLayout> </LinearLayout> </LinearLayout> |
Şimdi ise oluşturduğumuz TextView, EditText ve Button için style dosyaları oluşturuyoruz.
Styles.xml
res/values/styles.xml dosyası style’ların bulunduğu dosyadır. Şimdi bu dosyada EditText için style oluşturalım. Burada yapacağımız tanımlamalar EditText’tin özellikleri olacak.
|
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 |
<style name="btnStyle" parent="TextAppearance.AppCompat"> <item name="android:background">@drawable/btn_rounded</item> <item name="android:textColor">@color/white</item> <item name="android:textSize">15dp</item> <item name="android:fontFamily">monospace</item> </style> <style name="editTextStyle" parent="TextAppearance.AppCompat"> <item name="android:background">@color/white</item> <item name="android:fontFamily">monospace</item> <item name="android:textSize">15dp</item> <item name="android:padding">10dp</item> <item name="android:textColor">@color/black</item> </style> <style name="textViewStyle" parent="TextAppearance.MaterialComponents.Headline1"> <item name="android:fontFamily">monospace</item> <item name="android:textSize">20dp</item> <item name="android:textColor">@color/black</item> <item name="android:textStyle">bold</item> </style> |
Color.xml
res/values/color.xml dosyası renk tamımlarının olduğu dosyadır. Renk tanımlarınızı bu dosyada yaparak istediğiniz yerden kullanabilirsiniz ve yönetimi çok daha kolay olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3e64ff</color> <color name="colorPrimaryDark">#3e64ff</color> <color name="colorAccent">#FFFFFF</color> <color name="baseColor">#3e64ff</color> <color name="white">#ffff</color> <color name="black">#000</color> </resources> |
Şimdi ise style.xml’deki btnSyle tanımızda bulunan background özelliğini bakacağız.
Bu dosyada ise butonumuza şekil vereceğiz.
|
1 2 3 4 5 6 7 8 9 |
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="50dp"></corners> <solid android:color="@color/baseColor"></solid> </shape> |
Sonuç olarak aşağıdaki tasarımı elde edeceğiz.
Faydalı olması dileğiyle.