Android: Basit UI Style

By Cem Dırman On Şub 11, 2020

Ö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



<?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>

<?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>

Ş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.



&lt;style name="btnStyle" parent="TextAppearance.AppCompat"&gt;
    &lt;item name="android:background"&gt;@drawable/btn_rounded&lt;/item&gt;
    &lt;item name="android:textColor"&gt;@color/white&lt;/item&gt;
    &lt;item name="android:textSize"&gt;15dp&lt;/item&gt;
    &lt;item name="android:fontFamily"&gt;monospace&lt;/item&gt;
&lt;/style&gt;

&lt;style name="editTextStyle" parent="TextAppearance.AppCompat"&gt;
    &lt;item name="android:background"&gt;@color/white&lt;/item&gt;
    &lt;item name="android:fontFamily"&gt;monospace&lt;/item&gt;
    &lt;item name="android:textSize"&gt;15dp&lt;/item&gt;
    &lt;item name="android:padding"&gt;10dp&lt;/item&gt;
    &lt;item name="android:textColor"&gt;@color/black&lt;/item&gt;
&lt;/style&gt;

&lt;style name="textViewStyle" parent="TextAppearance.MaterialComponents.Headline1"&gt;
    &lt;item name="android:fontFamily"&gt;monospace&lt;/item&gt;
    &lt;item name="android:textSize"&gt;20dp&lt;/item&gt;
    &lt;item name="android:textColor"&gt;@color/black&lt;/item&gt;
    &lt;item name="android:textStyle"&gt;bold&lt;/item&gt;
&lt;/style&gt;

<item name="android:background">@drawable/btn_rounded</item>

<item name="android:textColor">@color/white</item>

<item name="android:fontFamily">monospace</item>

</style>

<item name="android:background">@color/white</item>

<item name="android:fontFamily">monospace</item>

<item name="android:textColor">@color/black</item>

</style>

<item name="android:fontFamily">monospace</item>

<item name="android:textColor">@color/black</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.



<?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>

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

<color name="colorAccent">#FFFFFF</color>

</resources>

Şimdi ise style.xml’deki btnSyle tanımızda bulunan background özelliğini bakacağız.

Bu dosyada ise butonumuza şekil vereceğiz.



<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>

<shape android:shape="rectangle"

xmlns:android="http://schemas.android.com/apk/res/android">

</shape>

Sonuç olarak aşağıdaki tasarımı elde edeceğiz.

Faydalı olması dileğiyle.