안드로이드 머티리얼 디자인 3 적용하기 🎨✨

4. 머티리얼 디자인 3의 주요 컴포넌트 살펴보기 🧩

자, 이제 머티리얼 디자인 3의 주요 컴포넌트들을 자세히 살펴볼 거야. 이 컴포넌트들을 잘 활용하면 앱의 UI를 훨씬 더 멋지고 사용자 친화적으로 만들 수 있어!

4.1 버튼 (Buttons)

버튼은 사용자 인터랙션의 기본이지. 머티리얼 디자인 3에서는 다양한 스타일의 버튼을 제공해:

• Filled Button: 가장 강조되는 버튼
• Outlined Button: 덜 강조되는 버튼
• Text Button: 가장 덜 강조되는 버튼
• Elevated Button: 약간의 그림자가 있는 버튼
• Tonal Button: 색조가 있는 버튼

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

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

4.2 카드 (Cards)

카드는 관련 정보를 그룹화하고 표시하는 데 아주 유용해. 머티리얼 디자인 3에서는 다양한 스타일의 카드를 제공하지:

• Elevated Card: 그림자가 있는 카드
• Filled Card: 배경색이 채워진 카드
• Outlined Card: 테두리가 있는 카드

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardElevation="4dp"
    style="@style/Widget.Material3.CardView.Elevated">

    <!-- 카드 내용 -->

</com.google.android.material.card.MaterialCardView>

4.3 상단 앱 바 (Top App Bar)

상단 앱 바는 앱의 브랜딩, 화면 제목, 네비게이션 등을 표시하는 중요한 요소야. 머티리얼 디자인 3에서는 세 가지 유형을 제공해:

• Center-aligned top app bar: 제목이 중앙에 정렬된 앱 바
• Small top app bar: 작은 크기의 앱 바
• Medium top app bar: 중간 크기의 앱 바

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/page_title"
        style="@style/Widget.Material3.Toolbar.Surface" />

</com.google.android.material.appbar.AppBarLayout>

4.4 내비게이션 바 (Navigation Bar)

내비게이션 바는 앱의 주요 목적지 간 이동을 돕는 중요한 요소야. 머티리얼 디자인 3에서는 다음과 같은 스타일을 제공해:

• Navigation bar: 기본적인 내비게이션 바
• Navigation rail: 태블릿이나 데스크톱에 적합한 세로형 내비게이션 바

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu"
    style="@style/Widget.Material3.BottomNavigationView" />

4.5 다이얼로그 (Dialogs)

다이얼로그는 사용자에게 중요한 정보를 전달하거나 결정을 요구할 때 사용돼. 머티리얼 디자인 3에서는 다음과 같은 다이얼로그 스타일을 제공해:

• Basic dialog: 기본적인 다이얼로그
• Full-screen dialog: 전체 화면 다이얼로그
• Alert dialog: 경고 메시지를 표시하는 다이얼로그

MaterialAlertDialogBuilder(context)
    .setTitle("Dialog Title")
    .setMessage("This is a sample dialog message.")
    .setPositiveButton("OK") { dialog, which ->
        // Handle positive button
    }
    .setNegativeButton("Cancel") { dialog, which ->
        // Handle negative button
    }
    .show()

5. 실제 적용 예시: 간단한 투두 리스트 앱 만들기 📝

자, 이제 우리가 배운 내용을 실제로 적용해볼 거야. 간단한 투두 리스트 앱을 만들면서 머티리얼 디자인 3를 적용해보자!

5.1 레이아웃 구성하기

먼저 메인 액티비티의 레이아웃을 구성해볼게:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/topAppBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="My Todo List"
            style="@style/Widget.Material3.Toolbar.Surface" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="Add new todo"
        app:srcCompat="@drawable/ic_add"
        style="@style/Widget.Material3.FloatingActionButton.Primary" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

5.2 리스트 아이템 레이아웃 만들기

이제 각 투두 아이템의 레이아웃을 만들어볼게:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    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="wrap_content"
    android:layout_margin="8dp"
    style="@style/Widget.Material3.CardView.Elevated">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp">

        <com.google.android.material.checkbox.MaterialCheckBox
            android:id="@+id/todoCheckBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/Widget.Material3.CompoundButton.CheckBox" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/todoText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginStart="16dp"
            style="@style/TextAppearance.Material3.BodyLarge" />

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

5.3 코드 구현하기

이제 실제 코드를 구현해볼게. 간단하게 MainActivity만 만들어볼게:

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView
    private lateinit var fab: FloatingActionButton
    private val todoList = mutableListOf<String>()
    private lateinit var adapter: TodoAdapter

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

        recyclerView = findViewById(R.id.recyclerView)
        fab = findViewById(R.id.fab)

        adapter = TodoAdapter(todoList)
        recyclerView.adapter = adapter
        recyclerView.layoutManager = LinearLayoutManager(this)

        fab.setOnClickListener {
            showAddTodoDialog()
        }
    }

    private fun showAddTodoDialog() {
        val builder = MaterialAlertDialogBuilder(this)
        val input = EditText(this)
        builder.setTitle("Add new todo")
        builder.setView(input)

        builder.setPositiveButton("OK") { dialog, which ->
            val todoText = input.text.toString()
            if (todoText.isNotEmpty()) {
                todoList.add(todoText)
                adapter.notifyItemInserted(todoList.size - 1)
            }
        }
        builder.setNegativeButton("Cancel") { dialog, which -> dialog.cancel() }

        builder.show()
    }
}

class TodoAdapter(private val todoList: List<String>) : 
    RecyclerView.Adapter<TodoAdapter.TodoViewHolder>() {

    class TodoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val checkBox: MaterialCheckBox = itemView.findViewById(R.id.todoCheckBox)
        val textView: MaterialTextView = itemView.findViewById(R.id.todoText)
    }

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

    override fun onBindViewHolder(holder: TodoViewHolder, position: Int) {
        holder.textView.text = todoList[position]
        holder.checkBox.setOnCheckedChangeListener { buttonView, isChecked ->
            holder.textView.paintFlags = if (isChecked) {
                holder.textView.paintFlags or Paint.STRIKE_THRU_TEXT_FLAG
            } else {
                holder.textView.paintFlags and Paint.STRIKE_THRU_TEXT_FLAG.inv()
            }
        }
    }

    override fun getItemCount() = todoList.size
}

이렇게 하면 간단한 투두 리스트 앱이 완성돼! 머티리얼 디자인 3의 컴포넌트들을 사용해서 만들었지.

6. 마무리: 머티리얼 디자인 3의 미래 🚀

자, 이제 우리는 머티리얼 디자인 3에 대해 꽤 많이 알아봤어. 마지막으로 머티리얼 디자인 3의 미래에 대해 생각해보자.

6.1 지속적인 발전

구글은 계속해서 머티리얼 디자인을 발전시키고 있어. 머티리얼 디자인 3도 앞으로 계속 업데이트되고 개선될 거야. 새로운 컴포넌트가 추가되거나 기존 컴포넌트가 개선될 수 있지.

6.2 크로스 플랫폼 지원

머티리얼 디자인 3는 안드로이드뿐만 아니라 iOS, 웹 등 다양한 플랫폼에서도 사용될 수 있도록 발전하고 있어. 이는 일관된 사용자 경험을 제공하는 데 큰 도움이 될 거야.

6.3 AI와의 통합

앞으로는 AI 기술과 머티리얼 디자인이 더욱 밀접하게 통합될 수 있어. 예를 들어, 사용자의 행동 패턴을 분석해 자동으로 UI를 최적화하는 등의 기능이 추가될 수 있지.

6.4 접근성 강화

머티리얼 디자인 3는 앞으로 접근성을 더욱 강화할 거야. 모든 사용자가 편리하게 앱을 사용할 수 있도록 하는 것이 중요한 목표 중 하나야.

자, 이제 우리의 머티리얼 디자인 3 여행이 끝났어. 이 글을 통해 머티리얼 디자인 3에 대해 잘 이해했길 바라. 앞으로 너희가 만드는 앱들이 더욱 아름답고 사용하기 편리해질 거야. 화이팅! 🎉