"UCCW" and ZOOPER advice by clod007

Search This thread

gemer45a

Senior Member
Oct 30, 2013
471
240
XDA-CITY
After several recived messages I've decided to start a new topic, throw wich to explain some notions about how I create my screens using "UCCW".
I will post some short tutorials that I hope to be userful.

If the topic will not prezent interest, it will be shut down.
If you see it as a userfull thing, please press the "thank's" button. (It will let me know it is worthy)

Thank's !

"octa" S4

Will there be a thread for zooper widgets?

Sent from my HTCSensation using Tapatalk
 

clod007

Senior Member
Apr 17, 2012
2,647
31,260
Galati
Will there be a thread for zooper widgets?

Sent from my HTCSensation using Tapatalk

Hi my friend !

I frankly did much to keep this thread with explanations about zooper.
But as you honestly say that the lack of support stoped me.
As see last tutorial in this thread was supported by only five participants. ( Which "plegdroid" trying to support me. I learn it is not him. )
Everything you see in this thread, for me meant hours of work !

Anyway, take this answer and will show a response given today in my presentation thread.

How to install a widget with zooper pro.

1. Download widget.

tyvu2aga.jpg


2. Move widget in templates folder (zooper files)

3a6udu7y.jpg


e7a3a5u9.jpg


e5y4u7a7.jpg


na6ejuje.jpg


arebaquj.jpg


Press move here

2abu7y7e.jpg


3. Add in your screen zooper widget if you need (dimension).

6yregube.jpg


a5uvuqy4.jpg


4. Press widget and search in SD card.

5a4uvu8a.jpg


ahu6yret.jpg


Widget apprar in screen.

6ydesyhy.jpg


Press return and widget appear in your screen.

ymyhehaz.jpg


For this example I used a music widget.
If you use a music widget, you need instal "Media Utilities (beta)" in your phone.
After install you need set "Media Utilities".
See this screenshot.

ugura7y3.jpg


That is all.

However if interest appears, limited time I will try a few explanations.

Thank you and sorry for bad english !


note "three"
 
Last edited:

gemer45a

Senior Member
Oct 30, 2013
471
240
XDA-CITY
That is all.
However if interest appears, limited time I will try a few explanations.
Thank you and sorry for bad english !
note "three"

I see your point, thanks for your time though. I have followed these instructions and downloaded one of your templates but I don't know how to make it work with the media utilities. I'm using nova launcher and HTC BlinkFeed. But mostly the Nova launcher for customisation of homescreen. Thank your for your kind response :)

Sent from my HTCSensation using Tapatalk
 

clod007

Senior Member
Apr 17, 2012
2,647
31,260
Galati
After several recived requests of explaining how a clock is made in zooper, I decided to create a new tutorial.
First is first, we must create/add a widget (zooper) on our screen. I made it 4x4.

u9usedas.jpg


y7y4uja6.jpg


Now we start editing.
Touch the widget and select "empty".

ahetetu8.jpg


"Widget background" is the color for the background, you can set it now or at the end.

Select "layout"

useze9yd.jpg


Than select "+" from above.

tyzepu4e.jpg


In this point we have the list with the things we can add on the widget and we select "rect".

ruba5atu.jpg


It will show that little square, we will scrol down, where we will find the dimension in order to change them.

emuqyru6.jpg


Change "height" and give it the dimension you want. I choosed 140.

uda8u6a5.jpg


Scroll down till "advanced parameters" and select it.

ery6apy2.jpg


Now, here, we must add the variables which will make our "line" to indicate minutes.

[ar]43[/ar]
[as]$(360/60*#dm#)$[/as]
[r]$(360/60*#dm#)$[/r]

aje5ehe6.jpg


Save what we wrote and see how our line indicates minutes.

5aqasajy.jpg


We return and add a new "rect" in order to create the line to indicate the hours. (I will make it red, to be easy to distinguis)
I choosed 100.

ahahugev.jpg


Go to "advanced parameters" and add

[ar]43[/ar]
[as]$(360/(12*60)*(#dh#*60+#dm#))$[/as]
[r]$(360/(12*60)*(#dh#*60+#dm#))$[/r]

Save and see how the line indicates hours.

jeqeha8y.jpg


u8uja3ys.jpg


And this is how you make it functional.

You must understand, for you to create what you want, there are variables [ar][/ar].
Changing sa number/value I prezented, you'l see how the line/lines will move from center toward the exterior and reverse.
Ex. : change "28" to "80".

5ezy7y9u.jpg


2eqa9ymu.jpg


We will see how the hour line is moving away from the center (black dot).
For this parameter ( [ar] ) every one of you will use the nedeed value.

THIS IS ALL.

I come back with the kind request for you to press the "thanks button" if this tutorial was userfull.
This is the only way I will know for the future, if it is worth the efort.

THANK YOU !
 
Last edited:

Mirrrr

Senior Member
Aug 22, 2010
111
106
38
Rotterdam
Woooo i got a selfmade clock

Okay so i have this clock i like butttt now i want to change the background of the clock in something I made myself.

Ha worked it out. Post my result in a min

Edit again. It's still much work in progress. So wallpaper.jpg was where I started in photoshop. I editted it with loads of layers to get the old style. Then I copied a circle out of the stock and blurred it and lowered opacity. Then copied it it again and made it bigger so i had a clock border and this is the result :D

I don't like the hands though. Colours of them suck
 

Attachments

  • Screenshot_2014-06-27-00-00-46.png
    Screenshot_2014-06-27-00-00-46.png
    166.4 KB · Views: 220
  • shot_2014-06-27_12-34-49.jpg
    shot_2014-06-27_12-34-49.jpg
    153.9 KB · Views: 217
  • Screenshot_2014-06-27-13-36-09.jpg
    Screenshot_2014-06-27-13-36-09.jpg
    146.6 KB · Views: 223
  • wallpaper.jpg
    wallpaper.jpg
    59.3 KB · Views: 221
Last edited:
  • Like
Reactions: clod007

Mirrrr

Senior Member
Aug 22, 2010
111
106
38
Rotterdam
Oksy I think I start to understand the clock part. What I truly want to learn is that glass effect on clocks. I think I can make it in photoshop but it doesn't look as awesome as your clocks

My new wall btw. I made the wall myself in photoshop and the icons of the first screen are from peek. The second one are from SC 115
 

Attachments

  • Screenshot_2014-07-03-08-00-17.jpg
    Screenshot_2014-07-03-08-00-17.jpg
    138.3 KB · Views: 179
  • Screenshot_2014-07-03-08-32-18.jpg
    Screenshot_2014-07-03-08-32-18.jpg
    142 KB · Views: 167
  • Like
Reactions: clod007

clod007

Senior Member
Apr 17, 2012
2,647
31,260
Galati
Ow and if you have some time ever can you pls tell me what i should improve :( Cause I keep doing things and I really don't know if I do it okay
How to create a "glass" clock ?
Let's see.

1. Add a rect and choose whatever form you want and whatever dimension you need.
I choose round.

3e5epasu.jpg


2. Now search "gradient mode" and select "linear".

usyjany7.jpg


4uqysu7a.jpg


Choose color for "gradient end color".
I choose FFBFBFBF (light gray)

aresatyq.jpg


3. Back to "rect main color".

py5a7ure.jpg


Reduce opacity for white.
I choose 37FFFFFF

senepy3a.jpg


Now our "glass" look like.

sumeruda.jpg


byzezygy.jpg


But go back and continue editing.

4. Search "blur" and add value

mutagu8a.jpg


And final result is this.

qu3enu5a.jpg


If you need frame ?
Ok.

Add new rect and choose dimension.
I choose this value and white color.

qega5aqu.jpg


Add litle "blur"

menyjegu.jpg


And choose "linear" for "gradient mode" and black color.

y6uhurap.jpg


Final result is this.

e8upuvu6.jpg


Now you can add whatever you want.

*** Must understand that there is no rule for this ***
Choose whatever color, blur, gradient, dimension or form you want.

Still want to know only rule ?

*** PLEASED TO CREATE !!! ***

In the end of the tutorial I will add an answer for another question.

How create notification for missed phone and unread text or g'mail ?

Let's see.

I use the same widget.

Add a "text" and search "edit text manualy"

emebyhyj.jpg


and select

udenanu4.jpg


Here delete old value and add #SMCALLS# for missed phone.

teqavega.jpg


uqy7y5az.jpg


And now see notification for phone.

hu7yny7a.jpg


Choose whatever font, color or dimension you want.

For unread text, add #SUSMS#
For unread g'mail, add #SUG#

That is it.

I hope this is helpfull !

Thank you.

note "three"
 
Last edited:

Top Liked Posts

  • There are no posts matching your filters.
  • 49
    After several recived messages I've decided to start a new topic, throw wich to explain some notions about how I create my screens using "UCCW".
    I will post some short tutorials that I hope to be userfull.
    I don't say that these are the best methods, but belive me, they work just fine!

    If the topic will not prezent interest, it will be shut down.
    If you see it as a userfull thing, please press the "thank's" button. (It will let me know it is worthy)

    Thank's !

    See all my work, here
    http://forum.xda-developers.com/showthread.php?p=42150447

    "octa" S4
    30
    u3e2u3a9.jpg


    In this tutorial I will show you how to make a part of the screen, not all of it.
    And with this knoledge you can make your own type of screen.
    After you have set your screen settings (collumns and rows), add "UCCW" widget on the screen.
    (For this type of screen I used 2 4x4 uccw skins on a 4 collumns 8 rows screen.)

    evysaryp.jpg


    After the widget is added on the screen, open it and add "image1"

    ehy7e3yq.jpg


    Select "image1"

    2ahugu9e.jpg


    and resize it with "scale" from "controls#2

    hemevu8y.jpg


    (You must use adequit images for "UCCW". For images I use DesktopVizualiseR app. DVRImageCrop)

    With position "controls#1" you put it wherever you like.

    de7u3e8e.jpg


    Select and add "shape1", than press "sort" and drag "shape1" under "image1"

    e3a6ymet.jpg


    (As a rule, in "sort", in order, the last ones in the list, are the first that appear in front of your eyes.)

    With "position" move "shape1" on top of "image1"

    9arepejy.jpg


    In "controls#4" resize "shape1" (width and height) till you cover completly "image1"

    umemyje3.jpg


    In "controls#3" set like this: radius 10, dy 20, dx -20 and chose a dark gray color.

    e9y4y6a9.jpg


    After that press "sort" and change the order

    8yhujyzu.jpg


    The rezult is this one

    tetepuve.jpg


    Add "static text1" and arange in this order

    ety5ata6.jpg


    With position set the text on top of the image and select color white for it (use whatever font you like)

    zugyhabe.jpg


    apame4ut.jpg


    As a visual trick for "static text", go to "controls#3" and set this way: radius 2, dy 3, dx 3, color black!

    6a2y5evy.jpg


    ybe6e7ys.jpg


    By learning those steps, you can create a full screen!

    You can use whatever dimension, colors, fonts, radius, ... you want!

    I hope this will realy help someone.
    THANK'S !



    "octa" S4
    19
    Hi my friends !

    If you like my presentation ?

    epequbu3.jpg



    Today "HOW I MADE" !

    1. Download this apps from PlayStore.
    (Is absolutly free and great)

    zery4agu.jpg


    vy5ysesu.jpg


    2. Open "Phoneshot Free" and select "choose screenshot".

    yry2aqyh.jpg


    Choose location for your screenshot. (I use Quick Pic)

    uraquqag.jpg


    Choose your screenshot and press "save". Enter a filename and press ok.

    re2y6yzu.jpg


    eqatahe3.jpg


    y4y8ymuz.jpg


    For this app "THAT IS IT" !

    Now open "Photo Editor" and select "Gallery".

    6y2asudy.jpg


    Enter in your file and select wall used for screenshot.

    ege7udev.jpg


    Select "frame" and select "color".

    9yheheme.jpg


    agetybeq.jpg


    Now, set value for "thickness", 26,6 (or want you need).
    Select whatever color you want for frame (I use black) and press "apply".

    Now, choose "crop" and selected.

    uvegubet.jpg


    Eliminate vertical border and press "apply".

    9uvymabe.jpg


    mupegapy.jpg


    Now, choose "Text/Image" and select.

    2unumyje.jpg


    Press " + " and "Add Image".
    Select "Built - in image picker" and select your "phoneshot".

    u4a3yda4.jpg


    Press "apply"

    2utujanu.jpg


    Again press "apply".

    Repeat the same steps for "text" and press "save".

    nejy5uvu.jpg


    Now see final result !!!

    u9a4utyq.jpg


    That is it !!!

    If you see it as a userfull thing, please press the "thank's" button.
    IT WILL LET ME KNOW IT IS WORTHY !!!

    "octa" S4
    16
    Everytime at the begining, you must decide your screen settings.
    My settings are:
    4collumns and 8rows
    no statusbar
    no dock
    no margin
    disable nav bar
    I decided to create 2 4x4 skins.

    ejaja4yp.jpg


    1. Add the widget on the screen ucc widget - uccw 4x4 - "new".
    The 4x4 widget will appear on the screen, than you would have to resize it to fit your screen.
    For this, go to "controls#3" and change "width" and "height".

    azetapan.jpg


    2. Add in the skin "shape1" which you can fit by "x-0" and "y-0".
    In "controls#4" set "width" 500 and "height" identicly with the height of the background you have created the first time.
    Mine is 754.
    In "controls#3" set "radius" 8 and "dx" 8. The color must be black.
    ("dx" moves the "shadow" horizontal and "dy" moves it vertical)

    y3u8u7er.jpg


    Add to skin "shape2", which you resize and position identicle with "shape1" without adding "shadow" in "controls#2" set "see trought effect".

    7esebe3e.jpg


    4. Repet exactly the same steps for the second 4x4 skin used in your screen.

    a9e8eryz.jpg


    5. You will see a discontinuance of the "shadow" on the screen.
    For corection you will have to move "shadow" for "shape1".
    At the bottom skin; "controls#3" "dy" -7 (the shadow will rise).
    At the top skin; "dy" +7 (the shadow will fall)

    5adyju3u.jpg


    7ajajave.jpg


    6. Now, to the right side of the skin, you will respect the used steps (1-5).
    Add "shape3" to the skin, wich you will resize "width" 200 and "height" identic with the dimension used in "shape1".
    At mine 754.
    After redimensioning, fit it soldering to the right edge of the background.
    For "shadow" use the same values as you did for "shape1" but "dx" will be with "-" and the "shadow" will come to left.
    Add "shape4" and repet step 3.

    usubumu4.jpg


    nu9uve5a.jpg


    husagube.jpg


    7. For you to create "appdrawer" add to the skin another 6 "shapes" which you will resize 30x30 and fit them where they belong.

    eja3ybum.jpg


    uda7ypy4.jpg


    8. According to the wall used change the color of the skins background.

    8yqy7aqe.jpg


    9. Add in the bottom skin "image1, 2, 3, 4".
    Fit them as you want and select the "image" you want. ("controls#2", "image")
    Resize if neded ("scale")

    6e7ege8u.jpg


    yqe7amy9.jpg


    10. In the top skin add

    9ugygevu.jpg


    Fit and resize them as you want (chose your own font)

    y3y3y6um.jpg


    peruvu7a.jpg


    11. With the "hotspot" you will make the skins functional.

    usabe2a3.jpg


    Fit, resize and set the apps you want.
    (For "appdrawer" select "shorcut" and chose "appdrawer shorcut" of the launcher that you use)

    Finaly, enter uccw settings, select "lock widgets" and set it "on")

    uqypa2yv.jpg


    2emu2e5u.jpg


    That's all !

    I hope this will be helpfull for someone !



    "octa" S4
    15
    Steps for create skins.

    1. Download "UCCW" app from PlayStore (free app).

    6u7ude5y.jpg


    2. Touch your screen and select "widget".

    ydu7u9e7.jpg


    3. Search "UCCW" widget and selected.

    7uvehe2y.jpg


    4. Search dimension if you need.

    5apu4asy.jpg


    I choose for explanation "UCCW 4X4".

    And here I think we must clarify some things.
    Whatever launcher you are using, in his settings you will find "homescreen settings", where you can choose the number of collumns and rows you want to use on your screen.

    eny7y7a8.jpg


    It will form a grid on the screen.
    You can create any configuration you want.
    For my example, I choose a 4collumns and 8rows configuration, so I will show you how to arrange 2 4x4 skins on the screen.
    I always work with the same settings of the screen.
    - no statusbar
    - no dock
    - no margin (vert. and horiz.)
    - disable nav bar
    The example you see has those settings.

    From the moment you start to create a skin you must decide what settings you will use.
    There is no problem in using other settings, but if you share the skin with someone, that someone must respect you settings exactly for the skin to fit.

    5. Once you open the 4x4 widget you will see "new" which you will select.

    a3y4ysag.jpg


    After you press the widget on the screen will open the work space.

    yhesagu9.jpg


    Exiting the app, you'll see how the skin looks on the screen.

    uma3y5ub.jpg


    I always covered the entire 4x4 grid.
    Press the skin and choose the "resize" option to see how does the skin fit the grid.

    dy5agute.jpg


    See how the skin sides must be resized.

    6. Touch the skin and go back to editing.
    Press "edit object" and select "background".
    You will find all the options which you csn modify.
    Search "dimensions" and select it.

    equjugu3.jpg


    With "width" you will resize the background's lenght and with "height" the height.
    Increase the "width" till the skin fills the side margins.
    Do the same with the "height" too.
    Definitely you will retry many times, till you obtain the wanted result.

    azu3apap.jpg


    seza3a2a.jpg


    How do you check the dimensons during the edit ?
    You always go back to the skin on the screen and press "resize".

    atusysy5.jpg


    You will see what modifications are needed "width" or "height".
    When you reached the final form, go back to editing and press "save" - "save skin".

    yra5ezan.jpg


    Rename it and press "ok".

    In order to cover the entire screen add again the skin on the screen.
    You will have two 4x4 skins.

    a3e9e2a4.jpg



    "octa" S4
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