개발자로 홀로 서기

오늘 포스팅할 내용은 안드로이드 statusbar에

색상을 넣는 방법이다.

statusbar는 안드로이드 화면 최상단에 존재하며,

앱의 푸쉬나, 배터리 상태, 시간등을 알려주는 역할을 한다.

롤리팝 버전부터 toolbar ( 또는 actionBar )의 색상과 통일감을 주기 위해

statusBar의 색상을 바꿀 수 있도록 API 개편했다.

따라서 머터리얼 디자인을 준수한다면, statusbar 색상을 고려하지 않을 수 없다.

하지만, 5.0 이상 API 에선 바꾸기 수훨하지만, 5.0 미만 API 에서는

statusbar 색상을 바꾸기가 쉽지 않다.

본 포스팅은 롤리팝 이후 API를 이용한 statusbar 색상 넣기와

롤리팝 이전 API를 이용한 statusbar 색상 넣기

두가지를 다룰 예정이다.

아래는 롤리팝 버전 이후 API를 이용한 statusbar 색상 넣기이다. 

롤리팝 보다 낮은 버전은 동작하지 않으니 주의하자.

왼쪽의 이미지를 보면,

각 view 영역에서의 색상태그를 알려준다.

statusbar 색상을 바꾸기 위해

res 디렉토리 안에 있는 

value 디렉토리에 접근후 color.xml에

왼쪽과 같이 태그를 작성한다.

왼쪽에서 보이는 view 영역중 바꾸고 싶은 색상이 있다면,

위와 같이 태그이름과 벨류를 정해주면 된다.

위의 방법은 xml셋팅으로 statusbar를 바꾸는 방법이다.

아래의 방법은 코드적으로 바꿀 수 있는 방법이다.

액티비티 안이라면 아래와 같이 똑같이 작성하면 되지만, ( window = getWindow() )

액티비티가 아니라면 액티비티 참조값에서 메서드를 호출해야한다. ( window = activity.getWindow() )

롤리팝 API부터 statusbar는 TRANSLUENT를 적용하면 투명 상태가 아니라, 반투명 상태의 색상이 입혀진다.

따라서 TRANSLUENT 속성을 지우고, statusbar 영역의 view를 칠할 수 있게 셋팅을 한다.

셋팅이후 자신의 원하는 색상을 바꿀 수 있다.

다음 포스팅엔 롤리팝 하위 버전에서 상태바 색상을 바꾸는 방법을 포스팅 하겠다.

오늘 포스팅할 내용은 Toolbar 위젯이다.

Toolbar 위젯이 뭔지 아래의 설명을 보자.

해당 내용은 안드로이드 디벨로퍼 API문서이다.

요약하자면, 어플리케이션의 제어를 도와주는 액션바는 스크린의 최상위 뷰인 윈도우 decor에 붙여져 있어 다루기 어렵다.

하지만 toolbar는 어느 뷰에서나 종속관계 상관없이 다채롭게 사용가능하며 actionbar 사용하듯 toolbar를 사용할 수 있다는 내용이다.

머터리얼 디자인이 등장함에 따라 UI의 큰 변화가 있었다. ActionBar를 사용시 구현하기 어려운 경우가 많아 

toolbar란 위젯을 만든거 같다. 자세한 내용을 보고 싶다면 아래의 링크를 참조하길 바란다.

http://developer.android.com/intl/ko/reference/android/widget/Toolbar.html 

해당 위젯은 롤리팝 부터 나온 위젯이기 때문에(API level 21) 만약 하위 os에서 쓰고 싶다면 서포트 라이브러리가 필요하다.

build.gradle에서 dependencies에 아래와 같이 추가해준다.

dependencies {
    
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:23.2.1'
    
}

actionBar 대신에 toolbar를 쓸 것 이므로, 액션바가 없는 테마로 변경해야한다.

values 폴더에 styles.xml 안에다가 해당 테마를 만들어준다.

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Activity에 붙일 레이아웃을 아래와 같이 작성한다. (main_activity.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/AppTheme.NoActionBar">
    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:titleTextColor="#fff"
        android:id="@+id/toolbar"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

레이아웃을 작성후 액티비티의 onCreate 메서드에 아래와 같이 작성한다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_activity);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setTitleTextColor(Color.WHITE);
}

아래의 이미지는 결과물이다.