Theming Your Lockscreen
Have you ever thought of having your own themed Lockscreen?
With this guide you can have your own themed Lockscreen…This guide doesn’t teach you about decompiling/compiling apk’s or jar files as there are a lot of guides for decompiling apk’s on XDA.
Understanding Your Lockscreen :
The codes that make your Lockscreen work or control your Lockscreen are present in android.policy.jar but we are not going to touch it.
The xml’s and png’s that take care of the look of the Lockscreen are present in lidroid-res.apk* in Custom Roms and framework-res.apk in Stock Roms. These are the files that we are going to edit to theme our Lockscreen.
The xml’s are present in res/layout while the png’s are present in both drawable-hdpi and drawable-ldpi.
* In custom roms, the name may vary. For example, in Hyperion Rom it’s hyperion-res.apk and in Creed its creed-res.apk.
Theming Your Lockscreen:
A list is given below which shows the files that you need to edit to theme that corresponding Lockscreen:
Note :
> I did not include .9.png’s in the list.
> I will add Samsung lockscreen later.
Sliding Tab Lockscreen :
XML’s
keyguard_screen_tab_unlock.xml
keyguard_screen_tab_unlock_land.xml
PNG’s
In drawable-hdpi:
ic_jog_dial_unlock.png
ic_jog_dial_sound_off.png
ic_jog_dial_sound_on.png
ic_jog_dial_vibrate_on.png
jog_tab_target_gray.png
jog_tab_target_green.png
jog_tab_target_yellow.png
In drawable-ldpi:
jog_tab_left_confirm_gray.png
jog_tab_left_confirm_green.png
jog_tab_left_confirm_red.png
jog_tab_left_confirm_yellow.png
jog_tab_left_normal.png
jog_tab_left_pressed.png
jog_tab_right_confirm_gray.png
jog_tab_right_confirm_green.png
jog_tab_right_confirm_red.png
jog_tab_right_confirm_yellow.png
jog_tab_right_normal.png
jog_tab_right_pressed.png
Lense Lockscreen :
PNG’s
In drawable-hdpi:
lense_square_bg.png
Rotary Lockscreen :
XML’s
keyguard_screen_tab_unlock.xml
keyguard_screen_tab_unlock_land.xml
PNG’s
In drawable-hdpi:
jog_dial_bg.png
jog_dial_dimple.png
jog_dial_dimple_dim.png
jog_dial_dimple_dim_rev.png
jog_dial_arrow_long_left_green.png
jog_dial_arrow_long_right_red.png
Rotary Revamped :
XML’s
keyguard_screen_tab_unlock.xml
keyguard_screen_tab_unlock_land.xml
PNG’s
In drawable-hdpi:
jog_dial_bg_rev.png
jog_dial_bg_rev_down.png
jog_dial_dimple.png
jog_dial_dimple_dim_rev.png
jog_dial_dimple_rev.png
Ring Lockscreen :
XML’s
keyguard_screen_tab_unlock.xml
keyguard_screen_tab_unlock_land.xml
PNG’s
In drawable-ldpi:
jog_ring_ring_normal.png
jog_ring_ring_pressed_gray.png
jog_ring_ring_pressed_green.png
jog_ring_ring_pressed_red.png
jog_ring_ring_pressed_yellow.png
jog_ring_secback_normal.png
Editing PNG's and XML's
Editing PNG’s:
Note :
PNG - Portable Network Graphic
Editing png’s is very important in Theming because the png which you edited will be showed in the lockscreen. I recommend you to use Adobe Photoshop, Gimp or Paint.net to edit png’s..
Note : If want to hide a png, don’t delete it. Just make it transparent or you will face compiling problems.
Editing XML’s:
XMLs control many functions in Android. We will change binary XML into a readable XML file to make our edits, which will usually result in layout of the lockscreen. So to edit an xml, we need to decompile it using apktool.
In a lockscreen, hex codes are used to give the text a color. You can use hex codes to change the color of Clock / Date / Carrier Text / Custom Text.
You should be really careful while editing xml’s. They can cause apk compiling errors. I recommend you to use Notepad++ for editing xml’s.
Note :
dip - Density-independent Pixels
dp - Density-independent Pixels
sp - Scale-independent pixels
I have given below some codes/lines that you normally need to edit in order theme your lockscreen.
Note : "object" refers to the object where you found the line.
android:background="@drawable/x"
This will set the png named x as the background of the lockscreen.
android:id="@id/x"
I don't know!
android:layout_below="@id/time"
This will bring the object below the time.
android:text="@string/x"
This will display the string x as a text in the lockscreen.
android:background="#ff000000"
This will set this hex code color as the background of the lockscreen.
android:textColor="#ddff00"
This will change the color of the object.
android:shadowColor="#c0000000"
The color of the shadow that should be displayed near the object.
android:layout_width="wrap_content"
The width of the object will display big enough to enclose its content only.
android:layout_width="fill_parent"
The width of the object will display as big as its parent, and fill in the remaining spaces.
android:layout_height="wrap_content"
The height of the object will display big enough to enclose its content only.
android:layout_height="fill_parent"
The height of the object will display as big as its parent, and fill in the remaining spaces.
android:gravity="center"
The position where the object should be placed. It can be either left / center / right.
android:singleLine="true"
Force the text to a single horizontal line instead of letting it wrap onto multiple lines.
android:textAppearance="?android:textAppearanceMedium"
Appearance of the text will be Medium.
android:textAppearance="?android:textAppearanceSmall"
Appearance of the text will be Small.
android:layout_marginLeft="x.xdip"
Specifies extra space on the left side of this view.
android:layout_marginRight="x.xdip"
Specifies extra space on the right side of this view.
android:layout_marginTop="x.xdip"
Specifies extra space on the top side of this view.
android:layout_marginBottom="x.xdip"
Specifies extra space on the bottom side of this view.
android:textSize="x.xsp"
The size of the text. It can be any text (clock / date / carrier text / custom text)
Lockscreen Modz
RESERVED FOR MODz...
One of the best guide ever
san122 said:
One of the best guide ever
Click to expand...
Click to collapse
Thanks
Regards,
Ganesh
WIIL TRY to mod my lockscreen
Ganesh A said:
Thanks
Regards,
Ganesh
Click to expand...
Click to collapse
Thanks to u for this useful post
Sent from my GT-S5360 using Tapatalk 2
Shane said:
WIIL TRY to mod my lockscreen
Click to expand...
Click to collapse
All the best...
Regards,
Ganesh
Nice...
-Feel Like A Sir-
???
---- by ----
Ganesh,
R.C. @ XDA
Nice guide sir
Thank u
Keep updating
Bro, thanks for the guide..
Will Try,,
Afrizal Firmansyah said:
Bro, thanks for the guide..
Will Try,,
Click to expand...
Click to collapse
Go on...
Sent from my GT-S5360 using Tapatalk 2
I want to modify the lense lockscreen. As in, the color of clock and the distance of clock and the pull down slider.
I don't see any layout files for it, any idea where to modify it in smalis?
good job :fingers-crossed:
its an really awesome guide..
u have given me a great idea m also going to make a guide on " how to get ics style notification on gingerbread"
Related
Hello ...
I've been searching a lot and didn't found where I can modify the date color (the one that appears when pull down status bar), the notifications color (also when pull down status bar), and the icon label color. See attached files.
I've been searching in framework-res, twframework-res, policies.jar and services.jar and also in LauncherPro.apk: there are related stuff but nothing moves ... It's a mess, some resources are defined in more than 1 file so we don't know which is the good one !
Nothing very important but ... if someone knows I would apeciate as I don't like white neither green colors on phone
Thanks !!
sambastrakan said:
Hello ...
I've been searching a lot and didn't found where I can modify the date color (the one that appears when pull down status bar), the notifications color (also when pull down status bar), and the icon label color. See attached files.
I've been searching in framework-res, twframework-res, policies.jar and services.jar : there are related stuff but nothing moves ... It's a mess, some resources are defined in more than 1 file so we don't know which is the good one !
Nothing very important but ... if someone knows I would apeciate as I don't like white neither green colors on phone
Thanks !!
Click to expand...
Click to collapse
I am not sure, but you can try this:
1) unpack the twframework-res.apk/framework-res.apk...unpack not extract, so that you get readable xml files,
2) In those files, there are options to change color most probably...
dharamg3 said:
I am not sure, but you can try this:
1) unpack the twframework-res.apk/framework-res.apk...unpack not extract, so that you get readable xml files,
2) In those files, there are options to change color most probably...
Click to expand...
Click to collapse
yes, I already search in these files and made some modds for others colors aspects. I'm using a tool to decompile/recompile/build which work well. But ... no effects on the notifications area and I didn't found where is the resource for icon label color ...
if u decompiled the framework-res.apk and twframework-res.apk look into res/values/styles.xml and res/colour folder most of the font colours are placed there....... alternately u can try assigning the colours in res/values/colour.xml and see if it helps....
deadwood01 said:
if u decompiled the framework-res.apk and twframework-res.apk look into res/values/styles.xml and res/colour folder most of the font colours are placed there....... alternately u can try assigning the colours in res/values/colour.xml and see if it helps....
Click to expand...
Click to collapse
Thanks for theses ideas, I did it for pulldown status. But, nothing for the icon label color ... Just found the icon menu label.
thanks again.
I am currently using XWKT7 Adrenaline ROM by Imbawind with ICS Modded, and I am learning (newb) how to theme based on several tuts by Stericsson and other well known devs.
Apparently, with ICS modded the status bar is transparent, something like this:
-attachment 1-
G]httpBut whenever the status bar is expanded where the Date appears as well, it overlaps the previous transparent status bar into something like this:
-attachment 2-
Notice the DateView background overlaps the transparent status bar? So I searched around the forums and all I get was status bar transparency. (Note: I only have slight HTML/XHTML coding experience)
So based on my experience, this sort of overlap thing often associates with inline elements overriding CSS a.k.a style sheets in HTML....
So when I check on the statusbar.xml:
-attachment 3-
I'd noticed there is an background inline element for DateView
Since the img src is same, it wouldn't possible for them to overwrite each other, can any kind soul enlighten me where to look for the section to edit for that DateView background?
-I only found guides teaching how to change the text color, but not the DateView overlap background-
use android kitchen else decompile and xml.
Put dateview also in centre
Then it might be solved ?
unwritten sentance
Thanks for the prompt reply.
nishantmnit said:
use android kitchen else decompile and xml.
Click to expand...
Click to collapse
I used apktool to decompile and study the .xml codes
spacecaker said:
Put dateview also in centre
Then it might be solved ?
unwritten sentance
Click to expand...
Click to collapse
It would actually be best if I can make them stay at the same position and solve the bg issue, either way thanks for ur suggestion, I'll try it as soon as I head home.
Sent from my GT-S5830 using XDA
hello,
why my galaxy s3 status bar icons like clock,operator signals and wifi signals are always remain some grey/dim these are not bright white ?
can i change them to white?
AW: [Q]notification/taskbar dim icons.
fktiwana said:
hello,
why my galaxy s3 status bar icons like clock,operator signals and wifi signals are always remain some grey/dim these are not bright white ?
can i change them to white?
Click to expand...
Click to collapse
Yeah, they are normally grey at StockROM. If you want to have the normal statusbar, like on the Nexus, I can advise you CyanogenMod, ParanoidAndroid or SuperNexus. These are CustomROMs and built by the Source Code of Google, that means that these CustomROMs have nothing to do with Samsung.
When you want to stay at StockROM (Samsung's preinstalled ROM/Firmware) I can advise you to root your phone, flash Philz Recovery and cook your SystemUI.apk, framework-res.apk and TouchWizUI.apk on UOT-Kitchen (the description is on the mainsite)... UOT Kitchen is a site where you can replace some elements of the design.
Your warranty will be lost at both things!
BACKUP THESE APKs BEFORE APPLYING THAT! WHEN YOU DON'T BACKUP THESE FILES YOU MUST REFLASH YOUR STOCKROM TO GET THE NORMAL DESIGN BACK!!!
Click here to enter the UOT-Kitchen:uot.dakra.lt
Greetings...
Sent from my GT-I9300 using xda app-developers app
my galaxy s3 android version is jelly bean 4.1.2 so can i expect that color of clock,operator n wifi signals will be changed to bright white in next update like 4.2?
fktiwana said:
my galaxy s3 android version is jelly bean 4.1.2 so can i expect that color of clock,operator n wifi signals will be changed in next update like 4.2?
Click to expand...
Click to collapse
nope
is there any change in s4 status bar clolor icons?
fktiwana said:
is there any change in s4 status bar clolor icons?
Click to expand...
Click to collapse
nope
Status bar autodimming solution
Hi, guys!
The solution is simple:
Decompile SystemUI.apk
Navigate to res/values/dimens.xml
You'll find a dimen item called status_bar_icon_drawing_alpha
In Samsung roms you'll also have tw_status_bar_icon_drawing_alpha
The value is given in percentages. Android dims the icons by setting their transparency (usually to 65%, Samsung - to 50%)
Increase the number and the dimming will go away.
Note that increasing it to 100% will make them a tad too bright. Use 100% only if using translucent status bar with bright BG.
Recompile and Enjoy
Where is this defined for SCH-I535?
daxgirl said:
Hi, guys!
The solution is simple:
Decompile SystemUI.apk
Navigate to res/values/dimens.xml
You'll find a dimen item called status_bar_icon_drawing_alpha
In Samsung roms you'll also have tw_status_bar_icon_drawing_alpha
The value is given in percentages. Android dims the icons by setting their transparency (usually to 65%, Samsung - to 50%)
Increase the number and the dimming will go away.
Note that increasing it to 100% will make them a tad too bright. Use 100% only if using translucent status bar with bright BG.
Recompile and Enjoy
Click to expand...
Click to collapse
Hi, can you advise the location of this xml in the Verizon S3 SystemUI.apk? Or if it's an entirely different setting outside of the apk? I can't find the path you mentioned. Thanks.
Did you decompile it? How much of the path did you follow?
Sent from my GT-I9300 using Tapatalk 4
I don't see \values in the \res folder. Here's what mine looks like inside of \res:
anim
color
drawable
drawable-hdpi
drawable-sw360dp-xhdpi
drawable-sw600dp
drawable-sw600dp-xhdpi
drawable-sw720dp-xhdpi
drawable-sw800dp-xhdpi
drawable-xhdpi
layout
layout-land
layout-port
layout-sw600dp
layout-sw720dp
layout-sw800dp
menu
raw
xml
drawable does seem to contain the status bar xml's but none that look like they control the icon transparency. Any ideas? I'm on a custom ROM, but it is based on stock TW ROM, if that helps.
The folder is res > values then the file called dimens.xml
They are around row 25 but if you don't see the values folder then you haven't decompiled the apk, are you sure you know what to do
Haha, well I was "cheating" by using Root Explorer to extract, expecting to mod then zip and change .zip extension to .apk. If I need to properly decompile to see the dimens.xml, I'll use APKTool on the PC. Thanks.
Brianakin said:
Haha, well I was "cheating" by using Root Explorer to extract, expecting to mod then zip and change .zip extension to .apk. If I need to properly decompile to see the dimens.xml, I'll use APKTool on the PC. Thanks.
Click to expand...
Click to collapse
That'll only work with images really.
rootSU said:
That'll only work with images really.
Click to expand...
Click to collapse
Hmm, well I finally got around to doing this the right way with apktool (loaded both framework-res.apk and twframework-res.apk, decompiled, changed the status_bar_icon_drawing_alpha and tw_status_bar_icon_drawing_alpha values, then re-compiled), then copied the entire res folder and resources.arsc file from my modded apk back to the original using 7-zip, then pushed back to my phone. Still no change in shade of status bar icons. What could I be doing wrong?
Is it the status bar icons or the clock colour or both you want to change
ag4751 said:
Is it the status bar icons or the clock colour or both you want to change
Click to expand...
Click to collapse
It's the status bar icons, but I finally got this! The part of the guide talking about opening 7zip and dragging changed folders to the original apk structure wasn't working between 7zip windows because the RES folder wasn't overwriting the existing RES folder so it was failing and not telling me. Once I deleted the resources.arsc file and the RES folder from the original apk in 7Zip I could then drag those over. Closed it, pushed it rebooted and finally saw brighter icons on the left side! Many thanks to this forum, all the contributors, and of course all the developers that make all this cool stuff possible! Now on to deciphering the location of all my right side icons and replacing them with brighter versions to match.
Brianakin said:
It's the status bar icons, but I finally got this!
Now on to deciphering the location of all my right side icons and replacing them with brighter versions to match.
Click to expand...
Click to collapse
Look in the SystemUI.apk\res\drawable-xhdpi folder also the clock colour is in the SystemUI.apk\res\layout folder and the tw_status_bar.xml file on this row, changing the colour highlighted in red will change the clock colour, this as you probably know is white yours will probably be #ffa6a6a6 this is a mid to light grey,leave the initial #ff just change the last 6
<com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#ffffffff" android:
ag4751 said:
Look in the SystemUI.apk\res\drawable-xhdpi folder also the clock colour is in the SystemUI.apk\res\layout folder and the tw_status_bar.xml file on this row, changing the colour highlighted in red will change the clock colour, this as you probably know is white yours will probably be #ffa6a6a6 this is a mid to light grey,leave the initial #ff just change the last 6
<com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#ffffffff" android:
Click to expand...
Click to collapse
Great stuff! Actually I can customize the battery icon and clock color through my ROM settings, but not the wi-fi/data/signal and ringer icons. I have to go to the drawable-xhdpi folder for that, but at least it doesn't require a full decompile/recompile to change out the .png's. Thanks for all the help!
I want to edit the icon of my status bar and I have three questions about this:
First: I have to edit the SystemUI.apk or the Framework-res.apk? (because in systemui i dont have battery icons, but yes wifi and etc); And in framework-res i have all the statusbar icons.
Second: I have to edit the .png images with patch 9.png or something?
Third: All the images to replace have to be exactly the same size of pixel? or 2 or 3 pixel more high or width doesnt matters?
If you can help me i will be really gratefull.
Sorry for my english
Yes they have to be the same size. There are no .9 pngs for the icons. And yes you have to edit them both
Wayne Tech Nexus
Hi everyone, hope i am posting this in
the right section..
Guys, my phone is Samsung Galaxy
Mini which is a ldpi device which now
runs on an ICS rom. I am trying to
change the color for the brightness
sliders and volume sliders.
Which .xml need to be edited to
change the colour..
I decompiled framework-res.apk and
changed hex color values under @id/
progress and @id/secondary progress
in "progress_horizontal.xml", also
changed colors of few pngs in
drawable-mdpi in framework,now the
progress seek bar has changed the
color,but brightness slider color
remains the same.
I then decompiled systemui.apk and
changed the hex color values under
@id/progress in
"adi_seekbar.xml",but nothing got
changed..
Can anyone help me? Which .xml is
associated with the seek bar for
brightness and volume slider? Or
should i deal with smali files to
change the color of brighntness slider
and volume slider..
If that brightness slider you're talking about is in status bar, then look for it's pngs in /res/drawable/ or any drawable folder
iamareebjamal said:
If that brightness slider you're talking about is in status bar, then look for it's pngs in /res/drawable/ or any drawable folder
Click to expand...
Click to collapse
Please see the ss.. need to change the color of brightness slider in the notification drawer.. tried theming all the png's which was mentioned on progress_xx.xml,only the progress bar got changed.. color of the brightness slider is still the same..
This is the ss of volume slider.. this and the brightness slider are the ones i am trying to theme..
Rajesh_m said:
Please see the ss.. need to change the color of brightness slider in the notification drawer.. tried theming all the png's which was mentioned on progress_xx.xml,only the progress bar got changed.. color of the brightness slider is still the same..
Click to expand...
Click to collapse
Check the pngs in SystemUI.apk
iamareebjamal said:
Check the pngs in SystemUI.apk
Click to expand...
Click to collapse
"ic_sysbar_highlight.png" ... will this be the png associated with it? I left to theme this as i thought this wont be the one..
Edit: the above mentioned png is associated with mid_navigation_bar.xml... so no luck with png's
On CM9 and CM10 is quickpanel_brightness_bg.png for the bar and quickpanel_brightness_icon.png for the icon between the bar
davidebeatrici said:
On CM9 and CM10 is quickpanel_brightness_bg.png for the bar and quickpanel_brightness_icon.png for the icon between the bar
Click to expand...
Click to collapse
Thanks for the reply So Quickpanel_brightness_bg changes the slider color or the background color?
Slider I think; background seems to be something like quickpanel_brightness_background.png
davidebeatrici said:
Slider I think; background seems to be something like quickpanel_brightness_background.png
Click to expand...
Click to collapse
Changed the color of quickpanel_brightness_bg.png.... and... guess what.... nothing got changed its all the same
Rajesh_m said:
Changed the color of quickpanel_brightness_bg.png.... and... guess what.... nothing got changed its all the same
Click to expand...
Click to collapse
The xml files that control the progress bar color are theme-dependant and located inside the /res/drawable/ folder.
The names of the files are:
1. scrubber_progress_horizontal_dark.xml
2. scrubber_progress_horizontal_light.xml
In each of these files you'll find a layered list of png's which you'll have to edit to change the look of your progress bar. The last two, scrubber_primary_holo and scrubber_secondary_holo are what you're looking for.
You'll find these in /res/drawable-hdpi (usually). Galaxy Mini, being a LDPI device, it will firstly search for the pngs in drawable-ldpi, then if they're not present there, it will continue searching for the same pngs in the other folder in this order: mdpi, hdpi, xhdpi, xxhdpi. Make sure you edit the pngs found in the folder which represents the lowest resolution possible.
One more thing, these being pngs, you can change the whole look of the slider, not just the color.
alin.p said:
The xml files that control the progress bar color are theme-dependant and located inside the /res/drawable/ folder.
The names of the files are:
1. scrubber_progress_horizontal_dark.xml
2. scrubber_progress_horizontal_light.xml
In each of these files you'll find a layered list of png's which you'll have to edit to change the look of your progress bar. The last two, scrubber_primary_holo and scrubber_secondary_holo are what you're looking for.
You'll find these in /res/drawable-hdpi (usually). Galaxy Mini, being a LDPI device, it will firstly search for the pngs in drawable-ldpi, then if they're not present there, it will continue searching for the same pngs in the other folder in this order: mdpi, hdpi, xhdpi, xxhdpi. Make sure you edit the pngs found in the folder which represents the lowest resolution possible.
One more thing, these being pngs, you can change the whole look of the slider, not just the color.
Click to expand...
Click to collapse
Thanks for the detailed post and you are SPOT ON! i have no idea how i missed those png's.. thanks a lot @alin.p