Eğitim

Android Studio View Türleri ve Detaylı Örnek

Android Studio View Türleri ve Detaylı Örnek

Android Studio’da View Türleri

Android uygulamalarının temel yapı taşlarından biri olan View‘lar, kullanıcı arayüzünün (UI) görsel elemanlarını temsil eder. Bu yazıda, Android Studio’da kullanılan temel View Türlerini inceleyeceğiz ve her birinin özelliklerini, kullanım alanlarını ve örneklerini açıklayacağız.


1. TextView

TextView, metin görüntülemek için kullanılan temel bir görünümdür. Statik veya dinamik olarak metin göstermek istediğinizde kullanılır.

Özellikleri:

  • Metin boyutu, rengi ve hizalaması özelleştirilebilir.
  • HTML benzeri biçimlendirme destekler (Html.fromHtml yöntemi ile).
  • Çok satırlı metin desteği sağlar.

Kullanım Örneği:

<TextView
android:id=”@+id/textView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Merhaba Dünya!”
android:textSize=”18sp”
android:textColor=”#000000″ />

2. EditText

EditText, kullanıcıdan metin girdisi almak için kullanılır. Genellikle bir form alanında tercih edilir.

Özellikleri:

  • Farklı giriş türlerini destekler (örneğin, e-posta, şifre, telefon).
  • İpucu (hint) metni ekleyerek kullanıcıya yardımcı olabilir.
  • Giriş doğrulama ve sınırlandırma yapılabilir.

Kullanım Örneği:

<EditText
android:id=”@+id/editText”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Adınızı girin”
android:inputType=”textPersonName” />

3. Button

Button, kullanıcıların bir eylemi tetiklemek için tıklayabileceği bir bileşendir. Özel stillerle özelleştirilebilir.

Özellikleri:

  • Tıklanma olaylarını (onClick) destekler.
  • Arka plan rengi, metin rengi ve şekli özelleştirilebilir.

Kullanım Örneği:

<Button
android:id=”@+id/button”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Gönder”
android:onClick=”gonderTiklandi” />

4. ImageView

ImageView, görselleri göstermek için kullanılır. Statik veya dinamik olarak resim yüklenebilir.

Özellikleri:

  • Görselleri ölçeklendirmek için farklı seçenekler sunar (fitCenter, centerCrop, vb.).
  • Drawable kaynakları veya URI kullanılarak görseller eklenebilir.

Kullanım Örneği:

<ImageView
android:id=”@+id/imageView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/sample_image”
android:contentDescription=”Örnek resim” />

5. RecyclerView

RecyclerView, büyük veri listelerini ve grid düzenlerini optimize bir şekilde göstermek için kullanılır. Daha gelişmiş özellikler sunar ve modern uygulamalar için standarttır.

Özellikleri:

  • Esnek düzen seçenekleri sağlar (LinearLayoutManager, GridLayoutManager).
  • Performansı artırmak için kaydırılabilir öğeleri geri dönüştürür.
  • Kart tabanlı tasarımlar için CardView ile birlikte kullanılabilir.

Kullanım Örneği:

<androidx.recyclerview.widget.RecyclerView
android:id=”@+id/recyclerView”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:scrollbars=”vertical” />

6. ProgressBar

ProgressBar, işlemlerin ilerleme durumunu göstermek için kullanılır. Belirli veya belirsiz bir durumu temsil edebilir.

Özellikleri:

  • Dönen bir animasyon veya yatay ilerleme çubuğu şeklinde kullanılabilir.
  • İlerleme değeri dinamik olarak güncellenebilir.

Kullanım Örneği:

<ProgressBar
android:id=”@+id/progressBar”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:indeterminate=”true” />

7. Switch

Switch, kullanıcıların bir durumu açıp kapatması için kullanılan bir bileşendir. Modern tasarımlarda sıkça tercih edilir.

Özellikleri:

  • “On” ve “Off” durumlarını temsil eder.
  • Varsayılan durumu (isChecked) ayarlanabilir.

Kullanım Örneği:

<Switch
android:id=”@+id/switch”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Bildirimler”
android:checked=”true” />

8. WebView

WebView, bir web sayfasını uygulama içinde görüntülemek için kullanılır. HTML, CSS ve JavaScript desteği sunar.

Özellikleri:

  • Web içeriklerini bir tarayıcıya ihtiyaç duymadan gösterebilir.
  • Dinamik içerik yükleme destekler.

Kullanım Örneği:

<WebView
android:id=”@+id/webView”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:overScrollMode=”never” />

Bu makalede , Android Studio’da yaygın olarak kullanılan View Türlerini ve her birinin özelliklerini inceledik. Uygulamanızda doğru view seçimleri yapmak, hem kullanıcı deneyimini artırır hem de performansı optimize eder. Bu view’ları uygulamalarınızda kullanarak, daha etkili ve profesyonel tasarımlar oluşturabilirsiniz.

Son olarak bu view türlerinin tamamının olduğu basit bir uygulama ile bunları nasıl pekiştirebiliriz ona bakalım .

Örnek :

  • TextView ile bir başlık göstereceğiz.
  • EditText ile kullanıcıdan bir metin alacağız.
  • Button ile işlemi tetikleyeceğiz.
  • ImageView bir resim gösterecek.
  • RecyclerView listeleme yapacak.
  • ProgressBar işlemin durumu için kullanılacak.
  • Switch ile bir durumu açıp kapatacağız.
  • WebView ile bir web sayfası göstereceğiz.

Adım Adım Uygulama

1. XML Dosyası (activity_main.xml)

<?xml version=”1.0″ encoding=”utf-8″?>
<ScrollView xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:padding=”16dp”>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:gravity=”center_horizontal”>

<!– TextView –>
<TextView
android:id=”@+id/tvTitle”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Android View Türleri”
android:textSize=”24sp”
android:textStyle=”bold”
android:layout_marginBottom=”16dp” />

<!– EditText –>
<EditText
android:id=”@+id/etInput”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Bir şeyler yazın”
android:layout_marginBottom=”16dp” />

<!– Button –>
<Button
android:id=”@+id/btnSubmit”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Gönder”
android:layout_marginBottom=”16dp” />

<!– ImageView –>
<ImageView
android:id=”@+id/ivImage”
android:layout_width=”200dp”
android:layout_height=”200dp”
android:src=”@drawable/ic_launcher_foreground”
android:layout_marginBottom=”16dp” />

<!– RecyclerView –>
<androidx.recyclerview.widget.RecyclerView
android:id=”@+id/recyclerView”
android:layout_width=”match_parent”
android:layout_height=”200dp”
android:layout_marginBottom=”16dp” />

<!– ProgressBar –>
<ProgressBar
android:id=”@+id/progressBar”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:visibility=”gone”
android:layout_marginBottom=”16dp” />

<!– Switch –>
<Switch
android:id=”@+id/switchExample”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Durum: Kapalı”
android:layout_marginBottom=”16dp” />

<!– WebView –>
<WebView
android:id=”@+id/webView”
android:layout_width=”match_parent”
android:layout_height=”200dp” />

</LinearLayout>
</ScrollView>

2. MainActivity (Kotlin)

package com.example.viewtypes

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.Switch
import android.widget.TextView
import android.webkit.WebView
import android.widget.ProgressBar
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

// Görünümleri bağla
val tvTitle = findViewById<TextView>(R.id.tvTitle)
val etInput = findViewById<EditText>(R.id.etInput)
val btnSubmit = findViewById<Button>(R.id.btnSubmit)
val ivImage = findViewById<ImageView>(R.id.ivImage)
val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
val progressBar = findViewById<ProgressBar>(R.id.progressBar)
val switchExample = findViewById<Switch>(R.id.switchExample)
val webView = findViewById<WebView>(R.id.webView)

// RecyclerView ayarla
val items = listOf(“Item 1”, “Item 2”, “Item 3”, “Item 4”)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = SimpleAdapter(items)

// Button tıklama işlemi
btnSubmit.setOnClickListener {
val inputText = etInput.text.toString()
tvTitle.text = “Girdi: $inputText”
}

// Switch durumu
switchExample.setOnCheckedChangeListener { _, isChecked ->
if (isChecked) {
switchExample.text = “Durum: Açık”
progressBar.visibility = ProgressBar.VISIBLE
} else {
switchExample.text = “Durum: Kapalı”
progressBar.visibility = ProgressBar.GONE
}
}

// WebView ile URL yükleme
webView.loadUrl(“https://www.google.com”)
}
}

3. RecyclerView Adapter (SimpleAdapter.kt)

package com.example.viewtypes

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class SimpleAdapter(private val items: List<String>) : RecyclerView.Adapter<SimpleAdapter.ViewHolder>() {
class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val textView: TextView = view.findViewById(android.R.id.text1)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(android.R.layout.simple_list_item_1, parent, false)
return ViewHolder(view)
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.textView.text = items[position]
}

override fun getItemCount(): Int = items.size
}

Keyifli kodlamalar ..

Bir yanıt yazın