[Android] 반투명 상태바 사용

이 포스트의 내용은 http://blog.raffaeu.com/archive/2015/04/11/android-and-the-transparent-status-bar.aspx를 토대로 번역한 자료입니다. 한글로 표현하기 어색하거나 모호한 문장은 임의로 조정하거나 삭제하였으므로 필요한 경우 원문을 참고하시기 바랍니다. 또한 언제든지 원저자의 요청에 의해 게시물이 내려지거나 수정될 수 있음을 알려드립니다. 마지막으로 이 글은 개인적인 학습목적으로 번역한 자료이며, 따라서 오역이나 잘못된 해석이 포함되어 있을 수 있으며 이로인한 어떠한 일체의 보장을 하지 않습니다.

Android 5.0 (Lollipop, API21)부터 Material Designl이 소개되면서 3종류의 새로운 StatusBar를 사용할 수 있게 되었습니다.

1. 전통적인 Status Bar (Classic Status Bar)
   
2. 컬러 Status Bar (Colored Status Bar)
   
3. 투명 Status Bar (Transparent Status Bar)
   

여기서는 Status Bar에 색상을 입히는 방법과 반투명 처리하는 방법에 대해 소개합니다.

Status Bar 색상변경

Toolbar의 색상이 아래와 같다고 생각해봅시다.

Material Design에 따르면 StatusBar는 경계가 구분되도록 아래와 같이 다른 색상을 사용해야 합니다.

Material Design을 사용한다면 아래와 같이 Style을 설정하여 색상을 조정할 수 있습니다.

<!-- 
    Material Theme의 기본 색상입니다.
    이 색상은 안드로이드 컨트롤들과 Toolbar의 배경색으로 나타나게 됩니다.
-->
<item name="colorPrimary">@color/primary</item>

<!-- 
    Material Theme의 어두운 기본색입니다.
    StatusBar와 Contextual app bar의 배경색으로 보실 수 있습니다.
    Contextual app bar란 텍스트를 선택한다던가 리스트 항목을 선택하는 등
    특정 상황에서 나타나는 action bar를 말합니다.   
-->
<item name="colorPrimaryDark">@color/primary_dark</item>

<!-- 상태바의 색상을 말합니다. 지정하지 않으면 colorPrimaryDark를 상속합니다. -->
<item name="statusBarColor">@color/primary_dark</item>

Status Bar 투명하게 만들기

상태바를 투명하게 하는 것은 아래와 같은 코드를 사용하여 쉽게 설정할 수 있습니다.

<style name="AppTheme" parent="AppTheme.Base">
    <!-- 상태바를 투명으로 설정하려면 true로 설정하세요. -->
    <item name="android:windowTranslucentStatus">true</item>
</style>

막상 위의 코드를 적용해보면 아래와 같이 뭔가 이상하게 나타납니다.

위와 같은 문제를 해결하려면 Status Bar의 높이 만큼 페이지에 Padding을 부여하는 것입니다. Status Bar의 높이는 스마트폰, 태블릿에 따라 달라지며 단말기에 따라 달라질 수 있습니다. 따라서 아래와 같은 코드를 통해 Status Bar의 높이를 계산해야 합니다.

//status bar의 높이 계산
public int getStatusBarHeight() 
{
    int result = 0;
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0)
        result = getResources().getDimensionPixelSize(resourceId);

    return result;
}

ToolBar는 onCreate 이벤트에서 생성됩니다. 따라서 onCreate 이벤트에서 ToolBar의 Padding을 설정하도록 합시다.

@Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_drawer);

   // AppCompact Toolbar 인스턴스 얻기
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

   // Status Bar 높이만큼 Padding 부여
    toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}

결과를 확인해보면 Padding이 적용된 것을 볼 수 있습니다. 하지만 Android 5.0 (Lollipop)과 Android 5.5 (Kikat)의 결과를 보면 약간 다른 것을 확인하실 수 있습니다.
[Lollipop]

[Kikat]

만약 상태바를 동일하게 설정하게 시다면 GitHub에 공개된 SystemBarTint 라이브러리(https://github.com/jgilfelt/SystemBarTint)를 이용하는 것입니다. 이 라이브러리를 이용하면 Status Bar의 색상을 조절하고 투명도를 설정할 수 있습니다.

Android Material Design의 따르면 StatusBar는 ToolBar보다 20% 어둡게 설정해야 합니다. 따라서 20%의 투명도를 가진 검정색을 설정하면 이와 동일한 효과를 볼 수 있습니다. 이는 RGB Hex값으로 #20000000입니다. (물론 검정이 아닌 다른 색상을 얼마든지 설정하실 수 도 있습니다.)

onCreate 이벤트에서 SystemBarTint 라이브러리를 통해 투명도를 다시 설정해 봅시다.

// Content View가 설정된 후에 SystemBartintManager 인스턴스를 생성합시다.
SystemBarTintManager tintManager = new SystemBarTintManager(this);

// 상태바를 투명하게 합니다.
tintManager.setStatusBarTintEnabled(true);

// NavigationBar도 투명하게 할 수 있습니다. (NavigationBar는 하단의 버튼 영역을 말합니다.)
tintManager.setNavigationBarTintEnabled(true);

// StatusBar를 20% 투명도를 가지게 합니다.
tintManager.setTintColor(Color.parseColor("#20000000"));

[Kikat 결과화면]