Material Design 기초
Material 구성 요소를 사용합니다: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog, Dynamic Color.
Material Design 기초은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 5개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 5개의 강의가 포함되어 있습니다.
Material Design이란?
Material Design은 아름답고 일관된 Android 앱을 만들기 위한 Google의 디자인 시스템입니다. 다음을 제공합니다.
- 다양한 사전 제작 UI 구성 요소
- 일관된 간격, 타이포그래피 및 색상 규칙
- 접근성과 반응성을 갖춘 구성 요소
- 내장 애니메이션 및 전환
Material Components for Android 라이브러리(MDC)는 Jetpack에 Material 3를 제공합니다.
Material 구성 요소 추가
종속 항목을 추가하고 앱 테마를 Material 테마로 설정합니다.
// app/build.gradle:
dependencies {
implementation 'com.google.android.material:material:1.12.0'
}
// res/values/themes.xml:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorSecondary">@color/secondary</item>
<!-- ... -->
</style>MaterialButton
일반 Button을 MaterialButton으로 바꾸면 둥근 모서리, 물결 효과 및 아이콘을 지원할 수 있습니다.
<!-- Filled (default) -->
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save"
app:icon="@drawable/ic_save" />
<!-- Outlined style -->
<com.google.android.material.button.MaterialButton
style="@style/Widget.Material3.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<!-- Text button -->
<com.google.android.material.button.MaterialButton
style="@style/Widget.Material3.Button.TextButton"
android:text="Learn more" />TextInputLayout 및 TextInputEditText
TextInputLayout은 EditText를 감싸 부동 레이블, 오류 메시지 및 글자 수 카운터를 제공합니다.
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/tilEmail"
style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email address"
app:helperText="We will never share your email">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>MaterialCardView
MaterialCardView는 컨테이너에 입체감, 둥근 모서리 및 테두리를 추가합니다.
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardCornerRadius="12dp"
app:cardElevation="4dp"
app:strokeColor="@color/outline"
app:strokeWidth="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="vertical">
<TextView android:text="Card Title" />
<TextView android:text="Card content goes here" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>FloatingActionButton (FAB)
FAB는 화면의 주요 작업을 강조합니다. Material 3는 세 가지 크기를 제공합니다.
<!-- Standard FAB -->
<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 item"
app:srcCompat="@drawable/ic_add" />
<!-- Extended FAB (icon + text) -->
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:text="New Note"
app:icon="@drawable/ic_edit"
android:layout_gravity="bottom|end" />MaterialToolbar
기본 ActionBar를 MaterialToolbar로 바꾸면 Material 3 스타일을 적용할 수 있습니다.
<!-- In layout XML -->
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorSurface"
app:title="My App"
app:navigationIcon="@drawable/ic_menu" />
// In Activity:
setSupportActionBar(binding.toolbar)
binding.toolbar.setNavigationOnClickListener {
onBackPressedDispatcher.onBackPressed()
}Snackbar
Snackbar는 화면 하단에 짧고 작업 가능한 메시지를 표시합니다. Toast보다 Snackbar를 사용하는 것이 좋습니다.
// Simple message:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_SHORT).show()
// With action:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
.setAction("Undo") {
viewModel.undoDelete()
}
.setAnchorView(binding.fab) // appears above the FAB
.show()Chip 및 ChipGroup
Chip은 필터, 태그 및 선택 항목에 사용하는 작은 요소입니다.
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="true">
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kotlin"
style="@style/Widget.Material3.Chip.Filter" />
<com.google.android.material.chip.Chip
android:text="Android"
style="@style/Widget.Material3.Chip.Filter" />
<com.google.android.material.chip.Chip
android:text="Jetpack"
style="@style/Widget.Material3.Chip.Filter" />
</com.google.android.material.chip.ChipGroup>BottomSheetDialog
모달 하단 시트는 화면 아래에서 위로 올라오며 콘텐츠나 작업을 담습니다.
class OptionsBottomSheet : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View {
return inflater.inflate(R.layout.bottom_sheet_options, container, false)
}
}
// Show it from a Fragment:
val sheet = OptionsBottomSheet()
sheet.show(parentFragmentManager, "options")Material You — 동적 색상
Android 12 이상에서는 동적 색상을 지원합니다. 앱의 색상 구성표가 사용자의 배경 화면에 맞춰 자동으로 변경됩니다.
// In Application.onCreate():
override fun onCreate() {
super.onCreate()
DynamicColors.applyToActivitiesIfAvailable(this)
}
// That's it! Colors automatically extract from wallpaper on Android 12+
// On older Android, fallback colors from your theme are used.빠른 확인
부동 레이블과 입력란 내 오류 메시지를 표시하려면 어떤 Material 구성 요소로 EditText를 감싸야 할까요?
복습: Material Design 기초
Material 구성 요소를 사용하면 아름다운 앱을 쉽게 만들 수 있습니다.
MaterialButton— 채우기, 테두리, 텍스트 스타일TextInputLayout+TextInputEditText— 부동 레이블, 오류MaterialCardView— 입체감과 테두리가 있는 카드FloatingActionButton— 주요 작업 버튼Snackbar— 작업이 포함된 닫을 수 있는 메시지Chip— 태그, 필터, 선택 항목- 동적 색상 — Android 12 이상에서 배경 화면에 맞게 조정
다음: 테마, 스타일 및 다크 모드
자주 묻는 질문
“Material Design 기초” 강의는 무료인가요?
네 — “Material Design 기초” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 5개의 강의가 포함되어 있습니다.
“Material Design 기초”에서 뭘 배우나요?
Material 구성 요소를 사용합니다: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog, Dynamic Color. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Android Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 5개 중 1번째 강의입니다.
“Material Design 기초” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.