[TUT]Developing G3 TweaksBox Themes

Search This thread

dustinb17

Senior Member
Nov 6, 2007
929
872
Idaho
Hi everybody. recently we cannot change the layout of the Settings in tab view because this is a different app (LGEasySettings.apk).

Do you think we can help each other with sharing the necessary information (png, xml)?

The redesign of the swiches in the Settings menu in Android L style caused me a headache because the stock background has no on/off state. This is why in hello00-s CleanSetting mod the on switches have a shorter line. I solved this problem in the following way: the background line has been designed longer (full background reaching the on/of switches) and the off switch is not transparent but white in the middle.

2s66ik3.jpg


Currently I am struggling with the tinted status and navbar because my mods do not colorize them.

Furthermore I have problems with the framework item replacement of the status bar icons (contained by the framework-res.apk) they are not loaded. The reference has been put into the theme.xml, is it right?
You've already been able to accomplish more than i have, I can't even locate the lockscreen icon in settings. Am I missing something simple or is it located somewhere else, like lg-res, as well?
 

P_Toti

Senior Member
Jun 21, 2012
2,020
6,469
Here i am :
@Kickoff i am still working on your theme i will send you it back when i finish. Anyway to all if you want to change action/status bar color and have clean settings like in the screenshot below just add these

<Drawable name="ab_transparent_dark_holo" respackage="com.lge" replacement="colorDrawable:#FF07c5e0" />
<Drawable name="ab_solid_dark_holo" respackage="com.lge" replacement="colorDrawable:#FF07c5e0" />
<Drawable name="ab_solid_light_holo" respackage="com.lge" replacement="colorDrawable:#FF07c5e0" />
<Drawable name="list_divider_holo_light" respackage="com.lge" replacement="colorDrawable:#00000000" />
<Dimen name="divider_switch_width" replacement="0.0" />



@dustinb17 that png is named "ic_lockscreen_white"
 
  • Like
Reactions: ghostshel

P_Toti

Senior Member
Jun 21, 2012
2,020
6,469
I updated the theme engine again:

I added LGEasySettings.apk to the list of themable apps(See first post for all info)
Now InCallUI,TeleService,EasySettings are hidden options in G3 TWB: when you choose a theme for the phonebook app the same will be used as incallui and the teleservice theme. You can still select different themes enabling advanced options in G3 TWB.
Now the floating action bar can be themable too. There is no res to replace: if you theme the action bar the floating action bar will be themed too. @Ashrockr

 

19stephan77

Senior Member
Dec 24, 2012
163
18
Which Themes can I use at the moment for settiings,dialer, telephone without having any issues. For Quick Settings and Statusbar I use the Cobalt Theme. I use the new TB 1.3beta2.
 

brolic925t

Senior Member
Nov 20, 2011
1,744
673
Corona, NY
I updated the theme engine again:

I added LGEasySettings.apk to the list of themable apps(See first post for all info)
Now InCallUI,TeleService,EasySettings are hidden options in G3 TWB: when you choose a theme for the phonebook app the same will be used as incallui and the teleservice theme. You can still select different themes enabling advanced options in G3 TWB.
Now the floating action bar can be themable too. There is no res to replace: if you theme the action bar the floating action bar will be themed too. @Ashrockr


I love you

Sent from my LG-D851 using XDA Premium 4 mobile app
 

P_Toti

Senior Member
Jun 21, 2012
2,020
6,469
An user asked me how to change the settings headers: i took a look and found that you can't change them with the current G3 TWB so i updated the theme engine to make that possible. If you want to change headers you have in the main page you just have to add these lines:

<Color name="category_background" replacement="#FFFF0000" /> ----------> Background
<Color name="emphasis" replacement="#FF000000" /> --------------> TextColor



If you want to change the header you have in other screens you have to :

1)Create a folder named "layout" in the res folder of your theme
2)Unzip and copy the preference_category_holo.xml you can find attached to that folder
3)Add this to theme_settings.xml : <Layout respackage="com.lge" name="preference_category_holo" />
4)Changing color is quite easy: you just have to change the android:background and the android:textcolor attributes in the layout file.

Code:
<TextView android:textColor="#ff000000" 
          android:id="@android:id/title" 
          android:background="#ffff0000" 
          android:minHeight="24.0dip" 
          android:textAllCaps="true"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:textStyle="bold"
          android:paddingStart="12.0dip"
          android:paddingEnd="12.0dip"
          android:textSize="14.0dip"
  xmlns:android="http://schemas.android.com/apk/res/android" />

 

Attachments

  • preference_category_holo.zip
    461 bytes · Views: 23
Last edited:

P_Toti

Senior Member
Jun 21, 2012
2,020
6,469
@Kickoff asked me help about theming the easysettings app. He wanted to know how to change headers and tab so i took a look and found the solution.

If you want to theme headers just follow the guide on the post above here . At the moment it's not working because it will work since 1.3 RC only.

If you want to change tabs background just add this line to the xml:

<Drawable name="ab_stacked_solid_light_holo" respackage="com.lge" replacement="colorDrawable:#ff41484f" />

if you want to change text color you have to:

1)Create a folder named "color" in the res folder of your theme
2)Unzip and copy the tab_text_color.xml(attached to this post) to that folder
3)Open that file and change colors

Code:
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#ffff0000" />
    <item android:color="#ffffff00" />
</selector>

4)Add this line to the theme_easysettings.xml: <Color respackage="com.lge" name="tab_text_color" />

This also will work since G3 TWB 1.3 RC only because now you can change selector colors with a global color only,you can't change each state. See screenshot

 

Attachments

  • tab_text_color.zip
    318 bytes · Views: 23

Kickoff

Senior Member
Jun 1, 2007
1,933
3,591
Budapest
Today I had to realize that many icons in the settings.apk and the easysettings.apk have the same name. This is why I never get a clear settings layout if easysettings is also activated. Is there a way to differentiate between those icons or put them into separate folder? Could not be possible to sort the png-s to be replaced within the xxxhdpi folder into subfolders named after the relevant apk? I often loose the oversight bec of the huge number of files originating from different apk-s...
 

P_Toti

Senior Member
Jun 21, 2012
2,020
6,469
Today I had to realize that many icons in the settings.apk and the easysettings.apk have the same name. This is why I never get a clear settings layout if easysettings is also activated. Is there a way to differentiate between those icons or put them into separate folder? Could not be possible to sort the png-s to be replaced within the xxxhdpi folder into subfolders named after the relevant apk? I often loose the oversight bec of the huge number of files originating from different apk-s...
A solution to that would be naming with different names the easysettings icons and then specifying the replacement attribute for those icons. An example:

You have an icon named "lock.png" for both apps, rename the lock.png icon from the easysettings to lock_easy.png

And then add this line to the xml

<Drawable name="lock" replacement="lock_easy" />
 
Last edited:
  • Like
Reactions: I-IoLLoW

brolic925t

Senior Member
Nov 20, 2011
1,744
673
Corona, NY
Hey if i want to change the backround to incall ui contact picture which line would relate to that aswell as the button backround for like the mute, dialpad, speaker etc.. That white backround? And also if i want to change the font color of the buttons aswell?

Sent from my LG-D851 using XDA Premium 4 mobile app

---------- Post added at 04:54 PM ---------- Previous post was at 04:52 PM ----------

And also the font color where it says "hold" in the call

Sent from my LG-D851 using XDA Premium 4 mobile app

---------- Post added at 04:56 PM ---------- Previous post was at 04:54 PM ----------

Want to change them to black

Sent from my LG-D851 using XDA Premium 4 mobile app
 

Ashrockr

Senior Member
May 31, 2014
240
615
Delhi
Hey if i want to change the backround to incall ui contact picture which line would relate to that aswell as the button backround for like the mute, dialpad, speaker etc.. That white backround? And also if i want to change the font color of the buttons aswell?

Sent from my LG-D851 using XDA Premium 4 mobile app

---------- Post added at 04:54 PM ---------- Previous post was at 04:52 PM ----------

And also the font color where it says "hold" in the call

Sent from my LG-D851 using XDA Premium 4 mobile app

---------- Post added at 04:56 PM ---------- Previous post was at 04:54 PM ----------

Want to change them to black

Sent from my LG-D851 using XDA Premium 4 mobile app

Font Color of dialpad,speaker are in the color FOLDER.

Sent from my LG-D802 using Tapatalk
 

andrewjgreen

Senior Member
Feb 28, 2013
106
18
28
Sacramento
Apks

So where are apks? I'm sorry I'm such a boon. But the only way to learn is to ask questions and try to find answers on this type of stuff. If anyone can help or direct me to a guide that shows me where these apks listed on the first post are, that would be a big help. I really want to change my g3 using the g3 tweaksbox. I've done some stuff already but I want to add a UI Theme in the Theme Tweaks under Other UI Tweaks. Thanks a bunch of anyone is willing to help.
 

P_Toti

Senior Member
Jun 21, 2012
2,020
6,469
So where are apks? I'm sorry I'm such a boon. But the only way to learn is to ask questions and try to find answers on this type of stuff. If anyone can help or direct me to a guide that shows me where these apks listed on the first post are, that would be a big help. I really want to change my g3 using the g3 tweaksbox. I've done some stuff already but I want to add a UI Theme in the Theme Tweaks under Other UI Tweaks. Thanks a bunch of anyone is willing to help.

It's not clear. Do you want to install themes or create themes ? If you want to create themes the apks are in the priv-app or app folder of your system.
 
  • Like
Reactions: Kameirus

I-IoLLoW

Senior Member
Oct 1, 2013
1,243
1,547
Pittsburgh
As many of you know, in the new release of G3 TweaksBox i implemented a theme engine that allows users to develop their own themes.Creating themes is really simple:at the end of this post you can find a theme example i created with resources provided by @Kickoff and an empty theme template you can use to develop your own themes.

THANK YOU! I'm getting to work right away on this and @Kickoff - I never realized how time consuming this can be! I appreciate everything you have both done even more now. :)
 
  • Like
Reactions: Kickoff

Top Liked Posts

  • There are no posts matching your filters.
  • 27
    As many of you know, in the new release of G3 TweaksBox i implemented a theme engine that allows users to develop their own themes.Creating themes is really simple:at the end of this post you can find a theme example i created with resources provided by @Kickoff and an empty theme template you can use to develop your own themes.

    What can you theme ?
    SystemUI(see LGSystemUI.apk)
    LockScreen(see LGKeyguard.apk)
    Phonebook,InCallUI,TeleService(see LGContacts.apk,InCallUI.apk,LGTeleservice.apk)
    Message App(see LGMessage.apk)
    Settings(see LGSettings.apk and LGEasySettings.apk)
    More to come....

    1)Modify the package name:

    Open the MANIFEST(AndroidManifest.xml) and change the package name.

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="[COLOR="Red"][B]it.ptoti.systemui_theme.htc[/B][/COLOR]"
        android:versionCode="1"
        android:versionName="1.0" >
    
        <uses-sdk
            android:minSdkVersion="19"
            android:targetSdkVersion="19" />
    
        <application
            android:allowBackup="true"
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >
            <activity
                android:name="it.ptoti.systemui_theme.htc.MainActivity"
                android:label="@string/app_name">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN"/>
                    <action android:name="it.ptoti.g3_tweaksbox.systemui.THEME"/>
                    <!-- <action android:name="it.ptoti.g3_tweaksbox.settings.THEME"/> -->
                    <!-- <action android:name="it.ptoti.g3_tweaksbox.lockscreen.THEME"/> -->
                    <!-- <action android:name="it.ptoti.g3_tweaksbox.incallui.THEME"/> -->
                    <!-- <action android:name="it.ptoti.g3_tweaksbox.phonebookapp.THEME"/> -->
                    <!-- <action android:name="it.ptoti.g3_tweaksbox.messageapp.THEME"/> -->
                    <category android:name="android.intent.category.DEFAULT"/>
                </intent-filter>
            </activity>
        </application>
    </manifest>

    2)Change Theme Name:

    Open the strings.xml file(res/values/) and change the theme name

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="app_name">[COLOR="Red"]HTC Panel THEME<[/COLOR]/string>
    </resources>

    2-1)Add Intents in the Manifest File:

    Code:
    <action android:name="it.ptoti.g3_tweaksbox.systemui.THEME"/> [COLOR="Red"]for the LGSystemUI[/COLOR]
    <action android:name="it.ptoti.g3_tweaksbox.settings.THEME"/> [COLOR="red"] for the LGSettings[/COLOR]
    <action android:name="it.ptoti.g3_tweaksbox.easysettings.THEME"/> [COLOR="red"] for the LGEasySettings[/COLOR]
    <action android:name="it.ptoti.g3_tweaksbox.lockscreen.THEME"/> [COLOR="red"]for LGKeyGuard[/COLOR]
    <action android:name="it.ptoti.g3_tweaksbox.incallui.THEME"/> [COLOR="red"] for InCallUi[/COLOR]
    <action android:name="it.ptoti.g3_tweaksbox.teleservice.THEME"/> [COLOR="red"] for TeleService[/COLOR]
    <action android:name="it.ptoti.g3_tweaksbox.phonebookapp.THEME"/>  [COLOR="red"]for LGContacts[/COLOR]
    <action android:name="it.ptoti.g3_tweaksbox.messageapp.THEME"/>  [COLOR="red"]for LGMessage[/COLOR]

    Manifest example : Here you can see a manifest example of theme for SystemUI and Settings only

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="it.ptoti.systemui_theme.template"
        android:versionCode="1"
        android:versionName="1.0" >
        <uses-sdk
            android:minSdkVersion="19"
            android:targetSdkVersion="19" />
    
        <application
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >
            <activity
                android:name="it.ptoti.systemui_theme.htc.MainActivity"
                android:label="@string/app_name">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN"/>
    [COLOR="red"][SIZE="3"]                <action android:name="it.ptoti.g3_tweaksbox.systemui.THEME"/>
                    <action android:name="it.ptoti.g3_tweaksbox.settings.THEME"/>[/SIZE][/COLOR]
                    <category android:name="android.intent.category.DEFAULT"/>
                </intent-filter>
            </activity>
        </application>
    </manifest>

    3)REPLACING RESOURCES:

    REPLACING QUICKSETTINGS' ICONS AND ANIMATIONS:

    You just have to put your modified resources in the relative folders. Drawables MUST have the same name they have in the SystemUI package: if G3 TWB finds them it replaces the original resources with the themes' ones.

    Also,you have to add these lines to the theme.xml you can find in the xml folder

    <Drawable name="indi_noti_rearrange_normal" />
    <Drawable name="indi_noti_rearrange_pressed" />
    <Drawable name="quicksetting_button_edit_bg" />


    REPLACE OTHER RESOURCES:

    Other resources MUST be ALSO defined in the relative xml file you can find in the xml folder:

    theme.xml -----------------> For the SystemUI
    theme_contacts.xml -------------> For LGContacts.apk
    theme_incallui.xml ---------------> For InCallUI.apk
    theme_lockscreen.xml -----------> For LGKeyGuard.apk
    theme_messageapp --------------> For LGMessage.apk
    theme_settings.xml ---------------> For LGSettings.apk
    theme_teleservice.xml------------------> For LGTeleService.apk
    theme_easysettings.xml---------------> For LGEasySettings.apk


    Let's take a look to an example.

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <G3_TweaksBox_SystemUI_Theme version="1">
        <Drawable name="ic_brightness_auto_check"/>
        <Drawable name="ic_launcher_settings" />
        <Drawable name="scrubber_primary_holo" />
        <Drawable name="ic_notify_settings_set" />
        <Drawable name="indi_noti_btn_vol_set" />
        <Drawable name="ic_notify_quicksetting_brightness_panel" />
        <Drawable name="ic_notify_quicksetting_ringtone" />
        <Drawable name="indi_noti_btn_clear" />
        <Color name="np_clock" replacement="#FF00FF00"/>
        <Color name="bg_expanded" replacement="#FF000000" />
    </G3_TweaksBox_SystemUI_Theme>

    To replace a drawable the syntax is:

    Code:
    <Drawable name="name_of_original_drawable" replacement="name_of_the_drawable_in_your_theme" / >

    The replacement attribute is optional: if you name the drawable as the original one in the SystemUI you can omit it.

    You can also replace a Drawable with a color with the following syntax:

    Code:
    <Drawable name="name_of_original_drawable" replacement="colorDrawable:#AARRGGBB" / >

    Where AARRGGBB is the color code in the ARGB format(but you can use also RGB format)

    To replace a color the syntax is the following:

    Code:
    <Color name="name_of_original_color" replacement="#AARRGGBB" />

    If you want to replace a drawable(or a color) which is actually in the framework-res you can use the same syntax but you have to add the packageRes attribute, example :

    Code:
    <Drawable respackage="com.lge" name="switch_thumb_activated_holo_light"/>

    To replace a dimension the syntax is the following:

    Code:
    <Dimen name="name_of_original_dimension" replacement="20.0" />

    The replacement must be a dip value not a px one.

    To replace an integer the syntax is the following:

    Code:
    <Integer name="name_of_original_integer" replacement="20" />

    To assign a backgound(Drawable or Color) to any layout the syntax is the following :

    Code:
    <LayoutBackground name="layout_name" background="name_of_the_drawable" />

    To assign a background(Drawable or Color) to any child layout the syntax is the following :

    Code:
    <LayoutBackground name="master_layout_name" child="child_layout_name" background="name_of_the_drawable" />

    That's all,remember to sign the theme before trying to install it. The TUT will be updated when new features are added to the theme engine.
    8
    Pre release sent to themers and TUT and templates updated.
    8
    New theme engine is almost done:

    Now you can theme more apps
    Now you can set any background on any layout: it's useful to set a background on a layout which does not have it or on a layout which has a color as background(like the notification panel)
    I'm also thinking to give themers the ability to theme anything in the framework.

    If you would like to see new other features, just ask for it. The new version of G3 TWB is scheduled to be released on the second half of September but i can send to all themers a pre release the next week if you want it. Let me known about that.

    Here some screenshots(i used res from CM Cobalt theme by @dustinb17 to test the new engine)

    7
    I updated the theme engine with some changes that will be available with the beta i'm going to release the next week:

    Now you can add/replace the background to any child layout/view (see tut for other info)
    Now you can replace framework resources: resources are not replaced globally but per app. To replace framework res you just have to add the "respackage" attr with the framework name("android" for the android framework "com.lge" for the lg framework). Let's see an example

    If you want to replace the switch on the settings app:
    Code:
    <Drawable respackage="com.lge" name="switch_bg_disabled_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_bg_disabled_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_bg_disabled_holo_light"/>
    <Drawable respackage="com.lge" name="switch_bg_disabled_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_bg_focused_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_bg_focused_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_bg_focused_holo_light"/>
    <Drawable respackage="com.lge" name="switch_bg_focused_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_bg_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_bg_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_bg_holo_light"/>
    <Drawable respackage="com.lge" name="switch_bg_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_disabled_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_disabled_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_disabled_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_disabled_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_focused_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_focused_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_focused_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_focused_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_pressed_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_pressed_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_pressed_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_activated_pressed_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_disabled_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_disabled_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_disabled_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_disabled_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_focused_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_focused_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_focused_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_focused_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_holo_light_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_pressed_holo_dark"/>
    <Drawable respackage="com.lge" name="switch_thumb_pressed_holo_dark_latin"/>
    <Drawable respackage="com.lge" name="switch_thumb_pressed_holo_light"/>
    <Drawable respackage="com.lge" name="switch_thumb_pressed_holo_light_latin"/>

    I have also attached in the first post a simple windows app which creates a theme xml from the drawable folder. It will help to save some time.
    7
    An user asked me how to change the settings headers: i took a look and found that you can't change them with the current G3 TWB so i updated the theme engine to make that possible. If you want to change headers you have in the main page you just have to add these lines:

    <Color name="category_background" replacement="#FFFF0000" /> ----------> Background
    <Color name="emphasis" replacement="#FF000000" /> --------------> TextColor



    If you want to change the header you have in other screens you have to :

    1)Create a folder named "layout" in the res folder of your theme
    2)Unzip and copy the preference_category_holo.xml you can find attached to that folder
    3)Add this to theme_settings.xml : <Layout respackage="com.lge" name="preference_category_holo" />
    4)Changing color is quite easy: you just have to change the android:background and the android:textcolor attributes in the layout file.

    Code:
    <TextView android:textColor="#ff000000" 
              android:id="@android:id/title" 
              android:background="#ffff0000" 
              android:minHeight="24.0dip" 
              android:textAllCaps="true"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:gravity="center_vertical"
              android:textStyle="bold"
              android:paddingStart="12.0dip"
              android:paddingEnd="12.0dip"
              android:textSize="14.0dip"
      xmlns:android="http://schemas.android.com/apk/res/android" />

Our Apps
Get our official app!
The best way to access XDA on your phone
Nav Gestures
Add swipe gestures to any Android
One Handed Mode
Eases uses one hand with your phone