Android UI Tasarımı: Layout, Widget ve Material Design ile Modern Arayüzler Oluşturma
Kullanıcı arayüzü (UI), uygulamanızın ilk izlenimidir. İyi tasarlanmış bir UI, kullanıcı memnuniyetini artırırken, kötü tasarım uygulamayı başarısız yapabilir. Bu rehberde, Android'de modern ve kullanıcı dostu arayüzler oluşturmayı öğreneceksiniz.
İçeriklerden Faydalanmak için Üye olmanız Gerekmektedir. Giriş yap veya üye ol.
Layout Türleri
LinearLayout
Bileşenleri satır veya sütun halinde düzenler.
Java:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView android:text="İlk" />
<TextView android:text="İkinci" />
</LinearLayout>RelativeLayout
Bileşenleri birbirine göre konumlandırır.
Kod:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
android:text="Başlık" />
<TextView
android:layout_below="@id/title"
android:text="Açıklama" />
</RelativeLayout>ConstraintLayout
Modern ve esnek layout sistemidir. Kompleks UI'lar için önerilir.
Java:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Başlık" />
</androidx.constraintlayout.widget.ConstraintLayout>FrameLayout
Bileşenleri üst üste yığar. Genellikle Fragment'ler için kullanılır.
TextView
Metin göstermek için kullanılır.
Java:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Merhaba"
android:textSize="18sp"
android:textColor="#000000" />EditText
Kullanıcı girişi için kullanılır.
Java:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Ad soyad girin"
android:inputType="text" />Button
Tıklanabilir düğme oluşturur.
Java:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gönder" />ImageView
Görüntü göstermek için kullanılır.
Java:
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/ic_launcher" />RecyclerView
Liste veya grid göstermek için kullanılır.
Java:
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />Material Design
Material Design, Google'ın modern tasarım felsefesidir. Tutarlı, estetik ve işlevsel arayüzler oluşturmaya yardımcı olur.
Material Design 3 Özelikleri:
- Dinamik Renk: Cihaz tema rengine göre otomatik renk ayarlaması.
- Basit Typography: Açık ve okunması kolay font kullanımı.
- Gölgeler ve Yükseklik: 3D efekti oluşturmak için gölge kullanma.
- Boşluk Kullanımı: Görsel denge için yeterli boşluk.
Material Design Kütüphanesi
Kullanmabuild.gradle dosyasına ekleyin:
Java:
dependencies {
implementation 'com.google.android.material:material:1.10.0'
}Material Button Örneği
Java:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gönder"
app:cornerRadius="8dp" />Material TextField Örneği
Java:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="E-posta">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>Tema ve Stil
Tema Oluşturma
res/values/themes.xml dosyasında tema tanımlayın:
Java:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
<item name="colorPrimary">@color/primary_color</item>
<item name="colorSecondary">@color/secondary_color</item>
<item name="colorTertiary">@color/tertiary_color</item>
</style>Renk Tanımlama
res/values/colors.xml dosyasında:
Java:
<color name="primary_color">#6750A4</color>
<color name="secondary_color">#625B71</color>
<color name="tertiary_color">#7D5260</color>Responsive Tasarım
Farklı ekran boyutlarında çalışan arayüzler tasarlamak önemlidir.
ConstraintLayout ile Responsive Tasarım
Java:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp" />
</androidx.constraintlayout.widget.ConstraintLayout>Layout Qualified Dosyaları
Farklı ekran boyutları için ayrı layout dosyaları oluşturun:
- layout/ - Telefon
- layout-land/ - Yatay yönelim
- layout-sw600dp/ - Tablet
Liste Gösterme (RecyclerView)
Adapter Yazma
Adapter Yazma
Java:
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private List<String> items;
public MyAdapter(List<String> items) {
this.items = items;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_layout, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.textView.setText(items.get(position));
}
@Override
public int getItemCount() {
return items.size();
}
static class ViewHolder extends RecyclerView.ViewHolder {
TextView textView;
ViewHolder(View itemView) {
super(itemView);
textView = itemView.findViewById(R.id.text_view);
}
}
}RecyclerView Kurma
Java:
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
List<String> items = Arrays.asList("Item 1", "Item 2", "Item 3");
MyAdapter adapter = new MyAdapter(items);
recyclerView.setAdapter(adapter);Önemli UI İpuçları
Okunabilirlik: Yeterli kontrast ve font büyüklüğü kullanın.
Dokunma Hedefleri: Düğmeler en az 48dp × 48dp olmalıdır.
Tutarlılık: Aynı renk ve stil kurallarını tüm uygulamada kullanın.
Animasyon: Ani geçişler yerine yumuşak animasyonlar kullanın.
Erişilebilirlik: Ekran okuyucular için uygun açıklama etiketleri ekleyin.
