상단바 시계중앙 만들기 [Center Clock]

2013.03.14 09:00






아이폰의 중앙시계 스타일을 좋아하시는 분을 위한 강좌겠네요. 시계 중앙은 생각보다 어렵지 않습니다. 처음 시계중앙버젼을 했을때 문제가 되는 부분은 우측에 아이콘이 많아지면 중앙시게와 겹치는 문제점이 발생되서 일부아이콘을 투명화처리해서 테마제작을 했었지만 이젠 스마트폰의 액정사이즈가 커지면서 특정상황이 아닌이상 중앙시계와 아이콘이 겹쳐지는 일이 적어 졌습니다. 이강좌는 ICS의 강좌가 비슷하지만 간단명료하게 개념과 스크립설명 위주로 진행하겠습니다. 이구조만 알면 테마의 중앙시계가 맘에안들면 다시 일반 시계위치로 쉽게 바꾸실 수 있습니다.


안드로이드 시리즈 상단바 중앙 시계 만들기


수정파일 : projects\SystemUI.apk\res\layout\tw_status_bar.xml[수정후 퍼미션 644로 덮어주세요]


 원본 ☆ 파일내에 "statusbar.policy.Clock" 부분을 찾아주세요.

 <?xml version="1.0" encoding="utf-8"?>

<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/status_bar_background" android:focusable="true" android:fitsSystemWindows="true" android:descendantFocusability="afterDescendants"

  xmlns:android="http://schemas.android.com/apk/res/android"

  xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">

    <ImageView android:id="@id/notification_lights_out" android:paddingLeft="6.0dip" android:paddingBottom="2.0dip" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" />

    <LinearLayout android:orientation="horizontal" android:id="@id/icons" android:paddingLeft="0.0dip" android:paddingRight="2.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">

        <LinearLayout android:orientation="horizontal" android:id="@id/left_icons" android:paddingLeft="4.0dip" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">

            <TextView android:textSize="15.0dip" android:gravity="center_vertical" android:id="@id/carrierLabel" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />

            <ImageView android:id="@id/operatorLogoIcon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:src="@drawable/tw_stat_notify_operator_logo" />

            <ImageView android:id="@id/doNotDisturbIcon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tw_dnd" android:alpha="0.7" android:scaleX="0.85" android:scaleY="0.85" />

            <com.android.systemui.statusbar.StatusBarIconView android:id="@id/moreIcon" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/stat_notify_more" />

            <com.android.systemui.statusbar.phone.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" />

        </LinearLayout>

        <LinearLayout android:orientation="horizontal" android:id="@id/right_icons" android:paddingRight="4.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true">

            <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />

            <LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:paddingLeft="2.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">

                <include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/tw_signal_cluster_view" />

                <TextView android:textSize="12.0dip" android:textColor="#ffa6a6a6" android:layout_gravity="center" android:id="@id/battery_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_network_name_separator" />

                <ImageView android:gravity="center" android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" />

            </LinearLayout>

            <com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#ff959595" android:ellipsize="none" android:gravity="left|center" android:id="@id/clock" android:paddingLeft="3.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:includeFontPadding="false" />

        </LinearLayout>

    </LinearLayout>

    <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="centerInside" />

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

        </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>

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







 수정본 ☆ 아래와 같이 수정해주세요.(com.android.systemui.statusbar.policy.Clock 위치이동)


 <?xml version="1.0" encoding="utf-8"?>

<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/status_bar_background" android:focusable="true" android:fitsSystemWindows="true" android:descendantFocusability="afterDescendants"

  xmlns:android="http://schemas.android.com/apk/res/android"

  xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">

    <ImageView android:id="@id/notification_lights_out" android:paddingLeft="6.0dip" android:paddingBottom="2.0dip" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" />

    <LinearLayout android:orientation="horizontal" android:id="@id/icons" android:paddingLeft="0.0dip" android:paddingRight="2.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">

        <LinearLayout android:orientation="horizontal" android:id="@id/left_icons" android:paddingLeft="4.0dip" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">

            <TextView android:textSize="15.0dip" android:gravity="center_vertical" android:id="@id/carrierLabel" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />

            <ImageView android:id="@id/operatorLogoIcon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:src="@drawable/tw_stat_notify_operator_logo" />

            <ImageView android:id="@id/doNotDisturbIcon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tw_dnd" android:alpha="0.7" android:scaleX="0.85" android:scaleY="0.85" />

            <com.android.systemui.statusbar.StatusBarIconView android:id="@id/moreIcon" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/stat_notify_more" />

            <com.android.systemui.statusbar.phone.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" />

        </LinearLayout>

        <LinearLayout android:orientation="horizontal" android:id="@id/right_icons" android:paddingRight="4.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true">

            <LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />

            <LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:paddingLeft="2.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">

                <include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/tw_signal_cluster_view" />

                <TextView android:textSize="12.0dip" android:textColor="#ffa6a6a6" android:layout_gravity="center" android:id="@id/battery_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_network_name_separator" />

                <ImageView android:gravity="center" android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" />

            </LinearLayout>            

        </LinearLayout>

    </LinearLayout>

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

        <com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#ff36b7e7" android:ellipsize="none" android:gravity="left|center" android:id="@id/clock" android:paddingLeft="3.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:includeFontPadding="false" />

    </LinearLayout>

    <LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:background="@drawable/status_bar_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="centerInside" />

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

        </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>

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


이 강좌의 사실 위치 수정이라는 개념보다는 LinearLayout의 개념만 알고 있으면 어렵지 않게 이해할 수 있습니다.

중앙시계강좌는 기존에 그룹핑 되어있던 LinearLayout을 독자적인 LinearLayout구조로 생성하면서 중앙정렬을 하는 방식입니다. xml에서 자주 나오는 구문정리는 시간되는대로 해드리겠습니다.



추가적으로 들어가는 background이미지는 중앙시계를 하게되면 좌측에 티커메세지와 중앙시계와 글씨겹침을 막기위해 ticker메세지 생성시 배경이 함께 나와서 겹치지 않게 해주 방법입니다.status_bar_background는 상단바 배경화면이미지 입니다.


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







 수정본 이미지☆

[글씨색상은 제가 임의로 바꾼겁니다.]








저작자 표시 비영리 변경 금지
신고


azdesign™ ☆ 테마제작관련 ☆/테마제작강좌 , , , ,



  1. Blog Icon
    kt3694

    강좌 감사합니다.
    질문 하나 드려도 될까요?
    루팅하고 디자인님의 종합롬 v2를 적용한 상태에서
    a님의 상단바가 맘에 들어서 a님의 SystemUI.apk만 적용했는 데
    시계가 중앙이 아니어서 중앙으로 수정을 하고 싶은 경우
    a님의 SystemUI.apk 파일과 디자인님의 framework-res.apk 파일을 같이 폴더에
    넣고 apk manager로 SystemUI.apk 파일을 디컴파일해서
    SystemUI.apk\res\values\strings.xml 이 파일을 열고 수정하고
    다시 컴파일하면 unsignedSystemUI.apk 파일이 생성되던데요.
    이 파일을 SystemUI.apk로 이름을 수정하고 권한줘서 system/app 폴더에 넣으면 될까요?
    해 보고 싶어도 얼마전에 무한재부팅 된 이후엔 겁이 나서 섶불리 시도를
    못 하겠네요.
    네이버에 검색 해 보면 원본 파일을 알집으로 열어서 수정 파일을 넣고 UTP-8 지정하고 덮어쓰기 지정하고
    복사하고 하라고 하던 데 이것도 꼭 해야 되는 건가요? 어렵네요.
    디지인님처럼 잘 하려면 무슨 책을 사서 봐야 할지 궁금합니다. 인터넷에 검색 해 봐도
    책은 딱히 나온 게 없는 거 같고.

  2. Blog Icon
    Blue1004:F★

    안녕하세요.
    xml 수정하신후 unsignedSystemUI.apk 까지 만드셨으면
    unsigned~.xml 파일을 알집이나 7zip등으로 파일을 열어서 수정하신 xml 파일을 밖으로 끄집어 냅니다.
    그리고 a님의 SystemUI.apk에 수정하신 xml 파일을 빼낸 위치에 그대로 넣어 주셔야 합니다.

  3. Blog Icon
    kt3694

    blue님 답변 너무나 감사합니다.
    apk manager로 unsignedSystemUI.apk 만들고
    다시 singedSystemUI.apk 로 만들어지던 데
    수정한 파일을 원본에 넣어 줄 때 unsignedSystemUI.apk 파일이든
    singedSystemUI.apk 파일이든 상관없이 수정한 xml 파일을
    알집으로 열고 넣고 닫기하고 권한 줘서 system/app 에 넣어주면
    되나요?

  4. Blog Icon
    쿤투

    디자인님 블로그에있는 강좌중에서 디컴파일 컴파일 방법이 적힌 강좌를 봐보시길 바랍니다.
    궁금하신부분들이 전부 적혀있으니 꼼꼼히 읽어보시길...^^;

  5. Blog Icon
    storm

    오전 오후 삭제 하는 방법은 없나요?
    아센 강좌는 해봤는데 안되던데...
    (제가 실수 했을지도 모르지만요^^; )

  6. Blog Icon
    방문객이라고 칩시다

    수정 파일이 tw_status_bar.xml 아닌가요?

  7. Blog Icon
    DX-7

    강좌 감사합니다. 구경 잘(?) 하고 갑니다. ㅎㅎ ^^

  8. 노트2 작업에 성공했습니다.
    한가지 질문드릴게 있는데요.
    상단바 투명화를 했더니 알림 울릴때 티커가 시계를 침범해버리네요.ㅠ
    이부분은 수정이 안될까요?
    티커에 있는 android:layout_width="fill_parent" <- fill_parent 를 dip값주면 수정이 될런지...
    실사폰인지라 모험하기가 겁나네요.ㅠ

  9. Blog Icon
    Master Road:)

    허... 저는 계속 디컴파일할려고 하면 an error occurred please check the log <option 21> 이런 오류가 뜨네요 apk 세팅 작업을 할려고 링크에 들어갔는데 없는 주소라 하구... 방법좀 알려주세요!

  10. Blog Icon
    Master Road:)

    아 그.. apk 매니져에서 9?누르면요

  11. Blog Icon
    R3

    9번말고 10번누르신후 프레임워크apk를 드래그해서 cmd창에 넣어요
    그리고 엔터쳣엇나..아무튼 Sorry뭐시기뜹니다
    그러면 cmd창을 껏다가 다시키세요
    그리고 9번눌르시면 디컴되십니다.

  12. Blog Icon
    R3

    베가R3에서 적용하려는데요..strings.xml을 아무리뒤져보고 다른파일을뒤져봐도
    수정해야할내용들이 안나와요.....

  13. 죄송합니다. 제가 경로를 잘못적어드렸네요. 수정했습니다.
    layout\tw_status_bar.xml 쪽입니다.

  14. Blog Icon
    JJ

    저기요 죄송한데 제가 시그널하고 데이터아이콘은 상단바왼쪽으로 하고싶은데 가르쳐주실수잇나요.. 아이폰처럼하고싶은데

  15. 그건 글쎄요 해보지 않아서.. 막상 구현을 해도 안드로이드 상단바 특성상 아이폰과 같이 똑같이 작동하기는 힘들어보입니다. 어플설치 및 상단좌측에 자주 나오는 아이콘때문에 더 복잡해보일거 같은데요..

  16. Blog Icon
    JG

    추가적으로 들어가는 background이미지는 중앙시계를 하게되면 좌측에 티커메세지와 중앙시계와 글씨겹침을 막기위해 ticker메세지 생성시 배경이 함께 나와서 겹치지 않게 해주 방법입니다.status_bar_background는 상단바 배경화면이미지 입니다.

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

    이 구문처럼 똑같이 했는데 티커메세지가 시계위로 겹치네요ㅠ
    왜그런가요? 다른방법이 있을까요?

티스토리 툴바