상단바 베터리 잔량 숫자 겹치기 강좌

2013.03.12 08:00





테마 제작을 하다보면 이전에는 가장 많이 요청을 받은것중 하나가 1% 베터리였습니다.  베터리 표시에 대해서는 좋아하시는 분도 계시고 안좋아하는 분도 계셔서 1%베터리로 테마배포를 하면 빼달라는 요청도 들어오고.. 테마제작을 하면서 넣어야할지 말아야할지 고민하게 되었던 부분인데요 이전 강좌에서 보시다시피 "환경설정-디스플레이"에서 베터리 잔량표시를 해주면 퍼센트가 표시됩니다. 하지만 이게 별로 이쁘지 않습니다. 그래서 기존의 베터리 이미지에 숫자를 겹치는 방법을 알게됐습니다. 맛클에 엔꼬님 강좌를 토대로 갤럭시노트에 맞춰 수치를 조정했습니다. 이작업을 하시면서 이전강좌 %제거를 함께 해주셔야지 어색하지 않습니다.

강좌 원문 출처[엔꼬님] : http://matcl.com/?m=bbs&bid=UX&uid=131675



상단바 베터리 잔량 숫자 겹치기


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


 원본 ☆ 파일내에 "@id/battery_text" 부분을 찾아주세요.

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









 수정본 ☆ 아래와 같이 수정해주세요. [TextView와 ImageView위치가 바뀝니다.]

ImageView부분을 숫자 표시 뒷부분으로 넘겨주게되고. android:layout_marginLeft="-11.5dip" 명령어를 통해 베터리 위치표시를 좌측여백을 마이너스(-)를 주어 베터리 이미지와 겹치게 해주시는 방법입니다.

(android:textColor="#ccffffff" : 베터리 잔량 숫자 색상, android:textSize="8.0dip" : 베터리 숫자 크기)



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

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

                <TextView android:textSize="8.0dip" android:textColor="#ccffffff" android:layout_gravity="center" android:id="@id/battery_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="-11.5dip" android:text="@string/status_bar_network_name_separator"  />

            </LinearLayout>


* 수정하시면서 베터리 퍼센트 표시도 제거해주세요.

2013/03/10 - [☆젤리빈 테마 강좌☆/SystemUI] - 베터리 잔량 숫자 퍼센트(%) 제거하기





 수정본 이미지☆







젤리빈 이후 상단바를 가장 깔끔하게 정리할 수 있는 팁이였습니다.

어렵지 않는 작업이니 숫자를 바꿔가면서 이미지 위치변화 확인해보시면 타기종도 문제 없이 적용가능합니다.

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


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



  1. Blog Icon
    Az님팬

    잘보고 가요 이거 멋지네요

  2. Blog Icon
    DX-7

    지식 잘 얻어 갑니다. 포스팅 감사해요. 멋지심. ^^

  3. Blog Icon
    kt3694

    감사합니다.
    한번 해 보고 싶은 데 엄두가 안 나네요

  4. Blog Icon
    bu

    감사합니다 디자인님 자세한 강좌덕에 많은걸
    적용해보내요
    그래도 알수록 더어려워 지네요 ㅠ.ㅠ

  5. Blog Icon
    kt3694

    한번 시도를 해 봤는데요.
    퍼센트 지우기랑 같이 했는 데
    퍼센트는 맞게 지워졌는 데 배터리 잔량은 그대로 변화가 없던 데
    뭐가 잘못일까요?
    <ImageView android:gravity="center" android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" />

    <TextView android:textSize="8.0dip" android:textColor="#ccffffff" android:layout_gravity="center" android:id="@id/battery_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="-11.5dip" android:text="@string/status_bar_network_name_separator" />
    이걸 복사해 넣었거든요.

  6. Blog Icon
    카레

    안녕하세요 ! 강좌 감사합니다.
    베가S5에 적용했는데 잘 작동하네요 ㅎㅎ
    한가지 질문이 있습니다. 배터리 아이콘은 지우고, 배터리 숫자만 표시하려면 어떤 부분을 만져줘야 되나요?

  7. Blog Icon
    카레

    답변 감사합니다 ㅎㅎ
    그냥 가로 세로 길이를 0.0dip로 해보면 될려나 하고 했더니 적용되네요

  8. Blog Icon
    하얀여우

    안녕하세요 하얀여우에요~
    강좌 보고 따라해봤는데 이미지랑 텍스트가 겹쳐지질 않네요.ㅠ
    뭘 잘못한걸까요....
    %지우기까지는 되는데 이미지 겹치기에서 실패를 거듭하고 있네요.

  9. Blog Icon
    하얀여우

    v2 싯유 뜯어서 작업했는데 안되고 있어요.ㅠㅠ
    노트2도 응용해서 해봤지만...숫자부분이 꿈쩍을 안하네요..;;
    수치값만큼 움직이기라도 해야하는거 아닌지...

  10. Blog Icon
    하얀여우

    디자인님 죄송해요...
    노트2 작업한다고 other에 노트2싯유 넣어놓고 컴파일 했었네요..;;;
    노트용으로 바꾸고 컴파일 했더니 잘되네요..^^;
    순정 배터리 이미지에는 margin값을 수정해야 중앙에 위치하네요..ㅎ
    아우 챙피해....텨!

  11. 옵티머스 뷰도 같은방법으로 되네요 ㅎ

    android:layout_marginLeft="-11.5dip" 요부분만 android:layout_marginLeft="-20.5dip" 요렇게 하면 딱 중간에 들어가네요 ㅎ

  12. Blog Icon
    차티스트

    디자인님~ 저게 음,, 유플 갤포도 될까요?

  13. 수치만 조금 변동이 있을뿐 가능할 거 같습니다.

  14. Blog Icon
    CLovers31

    강좌들 감사히 잘 보고 있습니다.
    이거 배터리 퍼센트 겹치는거 질문좀 드려도 될까요??
    저는 갤럭시s4 lte를 쓰고 있구요. 적용시킬려고 보니까 tw 바는 없고 그냥 status bar만 있더라고요.
    구문을 비교해보니까 파일명은 달라도 구문이 거의 같아서 그부분을 순서바꾸고 하는 그대로 적용시켰구요.
    컴파일도 하고 적용시켜보니까 배터리하고 모양은 구문 바꾼대로 적용이 잘되는데 자꾸 systemUi가 중지되네요.
    그래서 같은 갤4 파일 찾아보다가 lte-a 기종에 적용시킨 파일을 찾아서 뜯어봤더니 코드나 방식은 같은거 보면 방법은 틀리지 않은거 같은데 왜 자꾸 중지가 되는지 모르겠습니다.

    디오덱파일같은거 관계가 있는지(디오덱해서 smali 수정해서 알람아이콘 없애서 쓰고 있거든요.) 그리고 현재 시계중앙 적용해서 쓰고 있는데 그런거 바꾼거하고 연관이 있을까요???

  15. 제 기종이 아니라 정확한 답변은 힘들 거 같습니다. 디오덱하고는 큰 관계가 없어보입니다. 해당구문은 스크립을 수정해서 배터리하고 숫자만 합치는 소스.. 기기마다 조금씩 치수만 틀릴 뿐 강종될 이유가 없어보이는데.. 이상하네요..

  16. Blog Icon
    CLovers31

    감사합니다. 다른구문은 순정상태 그대로 두고 한번 해봐야겠네요.

  17. Blog Icon
    CLovers31

    status_bar 파일에 다른구문은 건들지 않고 겹치는것만 바꿔서 해봤는데도 강종되네요...치수가 다르다고 해서 강종되지는 않죠?? 뭐가 잘못된건지를 모르겠네요...

  18. Blog Icon
    제네식스

    이제야 강좌 보면서 하나하나 따라가고 있습니다.
    감사드립니다^^

티스토리 툴바