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

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와 겹치는 탐색 메뉴.

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

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

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, 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.
  view.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(view, (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와 같이 버튼 모드에서 시각적으로 겹치지 않습니다.

플로팅 작업 버튼을 가리지 않는 반투명 탐색 메뉴를 보여주는 이미지
그림 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 =
      ViewCompat.getWindowInsetsController(window.decorView)

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

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

Java

WindowInsetsControllerCompat windowInsetsController =
      ViewCompat.getWindowInsetsController(getWindow().getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

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

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

추가 리소스

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