(Part III) Settings ala CM12 - Dual Layer Background Side Padding

"seri tutorial Settings ala Lollipop cm12 ini yang kali ini sudah masuk ke Part III yaitu membahas Mengubah background holo dan child dual layers"

YZG 07 October 2 Comment

Catatandroid - How to Mod your Settings.apk - Tutorial Cara Membuat tampilan Settings ala Lollipop CM12 Theme, Alhamdulillah masih bisa bertemu kembali dan terima kasih sobat catatandroid masih menyimak seri tutorial Settings ala Lollipop cm12 ini yang kali ini sudah masuk ke Part III yaitu membahas Mengubah background holo dan child dual layers serta side padding agar lebih menyerupai cm12 Theme.

Screenshot contoh hasil tampilan Settings Lollipop Cm12 Theme

Pada tutorial kali ini sobat catatandroid sebelumnya harus telah melewati part I dan part II terlebih dahulu karena beberapa value dan atribut yang akan kita bahas ini melanjutkan dari seri-seri sebelumnya.
Oke kali ini ga usah banyak basa-basi mengingat mata sudah mulai sepet dan jarum menunjukkan pukul 03.10 dini hari, maaf ya sobat kalau ada salah pengetikan atau kata tolong di koreksi.

Persiapan
- Mengerti cara decompile recompile apk
- System telah Disable signature
- Melewati Part I dan Part II
- Settings.apk
- framework-res.apk

Langkah-langkah
- Decompile Settings.apk sobat yang sebelumnya telah berhasil melewati tutorial part II
- masuk folder res\drawable\
- buat 2 file xml baru dengan nama duawarna_yanu_cover.xml dan duawarna_yanu_cover_anak.xml
- isi duawarna_yanu_cover.xml dengan script di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:height="9.0dip">
        <shape android:shape="rectangle"
          xmlns:android="https://schemas.android.com/apk/res/android">
            <solid android:color="@color/teal_yanu" />
        </shape>
    </item>
    <item android:top="133.0dip">
        <shape android:shape="rectangle"
          xmlns:android="https://schemas.android.com/apk/res/android">
            <solid android:color="@color/dark_yanu" />
        </shape>
    </item>
</layer-list>

- isi duawarna_yanu_cover_anak.xml dengan script di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:height="9.0dip">
        <shape android:shape="rectangle"
          xmlns:android="https://schemas.android.com/apk/res/android">
            <solid android:color="@*android:color/teal_yanu" />
        </shape>
    </item>
    <item android:top="73.0dip">
        <shape android:shape="rectangle"
          xmlns:android="https://schemas.android.com/apk/res/android">
            <solid android:color="@*android:color/dark_yanu" />
        </shape>
    </item>
</layer-list>

- jangan lupa save
- lanjut masuk folder \res\values\
- buka styles.xml dan tambahkan script di bawah ini sesuai tambahan dari part II(name="Mole.Theme")
    <style name="Mole.Theme" parent="@*android:style/Theme.Holo">
        ....
        ....
        <item name="android:windowBackground">@drawable/duawarna_yanu_cover</item>
    </style>
    <style name="Mole.Theme.Anak" parent="@*android:style/Theme.Holo">
        <item name="android:windowBackground">@drawable/duawarna_yanu_cover_anak</item>
        <item name="android:listSeparatorTextViewStyle">@style/Mole.ListSeparator</item>
    </style>

- lanjut buka colors.xml
- tambahkan dua value warna di bawah ini
    <color name="dark_yanu">#ff111111</color>
    <color name="teal_yanu">#ff00695c</color>
</resources>

- save
- kali ini beralih ke AndroidManifest.xml
- samakan bagian android:theme seperti di bawah ini
    <application android:theme="@style/Mole.Theme.Anak" android:label="@string/settings_label" android:icon="@mipmap/ic_launcher_settings" android:taskAffinity="" android:hardwareAccelerated="true" android:uiOptions="splitActionBarWhenNarrow" android:supportsRtl="true">
        <activity android:theme="@style/Mole.Theme" android:label="@string/settings_label_launcher" android:name="Settings" android:taskAffinity="com.android.settings" android:launchMode="singleTask" android:configChanges="mcc|mnc|keyboardHidden|screenSize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <action android:name="android.settings.SETTINGS" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:theme="@style/Mole.Theme.Anak" android:name=".SubSettings" android:taskAffinity="com.android.settings" android:configChanges="mcc|mnc|keyboardHidden|orientation|screenSize" android:parentActivityName="Settings" />

- save
- recompile - sign

- bagian Settings telah selesai
- kali ini decompile framework-res.apk
- masuk folder \res\values\
- buka dimens.xml
- cari dan ubah 2 value sesuai di bawah ini
    <dimen name="preference_fragment_padding_side">9.0dip</dimen>
    <dimen name="preference_screen_header_padding_side">9.0dip</dimen>

jika sobat ingin menghilangkan jarak tepi agar efek float hilang dan jadi terlihat mepet maka ubah menjadi 0dp atau 0.0dip

- save - recompile - sign
- Terakhir push kedua file Settings.apk dan framework-res.apk hasil mod di atas ke tempatnya masing-masing
- Reboot dan Selesai

Jika berhasil maka akan terlihat seperti ss di awal artikel ini

Lalu apa perbedaan dan progress yang kita buat agar menyerupai settings lollipop?
Tutorial Settings yang kita lalui pada ketiga seri ini adalah persoalan detail agar "sedikit" menyerupai tampilan lollipop pada unsur layout dan sedikit warna. Sobat bisa perhatikan padding/jarak sisi-sisi icon sejajar dengan jarak Kategori dari tepi kiri, serta jarak melingkar icon sama besar sehingga menyerupai settings lollipop, serta background dua warna dan efek kotak/float sehingga menyerupai tema cm12. Catatandroid sengaja tidak ikut menambahkan jarak kiri pada title menu settings karena jarak yang sekarang dirasa lebih estetis di banding jarak asli lollipop yang terlalu lebar, sobat bisa mengatur sendiri warna dan jarak dari value-value yang telah kita ubah pada semua eri tutorial ini.

Mungkin seri ini cukup sampai di sini, sisa detailnya seperti icon icon menu settings, icon divider, dan lainnya maaf catatandroid tidak dapat berikan karena keterbatasan resource, mungkin sobat dapat "nyomot" icon-icon image pelengkap tersebut pada rom-rom yang bertema lollipop. kalau ketemu jangan lupa upload dan bisikin linknya ke admin ya. :D

Mohon maaf jika banyak yang kelewat dan hanya segini tutorialnya karena keterbatasan ilmu nubie dan menulis artikel ini pun hasil iseng-iseng nubie yang bermodal hanya memahami sedikit xml. Semoga dapat bermanfaat bagi yang sedang mencari tutorial How to Mod your Settings.apk ubah settings ala lollipop cm12 maupun yang memang belajar edit settings. Terima kasih
Catatandroid