Hướng dẫn tạo hiệu ứng trong suốt & mờ cho status bar và navigation bar

Trong bài hướng dẫn mình đã nói qua 1 cách làm sử dụng Photoshop. Dĩ nhiên, giả định là bạn biết một tý ti về Photoshop nhé.

1/ Mở file ảnh nền thanh navi3 ra bằng photoshop. Mỗi nền gồm 2 ảnh biểu diễn chế độ ngang (portrait) và dọc (landscape). Các file này có tên là ic_systembar_bg_0x.png và ic_systembar_bg_land_0x.png (với x là số tự nhiên) nằm trong thư mục SystemUI/res/drawable-xhdpi/... Các dòng máy cũ độ phân giải thấp thì nó có thể nằm ở các thư mục SystemUI/res/drawable-hdpi hoặc drawable-mdpi.
2/ Từ thanh toolbox, chọn Background Erase Tool. Xóa trắng nền đi. Lúc này ảnh nền nó hiện hình kẻ ca rô.
3/ Lưu thay đổi vừa tạo ra cho file ảnh nền.

 

UPDATED (15/07/2013)

Với 1 số phiên bản ROM có thanh điều hướng tùy biến giống như của dòng máy Vega Iron 870, để khắc phục hiện tượng chớp nháy màn hình sau khi áp dụng hiệu ứng trong- mờ như hướng dẫn trên, cần chỉnh thêm 1 số tham số trong file build.prop, cụ thể như sau:

debug.mdpcomp.maxlayer = 2 (hoặc =1 hoặc =0)
debug.composition.type = gpu
dev.pm.gpu_samplingrate = 1

 

Mình chưa thử qua Optimus G 915, nên cũng không rõ cách mod cụ thể cho dòng máy đó như thế nào. Nhưng về phương hướng làm thì cơ bản là tương tự. Có khác chăng là các thành phần trong systemUI của LG có thể không giống Pantech nên việc chỉnh mã màu nó sẽ khác. Hơn nữa, OG không có thanh điều hướng ảo, nên rút ngắn được công đoạn mod trong suốt thanh điều hướng.

 

Việc làm hiệu ứng trong/mờ cho notification panel và các notification message title trên đó không có gì khó, và phương pháp của mình cũng không phải thay thế file png nào cả, chỉ cần chỉnh sửa mã màu thôi.

Hướng dẫn phần này cho dòng 850 thì mình cũng đã gửi riêng cho một số bạn modder. Nếu bạn cần hướng dẫn cụ thể cho dòng máy khác thì cho mình biết mã máy + phiên bản ROM định mod hiệu ứng để mình đối chiếu xem có thay đổi gì so với cách làm trên 850 không?

 

Cụ thay những cái này thì nó trong suốt cái thanh easy settings (chứa các biểu tượng truy cập nhanh Wifi, 3G, GPS v.v) thôi, chứ notification panel thì không nằm ở đó.

Mấy hôm rồi bận quá nên cũng chẳng kịp nghía xem mã của IM-A840S có gì khác không. Thôi thì tớ cứ post hướng dẫn của dòng IM-A850 lên, chắc cũng giống nhau cả thôi.

 

PHẦN 2:
HƯỚNG DẪN LÀM HIỆU ỨNG TRONG/MỜ CHO THANH THÔNG BÁO (NOTIFICATION EXPANDED PANEL)

Phần này hướng dẫn tạo hiệu ứng trong mờ thông qua chỉnh sửa mã màu trong các file xml và không đụng chạm đến chỉnh sửa ảnh. Các đoạn mã minh họa dưới đây sử dụng hiệu ứng trong suốt của nền Notification panel=75% (#3f000000). Các dòng thông báo trên đó (Notification Title) đặt nền trong suốt = 61-62% (#5f000000). Các cụ có thể thay đổi bằng các mã màu khác tùy ý thích.

Lưu ý là có một số chỗ thực ra cũng không cần sửa mã. Nhưng thôi giết nhầm còn hơn bỏ sót.

Thanh notification panel cũng là nơi 1 số running app cũng bon chen phần thu nhỏ vào, ví dụ như cái Music Player khi đang phát nhạc chẳng hạn. Muốn chỉnh trong suốt của phần bon chen này thì phải sửa mã xml của app đó chứ lúc này Notification panel của hệ thống không quản lý.

YÊU CẦU

apktool
framework-res.apk
SystemUI.apk (Odex hay deodex đều ok)

CÁCH LÀM
Chép 2 file framework-res.apk và SystemUI.apk vào cùng thư mục chứa apktool

Dùng apktool bung 2 file trên ra bằng các lệnh sau:

apktool if framework-res.apk

apktool d framework-res.apk

apktool d SystemUI.apk

CHỈNH SỬA MÃ

\framework-res\res\values

Mã gốc

<item type="drawable" name="status_bar_closed_default_background">#ff000000</item>

<item type="drawable" name="status_bar_opened_default_background">#ff000000</item>

<item type="drawable" name="notification_item_background_color">#ff111111</item>

<item type="drawable" name="notification_item_background_color_pressed">#ff257390</item>

<item type="drawable" name="notification_template_icon_bg">#00121212</item>

<item type="drawable" name="notification_template_icon_low_bg">#00121212</item>

Sửa thành

<item type="drawable" name="status_bar_closed_default_background">#3f000000</item>

<item type="drawable" name="status_bar_opened_default_background">#3f000000</item>

<item type="drawable" name="notification_item_background_color">#3f000000</item>

<item type="drawable" name="notification_item_background_color_pressed">#5f000000</item>

<item type="drawable" name="notification_template_icon_bg">#5f000000</item>

<item type="drawable" name="notification_template_icon_low_bg">#5f000000</item>

Bổ sung

Mã Gốc

\framework-res\res\layout\notification_template_base.xml

<FrameLayout android:id="@id/status_bar_latest_event_content" android:background="@drawable/notification_bg"

\framework-res\res\layout\notification_template_big_base.xml

<FrameLayout android:id="@id/status_bar_latest_event_content" android:background="@drawable/notification_bg"

\framework-res\res\layout\notification_template_big_picture.xml

<FrameLayout android:id="@id/status_bar_latest_event_content" android:background="@drawable/notification_bg"

\framework-res\res\layout\notification_template_big_text.xml

<FrameLayout android:id="@id/status_bar_latest_event_content" android:background="@drawable/notification_bg"

Tất cả 4 cái trên sửa thành

<FrameLayout android:id="@id/status_bar_latest_event_content" android:background="#3f000000"

Tiếp tục ....

\SystemUI\res\values\drawables.xml

Mã gốc

<item type="drawable" name="status_bar_background">#ff000000</item>

<item type="drawable" name="status_bar_notification_row_background_color">#ff1a1a1a</item>

<item type="drawable" name="notification_item_background_legacy_color">#ffaaaaaa</item>

<item type="drawable" name="notification_icon_area_smoke">#aa000000</item>

Sửa thành

<item type="drawable" name="status_bar_background">#7f000000</item>

<item type="drawable" name="status_bar_notification_row_background_color">#3f000000</item>

<item type="drawable" name="notification_item_background_legacy_color">#3f000000</item>

<item type="drawable" name="notification_icon_area_smoke">#3f000000</item>

\SystemUI\res\values\colors.xml

Mã gốc

<color name="notification_panel_solid_background">#ff000000</color>

Sửa thành

<color name="notification_panel_solid_background">#3f000000</color>

\SystemUI\res\layout\status_bar_expanded.xml

Gốc

<FrameLayout android:id="@id/notification_panel" android:background="#ff000000"

Sửa thành

<FrameLayout android:id="@id/notification_panel" android:background="#3f000000"

\SystemUI\res\layout\status_bar_expanded_header.xml

Gốc

Code:

<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:background="@drawable/notification_header_bg"

Sửa thành

Code:

<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:background="#7f000000"

\SystemUI\res\layout\status_bar_expanded_notifications_title.xml

Gốc

Code:

<RelativeLayout android:layout_gravity="center_vertical" android:orientation="horizontal" android:background="@drawable/easy_setting_title_bg"

Sửa thành

Code:

<RelativeLayout android:layout_gravity="center_vertical" android:orientation="horizontal" android:background="#5f000000"

\SystemUI\res\layout\notification_adaptive_wrapper.xml

Gốc

<SizeAdaptiveLayout android:id="@id/notification_adaptive_wrapper" android:background="@*android:color/background_dark"

Sửa thành

<SizeAdaptiveLayout android:id="@id/notification_adaptive_wrapper" android:background="#5f000000"

ĐÓNG GÓI

apktool b framework-res

apktool b SystemUI

SIGN TẬP TIN HỆ THỐNG
Mở file kết quả ở thư mục framework-res/dis và SystemUI/dist
Cách sign làm tương tự như hướng dẫn ở phần 1.

CÀI ĐẶT
- Chép framework-res.apk vừa thu được sau khi chỉnh sửa vào thư mục này trên điện thoại: /system/framework/
- Chép SystemUI.apk vừa thu được sau khi chỉnh sửa vào thư mục này trên điện thoại: /system/app/
- Phân quyền cho cả 2 file này là 0644 (rw-r-r)
- Thực hiện thao tác Wipe davilk-cache và reboot máy điện thoại để xem kết quả.