Saturday, October 12, 2013

[ssLauncher-Tip] Displaying Notification Count

ssLauncher (from v1.13.0) supports to display notification text and count onto application icons in the application group and drawer page. Also, it is possible as a dynamic text for shortcuts.
Now let's learn how to do it.

1. Displaying notifications in the app group/drawer

Go to menu > preferences. Then you can see the following option.



Check 'Count notifications'. The following dialog will be shown because 'Notification monitor' is not installed on your device.



Press 'OK' and install it. You can manually search it in the Play store.



Select 'Count notifications for' and check the apps to display notifications for. I have checked 'Hangouts' for example.



When you come back to ssLauncher, it will show the following dialog because 'Notification monitor' is not activated.



Press 'Yes' or move to 'System settings' > 'Accessibility'.



Activate 'Notification monitoring service'. Ignore the warning message. I don't retrieve any information from your device. =)



Now finished. Let's send a message.



We can see the counter on the Hangouts icon.
The notification text is shown when using 'List type' of the page.





2. Displaying notifications on a shortcut

First of all, confirm that 'Notification monitor' is installed and activated. (See the 1)

Create a new shortcut to 'Hangouts' on the cover page.
I have selected a style including icon, title and information.



Edit the shortcut and select 'information' > 'text'.
Then check the 'Notification count' (dynamic text).



We can see the count is displayed on the shortcut after applying changes.



When you select a dynamic text, notification text will be displayed by selecting 'Notification message'. This notification is for the target of the shortcut and independent from 'Count notifications for' in preferences.

* 'The latest notification' of dynamic text will displays the "latest" one regardless of the target of the shortcut.

** 'Missed calls', 'Unread SMS' and 'Unread Gmails' in dynamic text are working independently from 'Notification monitor'. Because these dynamic text does not use the service.

Many thanks!

Sunday, October 6, 2013

[ssLauncher-Tip] Making Minimal Theme

This is a full tutorial to create a theme in ssLauncher.
Please see the following screenshots from my main device.
Its design concept is 'minimalism', nowadays the trend.





Now let's create the theme on your device!

First of all, download this zip file and extract it into the sdcard of your device.


[Clearing ssLauncher pages]

The initial layout of the home page looks like the following screenshot.
You can come back into this state by menu > more > reset.


Remove all pages you are not use in menu.
In my case, one cover page, app drawer, contacts and bookmark are used.


Go to the home (cover page), and remove all the shortcuts.


Long click the page label and check the 'hide labels'.


Now you can get this clean screen.



[Creating a dashboard on top]

Now we will create a dashboard containing date, time, weather info, battery level, battery temperature and available memory on top of the screen.

Create a shortcut and set to:

- clickable = unchecked
- background > background image = bg_top.png from the extracted images
- title > text = "   " (3 blanks)
- title > font size = 100

Then, you got the white board (shortcut). "Pin" this shortcut after long click.
Resize and position it like the following screenshot.


Because this shortcut was pinned, it is visible in all pages.
Now create a yellow board in the same manner with the settings:

- clickable = unchecked
- background > background color = yellow
- title > text = "   " (3 blanks)
- title > font size = 100

Resize and position it after pinning it:


Create a shortcut to calendar with the settings:

- target = a calendar app you are using
- style = the first one containing title and information text
- title > text = check 'date' and input "dd" in the text/format area
- title > font family = bold sans serif
- title > font size = 100
- title > text color = FF1B1B1B
- title > text alignment = top-right
- information > text = check 'date' and input "EEEEEEEEEE" in the text/format area
- information > font family = NanumGothicBold.ttf from the extracted files
- information > font size = 12
- information > text color = FF1B1B1B
- information > text alignment = bottom-right
- information > margins = (left, top, right, bottom) = (0, 0, 2, 0)

Then pin and position it:


Well, let's display current time with a new shortcut to clock.
Create a new shortcut and set it by:

- target = a clock or alarm
- style = the first one containing title and information text
- title > text = check 'date' and input "h" into the format area
- title > font family = NanumGothicExtraBold
- title > font size = 30
- title > text color = FF1B1B1B
- title > text alignment = top-right
- title > margins = (left, top, right, bottom) = (0, 0, 45, 0)
- information > text = check 'date' and input "mm" into the format area
- information > font family = NanumGothicLight
- information > font size = 30
- information > text color = FF1B1B1B
- information > text alignment = top-right
- information > margins = (left, top, right, bottom) = (0, 0, 0, 0)

Pin and position it like the screenshot:


Create a weather widget and position it.
I used "Weather widget+" but any widgets will be okay.


The next is a shortcut to display "battery level".
Create a new shortcut and set it:

- type = activity
- target = battery use (this name could depends on the device)
- style = a title below the icon
- icon > icon = battery.png from the extracted files
- icon > size = 30, 30
- title > text = check 'battery level' and check 'user color'
- title > font family = NanumGothic
- title > text color = FF1B1B1B
- title > text alignment = bottom-center
- title > margins = set all to zero

Pin and position it:


Battery temperature:

- target = anything you want
- style = a title below the icon
- icon > icon = thermometer.png from the extracted files
- icon > size = 30, 30
- title > text = check 'battery temperature' and input '%3.0f°C' in the format area
- title > font family = NanumGothic
- title > text color = FF1B1B1B
- title > text alignment = bottom-center
- title > margins = set all to zero


Available memory:

- target = anything you want
- style = a title below the icon
- icon > icon = ram.png from the extracted files
- icon > size = 30, 30
- title > text = check 'available memory'
- title > font family = NanumGothic
- title > text color = FF1B1B1B
- title > text alignment = bottom-center
- title > margins = set all to zero



Finished to make the dashboard now. =)


[Creating a dock bar on bottom]

Now we will make a dock bar which can be accessed too in any pages.
It can be made in the same manner for the dashboard.
Let's create a white board on the bottom of screen.
Long click the white board of the dashboard and select 'copy'.
Then long click the background of the cover page and select 'paste'.
Change the background to 'bg_bottom.png' from the extracted files and position it:


On the other pages, you can see 'dock menu bar' overlaps the created 'dock bar'.
We can prevent this by checking 'hide dock bar' in preferences.
And we will set the margins to prevent that the dashboard and dockbar cover the content of the other pages. These margins depend on the resolution of the device. Please find proper margins by trial and errors.
In my case, it is good when left, top, right and bottom are 4, 135, 4 and 68 respectively.
You can set the page margins in menu > theme > margins and others.
See the screenshot after adjusting the other page margins.

Drag an icon from the app drawer and drop it into the cover page, not on the dock bar.
And select the style containing only icon. Then, pin and position it.


You can put some counters for the icons.
For the missed calls, create a shortcut and set it by:

- clickable = unchecked
- title > text =  check 'missed calls'
- title > font family = NanumGothicBold
- title > font size = 20
- title > text color = FF1B1B1B

And pin and position it:


Do this in the same way for 'unread SMS':


We need to use an icon pack for the better looks.
I recommend two icon packs:

1. Minimal UI Theme: download
2. MIUI v5 Theme: download

I selected the first icon pack in menu > theme > icon pack and got the following screenshot.



[Building the cover page]

I have put just one icon for the music player into the cover page for the minimalism.

Create a shortcut and set it by:

- target = Music app
- gestures > gesture: up > enabled = checked
- gestures > gesture: up > type = widget
- gestures > gesture: up > target = create a music widget
- gestures > gesture: down > enabled = checked
- gestures > gesture: down > target = equalizer application
- style = only icon
- icon > icon = music.png from the extracted files
- icon > icon size = set the width and height to 500
- icon > scale type = fill

Then position it:


You can pop the widget up by swiping up the shortcut and open the equalizer by swiping down.




[Customizing the app drawer]

Now we will customize the app drawer for better design:

- menu > preferences > application drawer > check 'hide titles'
- menu > theme > animation > set 'type' to 'fading'
- menu > theme > background images > change the background for the app drawer to 'bg_light_gray.png'
- menu > preferences > application drawer > change the row and column for your device



[Customizing the contacts and bookmarks]

- menu > preferences > contacts/bookmarks > uncheck 'list type'
- menu > theme > background images > change the background for the pages to 'bg_light_gray.png'



Now finished. How about it?

Enjoy the ssLauncher. =)