UI Controls & Widgets

Basic Controls

TextView & EditText

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Username"
    android:textColor="@color/textPrimary"
    android:textSize="16sp" />

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your username">
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>

Button Variants

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Default Button" />

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/Widget.Material3.Button.TonalButton"
    android:text="Tonal" />

<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.TextButton"
    android:text="Text Button" />

<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.IconButton"
    android:icon="@drawable/ic_search" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_add" />

RecyclerView

// Layout
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

// Adapter
class UserAdapter(private val users: List<User>) :
    RecyclerView.Adapter<UserAdapter.UserViewHolder>() {

    class UserViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val nameText: TextView = itemView.findViewById(R.id.nameText)
        val emailText: TextView = itemView.findViewById(R.id.emailText)
    }

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

    override fun onBindViewHolder(holder: UserViewHolder, position: Int) {
        val user = users[position]
        holder.nameText.text = user.name
        holder.emailText.text = user.email
        holder.itemView.setOnClickListener {
            // Handle click
        }
    }

    override fun getItemCount() = users.size
}

// Setup in Activity
recyclerView.adapter = UserAdapter(users)
recyclerView.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))

Different LayoutManagers

// Linear layout
recyclerView.layoutManager = LinearLayoutManager(this)

// Grid layout
recyclerView.layoutManager = GridLayoutManager(this, 2)

// Staggered grid (like Pinterest)
recyclerView.layoutManager = StaggeredGridLayoutManager(2,
    StaggeredGridLayoutManager.VERTICAL)

Other Important Widgets

<!-- ProgressBar -->
<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

<!-- ProgressBar (horizontal) -->
<ProgressBar
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:progress="65"
    android:max="100" />

<!-- SeekBar (slider) -->
<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="50" />

<!-- Switch -->
<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Enable notifications" />

<!-- WebView -->
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// WebView in code
webview.settings.javaScriptEnabled = true
webview.loadUrl("https://developer.android.com")

ViewPager2

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// Fragment adapter
class OnboardingAdapter(activity: AppCompatActivity) :
    FragmentStateAdapter(activity) {
    override fun getItemCount() = 3
    override fun createFragment(position: Int): Fragment {
        return OnboardingFragment.newInstance(position)
    }
}