Template Text Zooper Widget Pro
Before we get started If you do not already have Zooper Widget installed on your device, you’ll want to head over to the Google Play Store to get a copy. You can easily get by today with the free version, but I highly recommend splurging on the if you think you will stick with Zooper Widget for design of your Android Homescreen. Should you desire any custom artwork or images to use within your widget, it would be good to arrange them into a folder on your device now. Here is my and the,.
As always, Zooper Widget allows you to come back to any widget at any time to make adjustments, so do not panic if you are unsure of the content you desire at this time. I also want to warn you now that we will be building a somewhat ‘busy’ widget, this is only to incorporate all of the elements, I expect most of your projects will subscribe to the ‘less is more’ philosophy, which is great, once you learn how to use the tools today. As with any Zooper Widget implementation, we’ll have to decide what size of widget we need and add it to our Homescreen. Remember that if your allows it, you can just add a 1×1 widget and resize to fit later. We covered the steps required in last week’s article. Once your empty widget is sized and positioned, tap it to start. Choose Empty You may now make any edits to the general widget settings, see from last week if you need a refresher.
Tap Layout All of the available elements in Zooper Widget can be seen when you tap the “ +ADD” button in the top menu. Optional elements that can be added are fairly self explanatory, and include:.
Text: fully customizable text element that can be static text or dynamic based upon many triggers. Rich Text: Similar to Text, but adds multi-line support and text margins. Rect(angle): Although it says rectangle shapes, they can be rounded into circles too. Do not underestimate this element, it can make or break your widget design. Series: A collection of date based values in a line, where all are visible but one is highlighted. For example, the days of the week could look like: Sun Mon Tues Wed Thurs Fri Sat.
Scalable Icon Set: Battery or Weather icon sets in a single color, infinitely scalable vector graphics. Bitmap Icon Set: Battery or Weather icon sets in a colorful design. Limited scalable Raster graphics. Progress Bar: A customizable and dynamic progress bar to show a values as a percentage of a total. Bitmap: An image from your device.
Supports most common image formats, including jpg, png, bmp and more. I invite you to follow along as we walk through most of the above elements to build a fun little widget that displays a good amount of relevant information for your normal daily grind. Text elements in Zooper Widget are very versatile, you can adjust many visual aspects of them from color and size through to drop shadows, angles and curvature.
The text displayed can be static text that you set, or, more commonly, can pull from hundreds of aspects of your device and the web. Dynamic text can include things like the time, battery levels, weather and temperature information, network signal strength, information about recent calls or sms messages, CPU frequencies, Calendar events sunrise/sunset times and more. Beyond Zooper Widget’s own accessible metrics, Zooper can be configured to gather information from Tasker variables, but we’ll talk about that powerhouse combination next week. Tap “ +ADD” in the top menu and add a Text element. The default Text element will place the time in center position with white text. Change the Size (Text font size) of the Text so that the clock is roughly one-third the width of your overall widget. Simply tap the right arrow and watch it change in the design preview window at the top of the screen.
Feel free to change up the Text Font Family at this time, keeping in mind you may need to re-adjust your font size afterward. Head back to for more information on how that is done. Adjust the Y Offset value so that the clock sits about half of its own height from the top of your widget. Tap the left arrow, this will create a negative value, such as -73. Tap the system back button to go back to the widget Layout screen. That completes a basic Text element, let’s try another one, a little more advanced. Tap “ +ADD” in the top menu and add another Text element.
Tap Edit text manually Delete the existing content in the text box at the top, which should read #DHH#:#Dmm#. We want to now create a date string, this can be done by either manually typing the required code, or, thankfully, by choosing the elements from the list provided. Tap the down arrow beside Date. Choose the individual elements in the order in which you desire them to appear. If required, head back into the text box at the top and add any necessary punctuation.
My personal preference with added punctuation created the string #DE#, #DMMMM# #Dd#, #Dy# Breaking that down, each element is surrounded by the # symbol. The letter “D” designates the elements as part of the Date categorization, the following characters are Zooper Widget’s arbitrary values, where “E” represents a short version of the current day of the week. “MMMM” makes up the long form name of the current month. “d” is the current day of the month and “y” represents the current year.
The result creates the date string “Thurs, May 22, 2014.” Tap OK to return to editing the Text element. Change the font, if desired. Change the Size of the text to be about two-thirds your overall widget width, or, double the width of your time element. Change the Y Offset value so that your date string sits just below your time element.
Tap the system back button to go back to the widget Layout screen. We are now finished with our text elements, but do not exit yet.
Next we’ll add a Series element. Tap the “ +ADD” button in the top menu and choose Series. The Series element is based only on dates and the battery at this time. The default Series element places the days of the week in order vertically with the current day in larger and bolded text. Change the Series Type to Battery.
There are two Font sections in a Series. The Default Font is for the text that is not highlighted, and Selected Item Font, as the name suggests, is the highlighted text. Change the Text Font Family for either of these now, if desired. Change the Default Font Size to a rather small size, about a quarter the size of your Date string. I have set mine to 12. Change the Selected Item Font Size to about the same size as the Date string, or maybe slightly larger.
I have mine set to 24. Adjust the Y Offset of the Series so that the top of it is a little above the center of your widget, and the bottom sits about one-eighth above the bottom.
Or roughly a space at the bottom the size of your Time element. It is very likely that you will have to go back and adjust your Text Size settings so that the overall size of your Series fits within the described area. Tap the system back button to go back to the widget Layout screen. Tap the “ +ADD” button in the top menu and choose Scalable Icon Set.
Change the Iconset from Default Weather Icons to Battery Icons Filled. Rotate the icon to -90, so that it is fully upright. Feel free to change the Size, but keep the icon smaller than your time text. Adjust the X Offset to the left, try to get the icon about 1/4 of the widget width from the left edge.
Tap the system back button to return to the widget Layout screen. Tap the “ +ADD” button in the top menu and choose Bitmap Icon Set. Change the Iconset from Default Battery Icons to ZW Weather Icons. Change the Size, if needed, to try to match the overall size of your battery Scalable Icon. Adjust the X Offset to the right, try to get the icon about 1/4 of the widget width from the right edge. Tap the system back button to go back to the widget Layout screen. Tap the “ +ADD” button in the top menu and choose Progress Bar.
Tap on Edit Progress Min/Max/Value. Ensure that Min is set to 0 Change Value to read #NWSIG# Alternatively, delete the default text in the Value field, then tap on the dropdown arrow beside Network and tap on WiFi Signal Strength (0-9) Change Max to 9 Tap the checkmark in the top menu to confirm the changes. Adjust the X Offset so that the left edge of your progress bar is close to the center of the battery Scalable Icon on the left. Change the Width of the progress bar so that the right edge reaches over to about the center of the weather Bitmap Icon. Adjust the Y Offset so that the progress bar moves down. Stop so that the progress bar is covering the 20% indicator of your vertical battery Series that we created earlier.
We will now manage two settings together to create a rounding effect. Adjust Curving to a value of about -90. Then adjust Rotation to a value of about 45. The result should round the progress bar, and situate it evenly upright. The center of the progress bar should now be below the lower edge of the battery Series. Adjust these two values in opposite of each other, in small increments, until achieving the desired effect.
Change Spacing to a value of about 6. Change Split to a value of 1. Tap the system back button to go back to the widget Layout screen. The neat thing about this particular Progress Bar, is that it will give you a quick and discreet indication of the signal strength of the WiFi network that you are connected to. You may not desire to see this, so go ahead and play around with the various Min/Max/Value settings until you have something important to you.
You should now have what looks slightly like a happy face. Let’s bring it all together then. We will create two Rect elements, the first will be a true rectangle, then we’ll create a circle. Tap the “ +ADD” button in the top menu and select Rect. Increase the Width and Height settings until you have a square, or rectangle, that completely fills your widget area. Change the Color to something that will nicely compliment your. This will be the main color of your widget.
American zombie gothic pdf. You will likely have to come back here later to change the color again, so do not worry if you don’t have something in mind, but please do change it to something other than white for now. Tap the system back button to go back to the widget Layout screen. Simple squares and rectangles really are that easy. Now let’s look at creating a circle We are in luck, we want to start by creating a new Rect element that is very similar to the one we just created.
Instead of tapping the +add button, do as follows: Select the checkbox to the right of our newly created Rect element. In the top menu, select Clone, which may be an icon of stacked rectangles with a + symbol on them. The new Rect element has been created with the exact same settings as the previous. Go ahead and start by changing the color to something different, any color is fine, as long as it is different than the previous Rect element. Increase the Corners value until the Rect becomes round.
You should find that at about 120 you have a perfect circle/oval. Go ahead and push beyond that to about 200 for our purposes.
Change the Width and Height until they are equal, this will create a perfect circle. If all you want is a circle, you would stop here. We have something more in mind for this design however, so please proceed.
Now, increase both the Width and Height equally until they are roughly 30% larger than your largest widget dimension. For example, if the longest side of your widget is 210, make this Rect element about 280. This should completely fill the widget, or leave just tiny spaces in the corners.
Gradually increase the Outline setting until you have a circle that fully fits just inside your shortest widget edge. I expect your value should reach 150 or higher, so feel free to manually enter a larger number, then continue with the arrow buttons as needed. Finally, change the Drawing Mode to Clear. What we have done by setting the drawing mode to clear is to designate that area as transparent.
You will notice that your first Rect element is visible, but only the perfect circle in the middle. Tap the system back button to go back to the widget Layout screen. Some cleanup tasks The last thing we need to do is change the order of our elements so that our Rect element is not blocking all of our other work.
From the Layout screen, tap and hold the up/down arrow icon on the left hand side of your first rect Element. This will activate it for order arrangement. Go ahead and slide the Rect to the top of our elements list.
As elements are drawn in order from this list, the result will place all of your other elements on top of the Rect you’ve created. You may feel like going back in to make small adjustments to some, or most, of the elements you’ve created, please do so. Zooper Widget design should be a fluid experience. You may come back to change colors based on new, change based on how you’re feeling that day, and more.
I encourage continual tweaking until you either have the perfect widget, or are prepared to start a new one from scratch. Bonus points Before calling it a day, the design we’ve created gets the job done, but it needs a little oomph. Let’s go ahead and add an image, play with some drawing modes and give the widget a clickable action. Tap the “ +ADD” button in the top menu and select Bitmap. Scroll down and tap on Bitmap to pick a bitmap, or image, from your device gallery. From the file chooser dialog that pops up, search for and tap on your desired image. The image can live on your device, perhaps in that designated folder you created before beginning today, or even online through your Google+ Photos or Google Drive storage.
Adjust the Scale of the photo until it fits your needs. Certainly it should be made to completely cover the circle area in your widget. Adjust the X Offset and Y Offset values as desired to move your image into place. Tap the system back button to go back to the widget Layout screen. As we did with the first Rect element, tap and hold the up/down arrow icon on the left of the Bitmap and slide the Bitmap up almost to the top of the list. We want your first Rect element to be first, this Bitmap second. Drop Shadows If you find your text hard to read, or that almost any other element blends into the background, consider changing its color or adding a drop shadow.
To add a drop shadow, change the value for Blur, I usually go to about 6, then change both the Shadow X Offset and Shadow Y Offset, I go to about 2 each. Now, even if your text is white and your background is white, you should be able to see your item a little more clearly. Check out the highlighted areas in the image below. Drawing Modes and Opacity In the above, we used two drawing modes, Normal and Clear.
As indicated, Normal displays the element in the chosen color, and Clear creates a fully transparent space so that you can see your Homescreen wallpaper in the background. The final Drawing Mode is called XOR. XOR will turn overlapping elements into full transparency, but will show as normal when on its own. There is also an Opacity setting available for Bitmap and Bitmap Icon Set elements, the default is 100, which shows the item in full clarity, adjust that down to apply a transparency effect.
For our design, if you apply transparency to the Bitmap image, you may want to delete the first Rect element, this way you’ll be able to see your Homescreen wallpaper instead of the solid color of the Rect. But be sure to play with it to see what looks best. Our final product Utilizing almost every available element in the Zooper Widget arsenal, here is the custom widget we have created today. It is not perfect, but I suspect you’ll adjust yours to look even better.
Tap Actions and Tasker integration (Zooper Widget Pro only) It is possible in the Pro version of Zooper Widget to assign actions that will take place when you tap an element of your widget. For example, you could make it so that tapping on the weather icon opens your favorite weather application. Did you know that tap actions and Text elements can go beyond that of what is built into Zooper Widget? Zooper Widget has the ability to both pull information from Tasker to display as Text, and push actions to Tasker to trigger a task. Is a powerful app that allows you to take near complete control of your device. Also gathers information about nearly any event, setting, and more of your device, which can then be displayed on your Zooper Widget widget. I offer the challenge to any interested to use Zooper Widget and Tasker to create a customized that changes your volume, screen brightness and toggles on/off your wireless internet.
Best Zooper Widgets
There are many ways to tackle all this, we’ll show you an example next week. Bonus points if you can make the widget display an icon indicating when headphones have been plugged in.
Share with us screenshots of the widgets you’ve created using the skills above, we are always interested to see the results of.