작은 상단 앱 바를 만들려면 TopAppBar 컴포저블을 사용하세요. 이는 가능한 가장 간단한 상단 앱 바이며 이 예에서는 제목만 포함되어 있습니다.
다음 예에서는 TopAppBar에 scrollBehavior 값을 전달하지 않으므로 상단 앱 바가 내부 콘텐츠 스크롤에 반응하지 않습니다.
결과
그림 1. 작은 상단 앱 바
가운데 정렬된 상단 앱 바
가운데 정렬된 상단 앱 바는 제목이 구성요소 중앙에 배치된다는 점을 제외하고 작은 앱 바와 동일합니다. 이를 구현하려면 전용 CenterAlignedTopAppBar 컴포저블을 사용하세요.
이 예에서는 enterAlwaysScrollBehavior()를 사용하여 scrollBehavior에 전달할 값을 가져옵니다. 사용자가 스켈레톤의 내부 콘텐츠를 스크롤하면 막대가 접힙니다.
결과
그림 2. 가운데 정렬된 상단 앱 바
중간 상단 앱 바
중형 상단 앱 바는 제목을 추가 아이콘 아래에 배치합니다. 컴포저블을 만들려면 MediumTopAppBar 컴포저블을 사용합니다.
이전 코드와 마찬가지로 이 예에서는 enterAlwaysScrollBehavior()를 사용하여 scrollBehavior에 전달할 값을 가져옵니다.
결과
그림 3.enterAlwaysScrollBehavior의 스크롤 동작을 보여주는 중형 상단 앱 바
큰 상단 앱 바
대형 상단 앱 바는 중형과 유사하지만 제목과 아이콘 간의 패딩이 더 크고 전체적으로 화면에서 더 많은 공간을 차지합니다. 뷰를 만들려면 LargeTopAppBar 컴포저블을 사용하세요.
이 예에서는 exitUntilCollapsedScrollBehavior()를 사용하여 scrollBehavior에 전달하는 값을 가져옵니다. 사용자가 스켈레톤의 내부 콘텐츠를 스크롤하면 막대가 접히지만 사용자가 내부 콘텐츠의 끝까지 스크롤하면 막대가 확장됩니다.
결과
그림 4. 큰 상단 앱 바의 구현 예
하단 앱 바 구현
하단 앱 바를 만들려면 상단 앱 바 컴포저블과 유사한 BottomAppBar 컴포저블을 사용하세요.
다음과 같은 주요 매개변수에 컴포저블을 전달합니다.
actions: 막대 왼쪽에 표시되는 일련의 아이콘입니다. 일반적으로 이러한 작업은 특정 화면의 주요 작업 또는 탐색 항목입니다.
floatingActionButton: 막대의 오른쪽에 표시되는 플로팅 작업 버튼입니다.
결과
그림 5. 하단 앱 바 구현의 예
핵심사항
일반적으로 앱 바를 수신할 특정 매개변수가 있는 Scaffold 컴포저블에 전달합니다.
상단 앱 바를 구현하는 데 사용하는 컴포저블은 다음과 같은 주요 매개변수를 공유합니다.
title: 앱 바에 표시되는 텍스트입니다.
navigationIcon: 앱 바 왼쪽에 표시되는 기본 탐색 아이콘입니다.
actions: 사용자에게 핵심 작업에 대한 액세스 권한을 제공하는 아이콘으로 앱 바의 오른쪽에 표시됩니다.
scrollBehavior: 상단 앱 바가 스캐폴드의 내부 콘텐츠 스크롤에 응답하는 방식을 결정합니다.
colors: 앱 바가 표시되는 방식을 결정합니다.
사용자가 스켈레톤의 내부 콘텐츠를 스크롤할 때 앱 바가 응답하는 방식을 제어할 수 있습니다. 이렇게 하려면 TopAppBarScrollBehavior 인스턴스를 만들고 scrollBehavior 매개변수의 상단 앱 바에 전달합니다. TopAppBarScrollBehavior에는 다음과 같은 세 가지 유형이 있습니다.
enterAlwaysScrollBehavior: 사용자가 스캐폴드의 내부 콘텐츠를 위로 당기면 상단 앱 바가 접힙니다. 사용자가 내부 콘텐츠를 아래로 당기면 앱 바가 확장됩니다.
exitUntilCollapsedScrollBehavior: enterAlwaysScrollBehavior와 유사하지만 사용자가 스캐폴드의 내부 콘텐츠 끝에 도달할 때도 앱 바가 확장됩니다.
pinnedScrollBehavior: 앱 바가 제자리에 유지되고 스크롤에 반응하지 않습니다.
이 가이드가 포함된 컬렉션
이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.
대화형 구성요소 표시
구성 가능한 함수를 사용하여 Material Design 디자인 시스템을 기반으로 멋진 UI 구성요소를 쉽게 만드는 방법을 알아보세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-02-06(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-02-06(UTC)"],[],[],null,["\u003cbr /\u003e\n\nApp bars are containers at the top or the bottom of the screen that give your\nusers access to key features and navigation items:\n\n| Type | Appearance | Purpose |\n|---------------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------------------------|\n| [Top app bar](#top) | Across the top of the screen. | Provides access to key tasks and information. Typically hosts a title, core action items, and certain navigation items. |\n| [Bottom app bar](#bottom) | Across the bottom of the screen. | Typically includes core navigation items. Might give access to other actions, for example, by using a floating action button. |\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a top app bar\n\nThe following code shows implementations for the four types of top app bars,\nincluding varying examples of how you can control scroll behavior.\n\n- [Small top app bar](#small)\n- [Center-aligned top app bar](#center)\n- [Medium top app bar](#medium)\n- [Large top app bar](#large)\n\nSmall top app bar\n\nTo create a small top app bar, use the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable. This is the\nsimplest possible top app bar and in this example just contains a title.\n\nThe following example does not pass `TopAppBar` a value for\n`scrollBehavior`, so the top app bar does not react to scrolling of the inner\ncontent.\n\nResult **Figure 1.** A small top app bar.\n\nCenter-aligned top app bar\n\nThe center-aligned top app bar is the same as the small app bar,\nexcept the title is centered within the component. To implement it, use the\ndedicated [`CenterAlignedTopAppBar`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) composable.\n\nThis example uses `enterAlwaysScrollBehavior()` to get the value that it passes\nfor `scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content.\n\nResult **Figure 2.** A center-aligned top app bar.\n\nMedium top app bar\n\nThe medium top app bar places the title beneath any additional icons. To create\none, use the [`MediumTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#MediumTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable.\n\nLike the previous code, this example uses `enterAlwaysScrollBehavior()` to\nget the value that it passes for `scrollBehavior`.\n\nResult\n\n\u003cbr /\u003e\n\n**Figure 3.** A medium top app bar demonstrating the scroll behavior from `enterAlwaysScrollBehavior`.\n\n\u003cbr /\u003e\n\nLarge top app bar\n\nA large top app bar is similar to the medium, though the padding between the\ntitle and the icons is greater and it occupies more space on screen overall. To\ncreate one, use the [`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior) ) composable.\n\nThis example uses\n`exitUntilCollapsedScrollBehavior()` to get the value that it passes for\n`scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content, but then expands when the user scrolls to the end of\nthe inner content.\n\nResult **Figure 4.** An example implementation of a large top app bar.\n\nImplement a bottom app bar\n\nTo create a bottom app bar, use the [`BottomAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) composable, which is\nsimilar to the top app bar composable.\n\nYou pass composables for the following key\nparameters:\n\n- `actions`: A series of icons that appear on the left side of the bar. These are commonly either key actions for the given screen, or navigation items.\n- `floatingActionButton`: The floating action button that appears on the right side of the bar.\n\n| **Note:** You can also use `BottomAppBar` without passing a value for `actions` and `floatingActionButton`. You create a custom bottom app bar by filling `BottomAppBar` with content as you would other containers.\n\nResult **Figure 5.** An example implementation of a bottom app bar.\n\nKey points\n\n- You generally pass app bars to the `Scaffold` composable, which has specific parameters to receive them.\n- The composables that you use to implement top app\n bars share key parameters:\n\n - `title`: The text that appears across the app bar.\n - `navigationIcon`: The primary icon for navigation, which appears on the left of the app bar.\n - `actions`: Icons that provide the user access to key actions, which appear on the right of the app bar.\n - `scrollBehavior`: Determines how the top app bar responds to scrolling of the scaffold's inner content.\n - `colors`: Determines how the app bar appears.\n- You can control how the app bar responds when the user scrolls the\n scaffold's inner content. To do so, create an instance of\n [`TopAppBarScrollBehavior`](/reference/kotlin/androidx/compose/material3/TopAppBarScrollBehavior) and pass it to your top app bar for the\n `scrollBehavior` parameter. There are three types of `TopAppBarScrollBehavior`:\n\n - `enterAlwaysScrollBehavior`: When the user pulls up the scaffold's inner content, the top app bar collapses. The app bar expands when the user pulls down the inner content.\n - `exitUntilCollapsedScrollBehavior`: Similar to `enterAlwaysScrollBehavior`, though the app bar also expands when the user reaches the end of the scaffold's inner content.\n - `pinnedScrollBehavior`: The app bar remains in place and does not react to scrolling.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
