앱에 더 넓은 화면에 콘텐츠 표시

Compose 방법 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 더 넓은 화면으로 작업하는 방법을 알아보세요.

시스템 표시줄 뒤에 그려서 디스플레이의 전체 너비와 높이를 사용하여 앱을 더 넓은 화면으로 만들 수 있습니다. 시스템 표시줄은 상태 표시줄과 탐색 메뉴입니다.

더 넓은 레이아웃을 구현하려면 앱에서 다음을 실행해야 합니다.

  • 탐색 메뉴 뒤에 그려서 더 매력적이고 현대적인 사용자 환경을 제공합니다.
  • 전체 너비 이미지의 경우와 같이 콘텐츠와 레이아웃에 적합한 경우 상태 표시줄 뒤에 그립니다. 이렇게 하려면 화면 상단에 고정된 앱 바를 정의하는 AppBarLayout와 같은 API를 사용합니다.
그림 1. 더 넓은 화면 레이아웃의 시스템 표시줄

앱에서 더 넓은 레이아웃을 구현하려면 다음 단계를 따르세요.

  1. 더 넓은 화면 디스플레이를 사용 설정합니다.
  2. 시각적 중복을 처리합니다.
상태 표시줄 뒤에 이미지가 있는 앱을 보여주는 이미지
그림 2. 상태 표시줄 뒤에 이미지가 있는 앱의 예

더 넓은 화면 디스플레이를 사용 설정합니다.

ActivityonCreate에서 enableEdgeToEdge를 호출하여 앱의 더 넓은 디스플레이를 사용 설정할 수 있습니다. setContentView 전에 호출해야 합니다.

Kotlin

  override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)
    ...
  }

Java

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    EdgeToEdge.enable(this);
    super.onCreate(savedInstanceState);
    ...
  }

기본적으로 enableEdgeToEdge는 시스템 표시줄을 투명하게 만듭니다. 단, 상태 표시줄에 반투명 스크림이 적용되는 3버튼 탐색 모드는 예외입니다. 시스템 아이콘과 스크림의 색상은 시스템의 밝은 테마 또는 어두운 테마에 따라 조정됩니다.

enableEdgeToEdge 메서드는 앱을 더 넓은 화면으로 배치해야 한다고 자동으로 선언하고 시스템 표시줄의 색상을 조정합니다. 어떤 이유로든 이 설정이 필요한 경우 '더 넓은 디스플레이 수동 설정'을 참고하세요.

인셋을 사용하여 중복 처리

더 넓은 화면 디스플레이를 사용 설정하면 그림 3과 같이 앱 뷰 중 일부가 시스템 표시줄 뒤에 그려질 수 있습니다.

탐색 메뉴나 상태 표시줄 같은 화면의 어떤 부분이 시스템 UI와 교차하는지 지정하는 인셋에 반응하여 중복을 해결할 수 있습니다. 교차는 콘텐츠 위에 표시하는 것을 의미할 수 있지만 앱에 시스템 동작에 관한 정보를 제공할 수도 있습니다.

앱을 더 넓은 화면으로 표시하는 데 적용되는 인셋 유형은 다음과 같습니다.

  • 시스템 표시줄 인셋: 탭할 수 있고 시스템 표시줄로 시각적으로 가려지지 않아야 하는 뷰에 가장 적합합니다.

  • 시스템 동작 인셋: 시스템에서 앱보다 우선순위가 높은 동작 탐색 영역에 사용됩니다.

시스템 표시줄 인셋

시스템 표시줄 인셋은 가장 일반적으로 사용되는 인셋 유형입니다. 이는 시스템 UI가 앱 위의 Z축에 표시되는 영역을 나타냅니다. 앱에서 탭할 수 있고 시스템 표시줄로 시각적으로 가려지면 안 되는 뷰를 이동하거나 패딩하는 데 가장 적합합니다.

예를 들어 그림 3의 플로팅 작업 버튼 (FAB)은 탐색 메뉴에 의해 부분적으로 가려집니다.

더 넓은 화면이 구현되었지만 탐색 메뉴가 플로팅 작업 버튼을 가리는 이미지
그림 3. 가장자리에서 더 넓은 레이아웃으로 FAB와 겹치는 탐색 메뉴

동작 모드나 버튼 모드에서 이러한 종류의 시각적 겹침을 방지하려면 getInsets(int)WindowInsetsCompat.Type.systemBars()와 함께 사용하여 뷰의 여백을 늘리면 됩니다.

다음 코드 예는 시스템 표시줄 인셋을 구현하는 방법을 보여줍니다.

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams>(
      leftMargin = insets.left,
      bottomMargin = insets.bottom,
      rightMargin = insets.right,
  )

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

이 솔루션을 그림 3의 예에 적용하면 그림 4와 같이 버튼 모드에서 시각적으로 겹치지 않습니다.

FAB를 가리지 않는 반투명 탐색 메뉴를 보여주는 이미지
그림 4. 버튼 모드에서 시각적 중첩 해결

이는 그림 5와 같이 동작 탐색 모드에도 적용됩니다.

동작 탐색을 더 넓은 화면으로 보여주는 이미지
그림 5. 동작 탐색 모드에서 시각적 중첩 해결

시스템 동작 인셋

시스템 동작 삽입은 시스템 동작이 앱보다 우선하는 창의 영역을 나타냅니다. 이러한 영역은 그림 6에서 주황색으로 표시됩니다.

시스템 동작 인셋을 보여주는 이미지
그림 6. 시스템 동작 인셋.

시스템 표시줄 인셋과 마찬가지로 getInsets(int)WindowInsetsCompat.Type.systemGestures()와 함께 사용하여 시스템 동작 인셋이 겹치지 않도록 할 수 있습니다.

이 인셋을 사용하여 가장자리에서 스와이프할 수 있는 뷰를 이동하거나 패딩합니다. 일반적인 사용 사례로는 하단 시트, 게임에서 스와이프, ViewPager2를 사용하여 구현된 캐러셀이 있습니다.

Android 10 이상의 시스템 동작 인셋에는 홈 동작용 하단 인셋과 뒤로 동작용 좌우 인셋이 포함됩니다.

시스템 동작 인셋 측정을 보여주는 이미지
그림 7. 시스템 동작 인셋 측정.

다음 코드 예는 시스템 동작 인셋을 구현하는 방법을 보여줍니다.

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

몰입형 모드

일부 콘텐츠는 전체 화면에서 최상의 환경을 경험하기 때문에 사용자에게 더욱 몰입도 높은 환경을 제공할 수 있습니다. WindowInsetsControllerWindowInsetsControllerCompat 라이브러리를 사용하여 몰입형 모드의 시스템 표시줄을 숨길 수 있습니다.

Kotlin

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Java

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

이 기능을 구현하는 방법에 관한 자세한 내용은 몰입형 모드의 시스템 표시줄 숨기기를 참고하세요.

추가 리소스

WindowInsets, 동작 탐색, 인셋 작동 방식에 관한 자세한 내용은 다음 참조를 참고하세요.