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

hchien83 · 7 Tháng 4 2014

cybershot said: ↑

Bài này tớ viết tặng anh em SKY 850 trên tinhte.vn, hưởng ứng phong trào "trong suốt hóa" giao diện ROM gốc của SKY. Post thêm qua đây để các cụ tiện tìm kiếm.
Mặc dù minh họa bằng dòng 850 JB, song cách thức làm cũng có thể ứng dụng cho các dòng máy SKY chạy JB khác vì phần lớn mã đều giống nhau.

PHẦN 1: TẠO HIỆU ỨNG TRONG SUỐT & MỜ CHO STATUS VÀ NAVI BAR

PHẦN 2: TẠO HIỆU ỨNG TRONG SUỐT & MỜ CHO NOTIFICATION EXPANDED PANEL

Xem hướng dẫn ở đây
http://choimobile.vn/threads/huong-...bar-va-navigation-bar.5432/page-6#post-208423

A/ NGUYÊN LÝ BIỂU DIỄN ĐỘ TRONG, HIỆU ỨNG MỜ

Mỗi thành phần đồ họa trên Android đều được thể hiện ở 2 dạng, hoặc là file ảnh (.png) hoặc là mã màu hex (hex colour code).

Các file ảnh png, để có chế độ nền trong suốt, cần chỉnh sửa background bằng các công cụ xử lý ảnh số. Có người dùng Photoshop, người khác dùng 1 số công cụ có sẵn (ví dụ 9patch) trong bộ Android SDK.

Các thành phần đồ họa có màu sắc thể hiện bằng mã màu thì cần đổi sang mã màu trong suốt. Với tông màu đen (#ff000000), Độ trong suốt/Hiệu ứng mờ thể hiện ở dạng mã màu hex như sau:

#00000000 - Độ trong suốt 100%
#3f000000 - màu đen với độ trong suốt 75% (~ 25% hiệu ứng mờ)
#7f000000 - màu đen với độ trong suốt 50% (~ 50% hiệu ứng mờ)
#bf000000 - màu đen với độ trong suốt 25% (~ 75% hiệu ứng mờ)

Ngoài các mã trên, có thể gg để tìm thêm nhiều mã hiệu ứng mờ khác nữa.

B/ CÔNG CỤ

- Bung và đóng gói apk: Apktool v1.5.2 (hoặc bất kỳ công cụ nào có khả năng bung và đóng gói file apk Jelly Bean)
- Chỉnh sửa file xml: Notedpad ++
- Thao tác file nén và sign: 7zip
- Dexodex ROM : AutoDEOTool v1.0.4 hoặc Android Ultimate Toolbox Pro.
- Adb

C/ CHUẨN BỊ

1/ Điện thoại :
- Chạy ROM gốc mọi phiên bản. Tốt nhất nên dùng ROM chưa chỉnh sửa
- Đã root, cài sẵn adbdInsecure.apk, busybox và dexopt-wrapper để phục vụ công đoạn re-odexing

2/ Máy tính

- Cài sẵn Java Runtime Environment (JRE) trong bộ Oracle Java Development Kit.
-Deodex ROM gốc rồi lấy ra các file (deodexed): framework-res.apk; SystemUI.apk và android.policy.jar
- Chép vào cùng thư mục chứa apktool để tiện thao tác.

D/ THỰC HIỆN

ANDROID.POLICY

Tải resource vào bộ nhớ:

c:\apktool>apktool if framework-res.apk

Bung file android.policy.jar bằng lệnh sau:

c:\apktool>apktool d android.policy.jar

Tìm và mở thủ tục sau:

\com\android\internal\policy\impl\PhoneWindowManager.smali

Tìm method này:

.method public getSystemDecorRectLw(Landroid/graphics/RectI )

(….)

.end method

Xóa toàn bộ nội dung của method này (bắt đầu bằng từ khóa .method và kết thúc bằng .end method) và thay bằng đoạn sau:

.method public getSystemDecorRectLw(Landroid/graphics/RectI )
.locals 1

.parameter "systemRect"

.prologue

.line 3047

iget v0, p0, Lcom/android/internal/policy/impl/PhoneWindowManager;->mSystemLeft:I

iput v0, p1, Landroid/graphics/Rect;->left:I

.line 3048

iget v0, p0, Lcom/android/internal/policy/impl/PhoneWindowManager;->mSystemTop:I

iput v0, p1, Landroid/graphics/Rect;->top:I

.line 3049

iget v0, p0, Lcom/android/internal/policy/impl/PhoneWindowManager;->mSystemRight:I

iput v0, p1, Landroid/graphics/Rect;->right:I

.line 3050

iget v0, p0, Lcom/android/internal/policy/impl/PhoneWindowManager;->mSystemBottom:I

iput v0, p1, Landroid/graphics/Rect;->bottom:I

.line 3051

const/4 v0, 0x0

return v0

.end method

Đóng gói lại

c:\apktool>apktool b android.policy.jar.out

Cách sign file kết quả sau khi đóng gói:

Dùng 7zip mở đồng thời file android.policy.jar gốc và file vừa đóng gói (trong thư mục /android.policy.jar.out/dist/..), kéo toàn bộ thư mục META-INF từ file gốc sang file vừa đóng gói.

Re-odex file android.policy.jar

Nối điện thoại với máy tính bằng cáp microUSB.
Tạo thư mục tmp (nếu chưa có) trên bộ nhớ trong của điện thoại rồi chép file /android.policy.jar.out/dist/android.policy.jar vào thư mục đó (/sdcard/tmp). Đổi tên file trong thư mục /tmp/ thành patched_android.policy.jar.

Từ dòng lệnh, gõ (hoặc copy-paste) lần lượt từng dòng lệnh sau. Cuối mỗi dòng lệnh, nhấn Enter để thực thi.

adb devices

adb remount

adb shell

su

cp system/framework/android.policy.jar sdcard/tmp

cp -f sdcard/tmp/patched_android.policy.jar system/framework/android.policy.jar

dexopt-wrapper system/framework/android.policy.jar system/framework/patched_android.policy.odex $BOOTCLASSPATH

cp -f sdcard/tmp/android.policy.jar system/framework

chmod 777 /system/framework/android.policy.odex

chmod 777 /system/framework/android.policy.jar

chmod 777 /system/framework/patched_android.policy.odex

chmod 644 /system/framework/android.policy.jar

chown root.root /system/framework/android.policy.jar

busybox dd if=/system/framework/android.policy.odex of=/system/framework/patched_android.policy.odex bs=1 count=20 skip=52 seek=52 conv=notrunc

cp /system/framework/patched_android.policy.odex /system/framework/android.policy.odex

(Chú ý: Đến đây điện thoại có thể khởi động lại. Hãy chờ khi máy khởi động xong vào Android mới thực thi các lệnh tiếp theo dưới đây)

adb shell

su

chmod 644 /system/framework/android.policy.odex

chown root.root /system/framework/android.policy.odex

rm /system/framework/patched_android.policy.odex

rm /data/dalvik-cache/*.dex

reboot

* SYSTEMUI

Dùng apktool bung file SystemUI.apk để sửa:

c:\apktool>apktool d SystemUI.apk

Mở file và sửa mã xml. (Chủ yếu là sửa mã màu của android:background)

Lưu ý ở các đoạn mã sửa dưới đây dùng hiệu ứng mờ 50%, tức là “#7f000000”, hoặc 75% (“#3f000000”) để minh họa. Các cụ có thể lựa chọn hiệu ứng trong suốt khác (100%; 80%; 75% v.v) tùy theo sở thích.

\SystemUI\res\layout\navigation_bar.xml

GỐC

<com.android.systemui.statusbar.phone.NavigationBarView android:background="#ff000000" android:layout_width="fill_parent" android:layout_height="fill_parent"

SỬA

<com.android.systemui.statusbar.phone.NavigationBarView android:background="#7f000000" android:layout_width="fill_parent" android:layout_height="fill_parent"

\SystemUI\res\layout-sw600dp\navigation_bar.xml

GỐC

<com.android.systemui.statusbar.phone.NavigationBarView android:background="#ff000000" android:layout_width="fill_parent" android:layout_height="fill_parent"

SỬA

<com.android.systemui.statusbar.phone.NavigationBarView android:background="#7f000000" android:layout_width="fill_parent" android:layout_height="fill_parent"

\SystemUI\res\values\drawables.xml

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="system_bar_background">#ff000000</item>

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

SỬA:
<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="system_bar_background">#7f000000</item>

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

Bung file SystemUI, mở file
\SystemUI\smali\com\android\systemui\statusbar\phone\PhoneStatusBar.smali

tìm đến đoạn mã sau và sửa như dưới đây.

<<<<<Quy ước:
Ký hiệu (+) là thêm dòng lệnh sau dấu đó, (-) là xóa bỏ dòng lệnh sau dấu đó. Các dòng lệnh khác giữ nguyên. Đoạn mã sau khi sửa xong không bao gồm ký hiệu (+)/(-). >>>>>>>>>>>

.method private getNavigationBarLayoutParams()Landroid/view/WindowManager$LayoutParams;

.locals 6

.prologue

const/4 v1, -0x1

.line 1328

new-instance v0, Landroid/view/WindowManager$LayoutParams;

const/16 v3, 0x7e7

const v4, 0x800068

(+) const/4 v5, -0x3

move v2, v1

(-) move v5, v1

invoke-direct/range {v0 .. v5}, Landroid/view/WindowManager$LayoutParams;-><init>(IIIII)V

.line 1338

Lưu thay đổi

Mở tiếp

\SystemUI\smali\com\android\systemui\statusbar\tablet\TabletStatusBar.smali

Tìm và sửa:

.method private addStatusBarWindow()V

.locals 7

.prologue

const/4 v1, -0x1

.line 235

invoke-virtual {p0}, Lcom/android/systemui/statusbar/tablet/TabletStatusBar;->makeStatusBarView()Landroid/view/View;

move-result-object v6

.line 237

.local v6, sb:Landroid/view/View;

new-instance v0, Landroid/view/WindowManager$LayoutParams;

const/16 v3, 0x7e7

const v4, 0x800048

(+) const/4 v5, -0x3

(-) const/4 v5, 0x4

(-) move v2, v1

invoke-direct/range {v0 .. v5}, Landroid/view/WindowManager$LayoutParams;-><init>(IIIII)V

Mở thư mục

\SystemUI\res\drawable-xhdpi

Dùng Photoshop mở 2 file ảnh này ra. Dùng tính năng Background Erase Tool để xóa nền của ảnh đi, biến nó thành 100% trong suốt.

ic_systembar_bg.png

ic_systembar_bg_land.png

(Nếu ko có Photoshop, có thể dùng phần mềm sửa ảnh số khác có chức năng tương tự)

Thường thì chỉ cần sửa 2 file trên là đủ. Tuy nhiên, nếu muốn trong suốt thanh navi3 cho mọi style, có thể sửa tương tự như trên với các file ảnh khác như sau:

ic_systembar_bg_02/03/04.png

ic_systembar_bg_land_02/03/04.png

Xong lưu thay đổi lại. Dùng công cụ apktool để đóng gói

C:\Apktool>apktool b SystemUI

Cách sign SystemUI.apk

Dùng 7zip mở đồng thời file SystemUI.apk gốc và file mới sửa trong thư mục SystemUI/dist/…

Kéo META-INF và AndroidManifest.xml từ file gốc thả sang file sửa. Chọn OK khi có hộp thoại yêu cầu xác nhận.

Chép file SystemUI/dist/SystemUI.apk vừa sign xong vào điện thoại, tạm thời cho vào thư mục /system/, set permission rw-r-r (644), owner: root.root, xong rồi tiếp tục di chuyển đè lên file cũ trong /system/app/. Xóa file SystemUI.odex đi.

Wipe dalvik cache lần nữa rồi reboot lại máy.

(Không giống như các file framework, các ứng dụng hệ thống như SystemUI.apk sau khi deodex thì không nhất thiết phải re-odex lại).

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

E/ CHÚ THÍCH:

- Khi test, hiệu ứng trong suốt và mờ của stt3 và navi3 phát huy đầy đủ với launcher gốc và Sony Xperia Z Launcher ở homescreen và app drawer. Với các ported launcher TouchWiz của Galaxy S4 và LG UI 3, 1 phần hiệu ứng bị mất tác dụng, hoặc với Status Bar (LG) hoặc với Navigation Bar (SS). Các launcher khác chưa thử.

- Khi chạy các ứng dụng thì thanh navi sẽ khôi phục trạng thái gốc, còn status bar không còn trong suốt mà sẽ biến màu tùy theo ứng dụng. Riêng một số ứng dụng hỗ trợ full screen như Youtube hoặc MX video player thì ok.

Vài hình minh họa

Click to expand...

Thế nếu chỉ làm mờ riêng thanh NAVI BAR thì bỏ cái nào đi ạ!

thienduonglua19xx · 4 Tháng 5 2014

rất hay , tks bác

6hsang · 11 Tháng 5 2014

thank bác đã chia sẻ

voirung94 · 27 Tháng 6 2014

Bác có cách nào mà khắc phục được lỗi nhòe thanh navigation khi mod trong suốt không ạ????????

Đăng nhập hoặc Đăng ký

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

hchien83 Th.Viên Premium

thienduonglua19xx Th.Viên Chính Thức

6hsang Th.Viên Chính Thức

voirung94 Thành Viên Mới

Đăng nhập hoặc Đăng ký

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

hchien83 Th.Viên Premium

thienduonglua19xx Th.Viên Chính Thức

6hsang Th.Viên Chính Thức

voirung94 Thành Viên Mới

Tìm kiếm hữu ích