본문 바로가기

테마강좌/Android General

중앙 시계 만들기

자 오늘은 중앙 시계 만드는 법을 써보겠습니다.


중앙 시계란 상단바의 시계가 오른쪽이 아닌 아이폰처럼 중앙에 위치하는걸 말합니다.

중앙 시계를 하면 시계 보는게 좀더 편하더군요. 아래 스샷처럼..^^

그리고 테마를 만들때 좀더 이뻐보이는것도 있구요.ㅋㅋ




하지만 중앙시계의 단점이 있습니다. 

좌측이나 우측의 아이콘이 6개정도 생기게 되면 아이콘이랑 시계랑 겹치는게 유일한 단점이죠.

상단바의 아이콘이 6개 이상 생기는 경우가 많지 않으므로 그냥 써도 된다고 생각됩니다.^^


사설은 그만하고 이제 강좌로 들어가 봅시다.


준비물 : SystemUI.apk 파일, apk manager, text 편집기


1. apk manager로 SystemUI.apk 파일을 디컴파일 합니다.

   이번에도 apk manager 사용법은 자세히 적지 않겠습니다.


2. /res/layout/tw_status_bar.xml 파일을 text편집기로 열어 주세요.

   아샌이 안올라간 갤스 같은 경우는 status_bar.xml파일을 열어주세요.

   

3. com.android.systemui.statusbar.policy.Clock 문구를 찾아 주세요.

   이 문구가 상단바 시계를 나타내는 문구입니다.

   갤투가 아닌 폰에서는 좀 다를수 있으나 아마도 clock이 들어간 문구는 하나일 겁니다.

   

4. 찾으셨으면 이제 수정을 해야 합니다.



  <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="left|center" android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:shadowColor="#ff000000" android:shadowDx="0.0" android:shadowDy="1.0" android:shadowRadius="1.0" />

   

   위와 같이 되어 있는 구문을 


  <LinearLayout android:gravity="center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">

        <com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="left|center" android:id="@id/clock" android:paddingLeft="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:shadowColor="#ff000000" android:shadowDx="0.0" android:shadowDy="1.0" android:shadowRadius="1.0" />

   </LinearLayout>



     이렇게 위,아래 LinearLayout 을 넣어 3줄로 바꿔 줍니다.

   

5. 이렇게 수정하면 시계는 중앙에 표시되는데 상단바 알림이 오면 알림 문자와 시계가 겹치게 됩니다.

   그래서 android:id="@id/ticker" 이 문구를 다시 찾아 주세요.

   찾으셨으면 2번째 줄에 android:background로 되어 있는 문구를 복사해서 android:id="@id/ticker" 문구 뒤에 넣습니다.



  <LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:paddingLeft="6.0dip" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent">

        <ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginRight="4.0dip">

            <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />

            <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />

        </ImageSwitcher>

        <com.android.systemui.statusbar.phone.TickerView android:id="@id/tickerText" android:paddingTop="2.0dip" android:paddingRight="10.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0">

            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_old" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />

            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_new" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />

        </com.android.systemui.statusbar.phone.TickerView>

    </LinearLayout>


   

    위 문구가 순정 문구인데 아래처럼 바꾸어 줍니다.



 <LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:background="@drawable/status_bar_call_ongoing_background" android:paddingLeft="6.0dip" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent">

        <ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginRight="4.0dip">

            <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />

            <com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />

        </ImageSwitcher>

        <com.android.systemui.statusbar.phone.TickerView android:id="@id/tickerText" android:paddingTop="2.0dip" android:paddingRight="10.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0">

            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_old" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />

            <TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_new" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />

        </com.android.systemui.statusbar.phone.TickerView>

    </LinearLayout>


    

   

6. 아샌에서는 여기까지만 작업하면 끝인데 진저에서는 한가지 더 작업해 줘야 합니다.

   뭐냐 하면 퀵패널 내렸을때 날짜 나오는 부분이 있어서 상단바에 이미지를 넣을시에 

   날짜의 뒷배경이 까맣게 나옵니다.


   com.android.systemui.statusbar.DateView 이 문구를 찾으세요. 아마 거의 끝에 있을 겁니다.

   아래 문구가 순정의 문구입니다.

   <com.android.systemui.statusbar.DateView android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="left|center" android:id="@id/date" android:paddingLeft="6.0px" android:paddingRight="6.0px" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />


  

  <com.android.systemui.statusbar.DateView android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="left|center" android:id="@id/date" android:background="#ff000000" android:paddingLeft="6.0px" android:paddingRight="6.0px" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />


     이렇게 수정해 줍니다.

   android:background= 부분에 색코드가 아닌 5번처럼 이미지를 지정해줘도 됩니다.


7. 이제 작업이 다 되었네요. apk manager로 컴파일을 합니다.


8. unsignedSystemUI.apk 파일에서 위에서 작업한 tw_status_bar.xml(진저는 status_bar.xml)을 꺼내서

   원본 SystemUI.apk 파일에 옮겨 넣습니다.


   옮겨넣었으면 SystemUI.apk 파일을 폰에 넣고 퍼미션주고 재부팅을 해보세요.


   재부팅이 되었으면 상단바의 시계가 중앙에 나오는지 확인하세요.^^

   제대로 나왔다면 작업이 잘 된것입니다.



   자...다음에는 어떤 강좌를 써볼까요?

   ㅋㅋ어쨌든 시간날때 또 다른 강좌로 찾아 오겠습니다.