How to make a Megaman Battery Life Bar using Zooper Widget.
The battery bar is best used with the Megaman icons from Simply 8-Bit, but you can use it in many setups. It looks super cool anyway.
First off a couple things that you’ll need to have installed in your phone. A launcher that supports widget with a grid layout (ie. Nova Launcher or Apex Launcher), and Zooper Widget.
Once you have what you need, place a Zooper Widget on the homescreen. Pick a 1x2 size (2 grids vertically). After it is placed on the homescreen, tap on it to start the setup.
Pick an empty widget to start since we are going to build it our own.
Before we do anything with the layout, let’s remove the widget background.
Drag the alpha layer all the way to the right to make it completely transparent. This will remove the background of the widget.
Next we go into Layout to start building the battery bar.
There are various module from Zooper to create the widget that you want. I’m only going to go through with the ones we need to create the battery bar.
In total the modules that we need are 8 Rect, 1 Progress Bar, and 1 Text. The Rect modules will create the look, and Progress Bar module will show the battery life in bar form, and the Text module will show the battery life in text.
Next we will need to create the modules in the above order as the order of the module will determine the order of layer of each module. To create the modules we hit the “+” button at top left:
Then pick the module that we want and enter the value as stated for each module, anything that is not stated in this guide is to be left as default.
We start with the main background, the big white rectangle at the center. Create a Rect module, and enter the values:
Corner: 5 (for the small rounded corners)
Then we create the battery life bar on top of the background. Create a Progress Bar module and enter the values:
FG Color: #ffc2991c (light brown)
BG Color #ff4b3b0b (dark brown)
Rotation: -90 (to make it vertical)
This is what you should see
Next we create the Text part. Create a Rect module for the blue background and enter the values:
Then create the Text module and enter the values:
Font Family: Visitor (this font works very well with any 8 bit theme)
To get the Text module to display battery life, click “Edit text manually”, delete the default values which is showing time, and type in #BLEVN#. Then tap on the tick at the top right to save it.
This is what you should see
Next we will create the top and bottom part of the battery bar together to complete the look. It consist of 3 parts, the block, the slant, and the hole.
We start with the block at the top and bottom. Create a Rect enter the values:
Next for the slant. Create a Rect and enter the values:
Now for the hole. Create a Rect and enter the values:
Color: #ff4b3b0a (dark brown)
Color: #ff4b3b0a (dark brown)
turnnoffyourmind
kianamaiart
janainaart
dailybridgerton
izzy806
tangentwithtanner
annaxmalina
prguitarman
gummygunk