코틀린 안드로이드 앱개발 강좌, 머티리얼 라이브러리로 화면 구성하기

안녕하세요! 이번 글에서는 코틀린을 활용한 안드로이드 앱 개발의 기초부터 중급까지, 특히 구글의 머티리얼 라이브러리를 이용해 아름답고 기능적인 사용자 인터페이스(UI)를 구성하는 방법에 대해 자세히 알아보겠습니다.

1. 머티리얼 디자인이란?

머티리얼 디자인(Material Design)은 구글이 2014년에 발표한 디자인 언어로, 사용자 경험(UX)을 향상시키고, 매력적인 앱을 개발하기 위해 만들어졌습니다. 머티리얼 디자인은 일관성이 있으며, 직관적인 UI 요소를 제공하여 사용자에게 친숙한 감각을 제공합니다.

주요 요소로는 색상, 타이포그래피, 그림자, 애니메이션 등이 있으며, 이를 통해 정보의 위계성과 상호작용의 직관성을 제공합니다.

2. 머티리얼 컴포넌트 설치하기

우선, 머티리얼 디자인 컴포넌트를 사용하기 위해서는 프로젝트에 필요한 라이브러리를 추가해야 합니다. 아래와 같은 종속성을 build.gradle 파일에 추가하세요.

dependencies {
        implementation 'com.google.android.material:material:1.6.1'
    }

3. 기본 레이아웃 구성하기

안드로이드 앱의 시작점은 일반적으로 activity_main.xml이라는 이름의 레이아웃 파일입니다. 머티리얼 컴포넌트를 사용하여 기본 레이아웃을 구성해보겠습니다.

<?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">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="안드로이드 앱 개발을 위한 머티리얼 디자인"/>
                
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="버튼을 클릭하세요"/>

        </LinearLayout>

    </ScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

4. 머티리얼 버튼과 텍스트 필드 사용해보기

다음으로, 머티리얼 버튼과 텍스트 필드를 사용하여 사용자로부터 입력을 받는 폼을 만들어 보겠습니다.

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름을 입력하세요">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edit_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="제출"/>

사용자 입력 처리하기

이제 사용자가 텍스트 입력 후 버튼을 클릭했을 때, 입력값을 처리하는 코드를 작성해보겠습니다.

class MainActivity : AppCompatActivity() {

        private lateinit var editName: TextInputEditText
        private lateinit var btnSubmit: MaterialButton

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

            editName = findViewById(R.id.edit_name)
            btnSubmit = findViewById(R.id.btn_submit)

            btnSubmit.setOnClickListener {
                val name = editName.text.toString()
                Toast.makeText(this, "입력된 이름: $name", Toast.LENGTH_SHORT).show()
            }
        }
    }

5. 머티리얼 스니펫 다이얼로그 구현하기

사용자에게 추가 정보를 입력받기 위해 다이얼로그를 사용해보겠습니다. 머티리얼 다이얼로그를 구현하는 방법은 다음과 같습니다.

private fun showInputDialog() {
        val builder = AlertDialog.Builder(this)
        builder.setTitle("정보 입력")
        
        val input = EditText(this)
        builder.setView(input)

        builder.setPositiveButton("확인") { _, _ -> 
            Toast.makeText(this, "입력값: ${input.text}", Toast.LENGTH_SHORT).show()
        }
        builder.setNegativeButton("취소") { dialog, _ -> dialog.cancel() }

        builder.show()
    }

6. 머티리얼 카드뷰 활용하기

카드뷰는 정보의 집합을 잘 예시할 수 있는 훌륭한 컴포넌트입니다. 카드뷰를 이용하여 여러 정보를 표시하는 방법을 알아보겠습니다.

<androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="4dp"
        app:cardCornerRadius="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="카드뷰 제목"
                android:textStyle="bold"
                android:padding="16dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="카드의 내용이 들어가는 곳입니다."
                android:padding="16dp"/>

        </LinearLayout>

    </androidx.cardview.widget.CardView>

7. 머티리얼 디자인을 활용한 애니메이션과 전환 효과

시각적인 효과를 주기 위해 애니메이션과 전환 효과를 어떻게 구현하는지 알아보겠습니다. Transition API를 활용하여 화면 전환에 애니메이션 효과를 줄 수 있습니다.

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

        // 이전 화면에서의 전환 애니메이션
        val transition = ChangeBounds()
        transition.duration = 300
        TransitionManager.beginDelayedTransition(findViewById(R.id.coordinatorLayout), transition)
    }

8. 머티리얼 디자인로 구성된 리스트

안드로이드 앱에서 정보를 효과적으로 나열하기 위해 RecyclerView를 활용해 리스트를 구성하는 방법을 설명하겠습니다.

class MyAdapter(private val items: List) : RecyclerView.Adapter() {

        inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
            val textView: TextView = itemView.findViewById(R.id.text_view)
        }

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

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

        override fun getItemCount() = items.size
    }

9. 마무리

이번 강좌에서는 코틀린과 머티리얼 디자인 컴포넌트를 활용하여 기본적인 안드로이드 앱의 UI를 구성하는 방법에 대해 알아보았습니다. 머티리얼 디자인을 통해 사용자에게 더욱 직관적이고 매력적인 앱을 구상할 수 있습니다.

머티리얼 디자인은 다양한 컴포넌트와 기능을 제공하므로, 필요에 따라 자유롭게 조합하여 사용할 수 있습니다. 계속하여 더 많은 기능을 추가하고, 실습을 하며 경험을 쌓아보세요!

감사합니다!