TUTORIAL EDITING UI VIA PC

TUTORIAL EDITING UI VIA PC

Assalamualaikum Wr Wb.

Ane akan menjelaskan tentang Editing UI (User Interface) via PC.
Oke, persiapkan bahan :
1. PC
2. ApkTool by Bdfreak DOWNLOAD
3. MT65XX ADB Driver DOWNLOAD
4. Notepad++ DOWNLOAD
5. USBDriverTool DOWNLOAD
6. ADB Tool         DOWNLOAD
7. JAVA         DOWNLOAD
8. Winrar DOWNLOAD
9. HP Android
10. Kabel Data

Tutor 1 : 
Installasi ADB
1. Download semua bahan yg udah didownload.

2. Buka hp ente. Ke Pengaturan - Opsi Pengembang (Kalau tidak ada bisa dibuka dengan klik 8 kali di Tentang Telepon - Nomor Bentukan) Ceklis Debugging USB.

3. Hubungkan HP ente dengan PC menggunakan Kabel Data. 
Buka USBDriverTool td yg sudah diinstalasi. 
Ikuti Screenshot USBDriverTool-1 sampai USBDriverTool-6.

4. Buka ADB Tool dan Ikuti Screenshot ADB-1 sampai ADB-5

5. Buka ApkTool by BDFreak. Disitu ente bakal lihat ada folder 2-In. 
Nah copy framework-res.apk dan SystemUI.apk yg sudah di adb pull td ke folder 2-In ini.

6. Buka Advance Apktool.exe, jika menemukan error Java maka silahkan install java terlebih dahulu. Jika tidak, lanjut ke Screenshot Apktool-1 sampai Apktool-11.

7. Jika sudah. Maka Misi ente sukses di Tutor 1 :v Lanjut Tutor 2.

Tutor 2 :
Editing 
Sebelum Editing, Backup ROM dengan Nandroid Backup via Recovery seperti CWM/TWRP/PHILZ/CTR.

Kenapa kita lakukan ini ? Agar tidak sulit jika terjadi bootloop.
Oke lanjut.

1. Buka Folder SystemUI.apk di folder 3-Out tadi.
2. Buka juga folder GUIDE yang sudah disertakan dalam zip tutorial ini.
3. Kita ke mode paling dasar terlebih dahulu, buka folder GuideKTA. Buka Tutor.xml dengan Notepad++.

4. Baca ini :

merge bahan dan
tambahkan di statusbar expanded :


<include layout="@layout/nia_kta_layout" />

5. Terlihat disitu kita disuruh untuk menambah script <include layout="@layout/nia_kta_layout" /> di Statusbar_expanded.xml

6. Buka SystemUI.apk/res/layout/Gemini_StatusBar_expanded.xml dengan Notepad++

7. Lihat Screenshot Editing-1 dan Editing-2.

8. Setelah melihat Screenshot 1 dan 2 td. Lanjut ke Gemini_Status_bar_expanded.xml, disini kita akan belajar mulai dari Include, ImageView, FrameLayout, LinearLayout, dan lain2.

9. Lanjut ke tutor.xml tadi. Disini kita disuruh menambah script <include layout="@layout/nia_kta_layout" /> di Gemini_Status_bar_expanded.xml.

10. Lanjut ke Screenshot Editing-3 dan Editing-4.

11. Sampai disini kita save dan mulai ke tahap Recompile.

Tutor 3 : 
Recompile 

1. Buka Advance Apktool.exe dan ikuti tutor Screenshot Recompile-1 sampai Recompile-7

2. Setelah mengikuti tutor recompile, sekarang kita akan membuat Flashable.zip dari SystemUI.apk yg sudah diedit tadi.

3. Buka file Flashable.zip di folder Tutor UI/Flashable ZIP

4. Ikuti tutor Screenshot Flashable ZIP-1 sampai Flashable ZIP-7

 Tahap 4 : 
Disable Signature 

1. Buka hp ente dan download Lucky Patcher - http://luckypatcher.net/?scn=1

2. Install dan buka Lucky Patcher yang td sudah diinstal.

3. Klik Toolbox - Patch to Android - Ceklis Signature verification always true dan Disable .apk Signature verification.

4. Klik Apply

5. Jika ada popup klik ok atau yes.

6. Hp ente akan restart selama 2 kali, jadi jangan panik.

7. Setelah itu kita buka recovery (CWM/TWRP/PHILZ/CTR) Klik install from sdcard atau Install.

8. Cari dan pilih Flashable.zip yg tadi sudah kita masukan ke sdcard0 lewat adb tool tadi.

9. Setelah itu biarkan reboot atau jika blm reboot silahkan reboot manual.

10. Silahkan lihat statusbar expanded ente ada yang berubah atau tidak. Jika tidak maka ada salah penempatan.

Selamat ente berhasil melewati tahap paling dasar.
Ane bakal menjelaskan apa itu Include, FrameLayout, LinearLayout, ImageView.

Include :
<include layout="@layout/nia_kta_layout" />

Seperti yang dilihat diatas, Include disini adalah penambahan sebuah layout atau script.
@layout/nia_kta_layout ini adalah tempat dari bahan yang sudah dimerge tadi.
@layout adalah foldernya
nia_kta_layout adalah nama dari script xml tersebut.

FrameLayout dan LinearLayout :

<FrameLayout android:id="@id/toolBarSwitchPanel" android:background="@drawable/notification_header_bg" android:layout_width="fill_parent" android:layout_height="103.0dip">
            <include layout="@layout/toolbar_view" />
            <include layout="@layout/toolbar_indicator" />
            <include layout="@layout/toolbar_divider" />
        </FrameLayout>

Lihat script diatas. FrameLayout sama saja dengan LinearLayout, yang membedakan hanya widget yg diurutkan.
Linear layout adalah layout yang terstruktur. Linear layout akan meletakkan elemen yang ada di dalamnya secara berurutan tergantung orientationnya. 
Jika orientationnya vertical, maka peletakan elemen akan terurut kebawah.
Sedangkan jika orientationnya horizontal maka peletakan elemennya akan terurut ke samping.

Sedangkan FrameLayout adalah layout yang bertumpuk. FrameLayout akan menumpuk layout satu dengan yg lain.

ImageView :
<ImageView android:layout_height="50.0dip" android:layout_width="50.0dip" android:src="@drawable/gambar" />

Seperti namanya, ImageView menampilkan gambar dari folder Drawable.

ScrollView :
<ScrollView android:id="@id/scroll" android:fadingEdge="none" android:layout_width="fill_parent" android:layout_height="wrap_content" android:overScrollMode="ifContentScrolls">
    <com.android.systemui.statusbar.policy.NotificationRowLayout android:id="@id/latestItems" android:layout_width="fill_parent" android:layout_height="wrap_content" systemui:rowHeight="@dimen/notification_row_min_height" />
</ScrollView>

ScroolView adalah sebuah layout yang memungkinkan elemen discroll.

Mungkin hanya segitu dasar yang dapat saya sampaikan. Mungkin jika kurang dapat berkomentar atau kirim PM :v
Setelah tahap dasar ini ada tahap ke smali.
Mungkin saya akan langsung menjelaskan bagian editingnya, karna tahap decompile dan recompilenya sama saja. Yang membedakan hanya pengeditannya.
Oke selesai tahap dasar ini.
Mohon maaf jika ada salah kata atau kurang jelas
Wassalamualaikum Wr Wb.

Thx For M Rizki Ramadhan

Tweet

Artikel keren lainnya: