Android EditText tasarımı geliştirmek

Eğer projenize uygun farklı bir tasarım yapmak istiyorsanız rehberimize göz atabilirsiniz. Basit ve hızlı tekniklerle sizde özel bir EditText tasarımı yapabilirsiniz.

EditText çizgisinin rengini nasıl değiştirebilirim?

XML dosyasına bir satır ekleyerek değiştirebilirsiniz.

android:backgroundTint

Örnek;

<android.support.v7.widget.AppCompatEditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Underline color change"
   app:backgroundTint="@color/blue_gray_light" />

Dikkat etmeniz gereken EditText değil AppCompatEditText componentini kullanmanız gerekmektedir.

Duruma göre çizgi rengi değiştirmek.

Aktif, pasif ve olağan durumlar için özel renkler belirleyebilirsiniz. Örneğin kullanıcı EditText’e dokunmadı başka bir nesneye dokunduysa durum olağan, EditText’e dokunduya o EditText için durum aktif ve aktif olan EditText’in dışında bir nesneye dokunduysa durum pasif olmaktadır.

Durumlar için farklı renkler tanımlamak Style dosyasını geliştirmekle oluşur. Nesneniz için bir tasarım oluşturur ve Style özelliğine karşılık gelene alana style ismini yazarak o özel style’ı giydirmiş olursunuz.

Örnek Style:

<style name="EditTextStyle">
    <item name="colorControlNormal">#FFFFFF</item>
    <item name="colorControlActivated">#FF0000</item>
    <item name="colorControlHighlight">#FFFF00</item>
</style>

Name alanına size özel tasarımınızın ismi yazabilirsiniz. Türkçe karakterler ve boşluk kabul etmemektedir.

Normal durum; yukarıda bahsettiğim olağan durumudur. Activated durumu; aktif olduğunda alacağı renk ve Highlight durum ise; yine yukarıda bahsettiğim pasif durumudur. Peki; bu stili Layout dosyamızın içindeki EditText’e nasıl uygularız gelin bunu konuşalım.

<EditText
    android:id="@+id/etPassword"
    android:layout_width="match_parent"
    android:layout_height="@dimen/user_input_field_height"
    android:layout_marginTop="40dp"
    android:hint="@string/password_hint"
    style="@style/EditTextStyle"
    android:singleLine="true" />

İşte bu kadar basit. Yukarıdaki kod satırlarında gördüğünüz üzere tek bir satır kod ile size özel giydirilmiş bir EditText yaratmanız mümkün kılındı.

Kenarları oval EditText

Yine bir özel tasarım geliştirme ile alakalı bir konu. Biliyorsunuz ki Android Studio’da tasarıma default bir EditText eklemek, köşeleri sivri veya hiç kenarlığı olmayan nesneler üretmektedir. Şimdi hem kenarlıklı, hem de oval kenarlı bir EditText yapalım.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">

<!--  Bu satır nesnenizin arka plan rengini belirler. -->
    <solid android:color="#FFFFFF"/>

<!--  Bu satırlar nesnenizin kenarlarını çizmenize olanak sağlar -->
    <stroke
        android:width="3dp"
        android:color="#FFFFFF" />

<!--  Bu satırlar ise nesnenizin kenarlarını yumuşatır. -->
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
</shape>

Daha önce hiç yukarıdaki gibi bir kod bloğu gördünüz mü? Lütfen yorumlara yazın. Bu kod bloğu EditText’inizin görüntüsünü tamamen değiştirmektedir. Çizgisi hariç.

Yukarıdaki xml bir Background’dur ve Drawable klasörünün içine oluşturulması gerekmektedir.

Drawable klasörüne oluşturulan bu dosyayı aşağıdaki gibi bir kod bloğu ile tasarımınıza giydirebilirsiniz.

 <style name="mEditText">
        <item name="android:textAppearance">@android:style/TextAppearance.Large.Inverse</item>
        <item name="android:textSize">15dp</item>
        <item name="android:singleLine">true</item>
        <item name="android:padding">10dp</item>
        <item name="android:layout_margin">10dp</item>
        <item name="android:background">@drawable/medit</item>
        <item name="android:textColor">@android:color/black</item>
    </style>

Style dosyasına eklediğiniz bu kod satırları ile kendinize tekrar tekrar kullanılabilir ve gerektiğinde tek bir düzeltme ile tüm projede değişiklik yapabilirsiniz. Düşünün, bu style dosyasını projenizdeki 1000 tane EditText nesnesine uyguladınız. Bir kafadan şöyle bir ses çıktı: “Mavi değil de siyah mı olsa?” Eğer bir style dosyası oluşturmadıysanız 1000 tane EditText üzerinde tek tek düzenleme yapmak zorunda kalacaktınız. Ama şimdi style dosyasında yapılan en ufak bir değişiklik tüm projeyi düzenleyeceğinden işleriniz çok daha kolaylaşacaktır.

<EditText
        android:id="@+id/edt"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_weight="0.5"
        android:hint="sec"
        style="@style/mEditText"/>

İşte bu kadar. Şimdi size bu tasarımın çıktısını göstereceğim.

Lütfen interetten gördüğünüz kodları uygulayın ve değiştirerek kendinize daha güzel tasarımlar yapın. Unutmayın, tecrübe azim ve istek ile hayat bulur. Sorularınız için lütfen yorum yazın. Hepsi tek tek tarafımdan incelenecektir.

Unutmadan; style satırları Values klasörünün içindeki style.xml klasörünün içine yazılır.