Bir üründe müşterinin ilk gördüğü olgu tasarımdır. Bu yüzden yazılımınızın sade, etkili ve işlevselliği iyi olan bir arayüz tasarımına sahip olması oldukça büyük bir öneme sahiptir.
Bu makale, Android’de tasarım trendi olan köşeleri yuvarlatma(radius) özelliğini AlertDialog’a uygulayarak örneklemektedir.
Android’de CardView ve Shape ile Köşeleri Yuvarlatma – Radius adlı makalemde köşeleri yuvarlatma görselliğini nasıl oluşturacağınızın detaylı anlatımına ulaşabilirsiniz.
Örneğimizin çalışır hali:
1- Upload File Butonunu Tasarlama
İlk önce bir arayüz elementinin köşelerini nasıl yuvarlatacağımızı, Upload File button örneği üzerinden görelim.
1. adım: 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 (btn_back.xml) ve içine aşağıdaki kod yerleştirin.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!--radius özelliği, belirttiğiniz dp değeri kadar köşeleri yuvarlaklaştırır--> <corners android:radius="35dp" /> <!--Border rengini tanımlama--> <stroke android:width="2dp" android:color="#ff4b06" /> <!--Background(arkaplan) rengini tanımlama--> <solid android:color="#FF7B21" /> </shape> |
2. adım: btn_back dosyasında hazırladığımız tasarımı arayüz elementinizin background özelliğinizde çağırmanız gerekir. Yalnız Button elementine bu tanımlamayı yapmak bazı zamanlarda yeterli olmuyor.
Önemli Not!
Themes dosyanızda MaterialComponents kullanıyorsanız, colorPrimary da tanımlanmış renk default olarak button’a atanır. Biz button nesnesinin görselliğini değiştirmek istiyorsak, app:backgroundTint=”@null” özelliğini ekledikten sonra background özelliğinde tanımladığımız tasarımın uygulandığını görebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#DCE1FF" tools:context=".MainActivity"> <Button android:id="@+id/uploadBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_back" android:text="Upload File" app:backgroundTint="@null" app:layout_constraintBottom_toBottomOf="parent" 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> |
2- Alert Dialog Tasarımı
Alert Dialog penceresi Java sınıfında kodlanarak oluşturulan bir yapıdır. Bu yapıya istediğiniz görselliği uygulayabilmek için yeni oluşturacağımız xml dosyasını, Java tarafında tanımlamanız gerekir.
İlk önce app->src->main>res içindeki layout dizinine sağ tıklayıp, açılan pencerede New->Layout Resource File seçiniz. temp adında dosya oluşturun.
Üstteki yeşil ile belirttiğim gibi köşeleri yuvarlatmak istiyorsanız, CardView arayüz elementini kullanmalısınız. Neden CardView kullanmalıyız? Çünkü CardView yöntemi, içeresinde birden fazla arayüz elementlerinin olduğu kapsama alanının köşelerini yuvarlatacağımızda daha çok tercih edilir. Eğer tek tip arayüz elementinin köşelerini yuvarlatacaksanız, Upload File Butonunu Tasarlama başlığında anlattığım Shape xml yapısını kullanmalısınız. Daha detaylı anlatım için Android’de CardView ve Shape ile Köşeleri Yuvarlatma – Radius adlı makalemi inceleyebilirsiniz.
Alert dialog tasarımında kullandığım ikona resimler linkinden ulaşabilirsiniz. Continue button tasarımını da Upload File Butonunu Tasarlama başlığında anlattığım şekilde yaptım. CardView’in cardCornerRadius adında bir özelliği bulunmaktadır. Bu özeliği sayesinde köşeler yuvarlanır.
|
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 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <androidx.cardview.widget.CardView android:id="@+id/alertWindow" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" app:cardCornerRadius="35dp" app:contentPadding="10dp" tools:ignore="MissingConstraints" tools:layout_editor_absoluteX="5dp" tools:layout_editor_absoluteY="5dp"> <!-- 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="wrap_content"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="33dp" android:layout_marginBottom="44dp" android:background="@drawable/btn_back" android:paddingLeft="30dp" android:paddingRight="30dp" android:text="Continue" app:backgroundTint="@null" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.501" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="44dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/warn" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Your file is over 3MB, this may harm your application" android:textAlignment="center" android:textSize="18sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:text="Upload attention!" android:textColor="#000000" android:textSize="24sp" android:textStyle="bold" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.502" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView" /> </androidx.constraintlayout.widget.ConstraintLayout> </androidx.cardview.widget.CardView> </androidx.constraintlayout.widget.ConstraintLayout> |
Son olarak Java tarafında Alert Dialog yapısını oluşturacağız. Bu bölümü isterseniz Kotlin diliylede yazabilirsiniz. Bu makalede dikkat etmemiz gereken bölüm UI/UX tarafıdır.
|
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 |
import androidx.appcompat.app.*; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button uploadFBtn=findViewById(R.id.uploadBtn); uploadFBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { AlertDialog.Builder dialogBuilder= new AlertDialog.Builder(MainActivity.this); //Hazırladığımız Alert dialog tasarımını tanımlıyoruz. dialogBuilder.setView(R.layout.temp); final AlertDialog alertDialog= dialogBuilder.create(); alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); alertDialog.show(); } }); } } |
Anlattıklarımın hepsini bir projede birleştirdim ve projenin kodlarına github linkinden ulaşabilirsiniz.
