UI, bizim müşteriye göstereceğimiz vitrinimizdir. Bu yüzden yazılımınızın basit, etkili ve kullanıcı dostu bir arayüz tasarımına sahip olması oldukça büyük bir öneme sahiptir.

Bu makale, Android tasarımlarında son zamanlarda trend olan arayüz elementlerinin köşelerini yuvarlatma işlemini en kolay ve iyi nasıl yapabileceğinizi anlatacağım.

Aşağıdaki resimde kullanılan köşeleri yuvarlatılmış öğeleri oluşturmayı örneklendireceğim.

Anlatacağım yöntemler:

1. CardView ile köşeleri yuvarlatma
2. Shape xml yapısı ile köşeleri yuvarlatma

1-CardView ile köşeleri yuvarlatma

CardView bir arayüz elementidir. CardView’in cardCornerRadius adında bir özelliği bulunmaktadır. Bu özelliği ekleyip, sonrasında CardView’in içine koyduğunuz arayüz elementlerinin kapsadığı alanın köşeleri yuvarlatılmış olacaktır.

Peki tüm arayüz elementlerinde bu işlevi eklemek için CardView kullanmak mantıklı mıdır? Eğer tek bir arayüz elementinin köşelerini yuvarlatacaksanız CardView tercih edilmez. Çünkü Shape xml yapısını kullanarak bu işi daha sade ve az kod ile yapabiliriz.:)  CardView yöntemi, içeresinde birden fazla arayüz elementlerinin olduğu kapsama alanının köşelerini yuvarlatacağınızda daha çok tercih edilir. (Şekil-1)

Şekil-1

CardView Örneği

İlk örneğimizin görünümü üstteki Şekil-1 deki gibi olacak.:) Bu örneği tamamladıktan sonra tasarıma yeni örnekler ekleyeceğim.

İlk önce bu örnekte kullandığım resimleri https://smality.com/resimler.zip linkinden indiriniz. Sonrasında zip klasörünün içindeki tüm dosyaları alıp, projenizde app->src->main>res yolunu takip ederek, res dizinin içine ekleyin.

Örnek resimde bulunan Vegetables alanını tek başına nasıl yapacağımızı görelim.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#F6F4F4">
    <!--cardCornerRadius haricinde kullanılan özellikler sadece CardView'i hızalamak için kullanıldı -->
    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        app:cardCornerRadius="15dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints">
        <!-- ConstraintLayout'u sadece arayüz elementlerini kolay hızalamak için kullandım.-->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/image2" />
            <TextView
                android:id="@+id/vege"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="18dp"
                android:layout_marginTop="10dp"
                android:text="Vegetables"
                android:textColor="#000000"
                android:textSize="20sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView2" />
            <TextView
                android:id="@+id/number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="18dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="15dp"
                android:text="(43)"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/vege" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

 

2-Shape xml yapısı ile köşeleri yuvarlatma

EditText, Button, TextView vb. arayüz elementlerinin köşelerini yuvarlatma işlemini daha az kod ile oluşturmak istiyorsanız, shape xml yapısını kullanmalısınız. Örneğin, sayfa tasarımınızda birden fazla köşeleri yuvarlanmış EditText var olduğunu düşünelim.  Bu görseli CardView kullanarak kodlarsanız, her bir EditText için ayrı bir CardView oluşturmanız gerekir. Eğer bu tasarımda shape xml yapısını kullanarak kodlarsanız, 1 tane shape xml dosyası oluşturup, bu dosyayı her bir EditText’in background özelliğinde çağırarak 1 satır kodla tüm EditText’lerin köşelerini aynı ölçüde yuvarlarsınız.

Shape xml Örneği

Örneğimizin kodlamasını bitirdiğimizde aşağıdaki gibi bir görüntü elde edeceğiz.

İlk önce projenizde app->src->main>res yolunu takip edip res dizini içindeki drawable dizinine sağ tıklayınız. Açılan pencerede New->Drawable Resource File seçerek drawable xml dosyasını oluşturun ve içine aşağıdaki kod yerleştirin.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp" />
    <!--Border rengini tanımlama-->
    <stroke android:width="1dp" android:color="#e2e0e3" />
    <!--Background(arkaplan) rengini tanımlama-->
    <solid android:color="#ffffff" />
</shape>

Kod açıklaması

Üstteki kodda corners tag’i arayüz elementinin köşelerinde değişiklik sağlar. Corners tag’inin radius özelliği, belirttiğiniz dp değeri kadar köşeleri yuvarlaklaştırır.

Şimdi tek yapmamız gereken işlem, layout xml’deki EditText’in background özelliğine oluşturduğumuz drawable xml’in yolunu eklemektir. (@drawable/rounded_edt)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F6F4F4">
    <!--drawableLeft ve drawablePadding özellikleri search iconunu eklemek için kullanıldı-->
    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/rounded_edt"
        android:drawableLeft="?android:attr/actionModeWebSearchDrawable"
        android:drawablePadding="15dp"
        android:ems="10"
        android:hint="Search"
        android:inputType="textPersonName"
        android:padding="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Anlattıklarımın hepsini bir projede birleştirdim ve aşağıdaki görünümü veren projenin kodlarına github linkinden ulaşabilirsiniz.