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. =)

24 comments:

  1. Nice tutorial, though I wouldn't call the result minimal personally.

    I'd like to have an option to disable the bars showing the name under contact photos and the bookmarks, plus I'd like to be able to set custom pictures for the bookmarks themselves, hope that'll come some day.

    ReplyDelete
  2. Do you think you can change it to where we can make each parcel icon different...

    ReplyDelete
    Replies
    1. Sorry, you cannot set different icons for each of parcels but shortcuts to parcels on a cover page.

      Delete
  3. The only thing I am not liking about this launcher so far is the hassle to put app icons on the home page. It would be better if you could just drag and drop the icons like most launchers do with a grid. Also suggest adding an option to have a grid if its not already there and I'm missing it. Other than that I love the launcher

    ReplyDelete
    Replies
    1. Thank you for the suggestion. As you know, no grid system is the identity of this launcher. But, I will consider a page type for the grid layout.

      Delete
  4. Hi,
    Is there a way to combine elements of different themes together? Thank you!

    ReplyDelete
    Replies
    1. Unfortunately, it's not possible. Sorry.

      Delete
  5. Replies
    1. ssLaucher supports all font files with '.ttf' or '.otf'. There are so many font files in the Internet. Also, you can find them in your PC, for example, in "C:\windows\fonts" directory.

      Delete
  6. where can we download oriental style fonts?

    ReplyDelete
    Replies
    1. The fonts in "Oriental theme"? You can get it in here: http://hangeul.naver.com/

      Delete
  7. Replies
    1. What kind of maps do you mean?

      Delete
    2. Multiple applications together

      Delete
    3. Sorry, I cannot catch exactly what you mean.

      Delete
  8. In stock Android I can put several applications in 1 map. Organized together at one place on my homescreen

    ReplyDelete
    Replies
    1. Do you mean "application drawer" or "folder"?

      Delete
    2. A screenshot will be very helpful. Please email to me.

      Delete
  9. A folder...

    Putting a app on top of sorbet app... creates a map/folder...

    ReplyDelete
    Replies
    1. You can create a folder(=parcel) in "Applications" page. Then, drag and drop it to home page. Please read the following link to know how to create a folder. http://chyk-ss.blogspot.kr/2013/01/sslauncher-tip-some-good-features-in.html

      Delete
  10. Thanks, that was very helpful. Can you make this possible in application group also?

    ReplyDelete
    Replies
    1. Yes, of course. The pinned objects (dash board and dock bar) keeps in all pages. The first 4 screenshots are 'app drawer', 'cover page', 'cover page', 'bookmark page' respectively.

      Delete