Drop UI for Android (How To)

1 Posted by - July 14, 2012 - Design

One of my pet peeves is I can’t stand the default themes and wallpapers on my gadgets. The first thing I do is get rid of it all and customize it in a way that it stands out from other similar devices. It’s just my thing, I need them to be different/unique. This is one of the reasons I don’t like iPhones, functionality wise they’re awesome but almost everyone has one! Whats the fun in that? So I got my Galaxy S3 last month and stayed on the stock TouchWiz Nature UX (Samsung’s Android Launcher, fancy name huh?) for two weeks to know what I would be missing out on if were to get rid of it. As expected, not much, there’s nothing special about it other than the dragging and dropping widgets with motion sensors. Not good enough for me. So I made my own UI. I call it the Drop UI because all the wallpapers have raindrops in them and due to the rounded edges around it. I posted it online two weeks ago and the response was pretty good. So here’s a tutorial on how to set it up with the resources you may need.

I wanted something pretty but didn’t wanna lose functionality while keeping it minimal. Hate icons on the desktop. A few points I kept in mind was I wanted something flexible. Most themes lock you down to just one layout and wallpaper which can get pretty boring. I call the black rounded shape the themes platform. I have provided the PSD file at the end of the post. Idea is you can make your own custom home screens on the platform. I have provided layouts for five home screens, the Home, Media, Social, Agenda and System.

Coming up with the design of these screens was a bit hard, took me almost a week. The whole dark panel on top of the wallpaper was supposed to be white with emboss in it but that didn’t work out that well. So changed the white panel to dark and added in transparency. I was really tempted to use SweeterHome but it has a bit of learning curve and real low functionality, wasn’t worth it. I narrowed the launchers down to Apex and Nova, had GoLauncher before it but it didn’t allow widget overlap. My phone uses Apex launcher but from what I have read Nova can do what this can do too.

The setup is a bit complex but shouldn’t take you more than an hour to set it up if you have had experience using all the prerequisite apps. One of the trickiest things on here is positioning the home clock with Minimalistic Text app. So let’s start.

What you will need

Please note some of the Apps mentioned below are paid, some might have trials but it is suggested you get the ones mentioned below and not alternatives as I won’t be able to help you if you do.

Got them all? Let’s get started. Here’s a summary of how we’ll be going through the tutorial.

  1. We setup the home screen launcher and install other needed apps.
  2. Setup the live wallpaper.
  3. Setup our folders.
  4. Setup the Home screen Widgets.
  5. Setup the Lockscreen.

The Launcher and Apps

Install all the apps you just got. I am going to go through all the settings you need specifically for the theme to work.

Apex Launcher

  • Homescreen Settings
    • Portrait Grid: 7×10
    • Transition Effect: None
    • Show Wallpaper: Yes
    • Wallpaper Mode: Multiple screen (scrolling)
    • Hide Notification Bar: Yes
    • Hide Shadows: Yes
    • Hide Icon Labels: Yes
  • Dock Settings
    • # of dock pages: 1
    • # of dock icons: 5
    • Dock as overlay: Yes
    • Hide dock divider: Yes
  • Advanced Settings
    • Resize any widget: Yes
    • Overlapping widgets: Yes
    • Keep in Memory: Yes

Simi Folder

Make five folders for the five homescreens. Here are the settings for each folder. Adding apps should be pretty self-explanatory.

  • Foldertype: App Folder
  • Widget Settings
    • Icon: Gallery > Theme (get the theme folder from the end of the post) > Blank PNG file.
    • Background color: Transparent (0,0,0,0)
  • Launcher Settings: Set the style to iPhone.
Add in all the apps to the folders after you finish setting the folders.

MiltiPicture Live Wallpaper

Activate the wallpaper and add in 5 custom screens to it. Assign the wallpapers from the Theme (get the theme folder from the end of the post)  folder according to their names respectively. Set the transition effect to crossfade. Set the crop/resize ratio to Show Entire Picture. Dont mess with the other settings. Hope you do not get stuck here cause this should be the easiest thing on here.

We are 40% through. Moving on to Homescreen widgets.

Home

The homescreen has three widgets, all of them are from Minimalistic Text. Minimalistic Text is a bit hard to get around but once you figure it out it should be pretty straight forward. I am going to give out the exact settings for the main clock (mid widget). Once you have set it up you’re on your own to configure the other two. (I am kinda locked out of the settings as clicking on the app opens the apps I assigned to it to open on click, sorry!) So lets add in the clock.

Open the widget selection menu from the homescreen, and get the 3×2 Minimalistic Text widget.

  1. First thing you do is scroll way below and set the Global Settings. These specifically.
    • Weather Location
    • Font Folder to the “Fonts” in our Theme folder.
    • Go back once.
  2. Under Text Style
    • Select Accented
      • Font Family: Optificio.ttf
      • Bold: Yes
      • Go back.
    • Select Non-Accented
      • Font Family: CODE Light.ttf
      • Go back.
  3. Turn off Show Background on top.
  4. Set Allow Overflow to Yes if you got the paid version.
  5. Set the layout to Custom Layout and then click Custom Layout
    • Add in three blocks on layout grid as follows: Hour (12 Hour) | Minute | AM/PM
    • Lets set the sub settings for each of these blocks.
      • Hour: Accented & Override Size to 80.
      • Minute: Accented & Override Size to 80.
      • AM/PM: Non-Accented & Override Size to 80.
  6. Done. Finally! Hit OK and it’ll drop onto the Homescreen.
  7. Resize it so that it’s on its spot on the wallpaper.
You have to make two more, I think the font override for those was 40.. I think.

Media

The Media screen has four widgets. Three Simi Folders and one Player Pro widget. The Player Pro widget is the PlayerPro Plus (4×2) widget. After setting your theme add it the homescreen. Move and resize it until it’s on its spot. Other three are Simi Folder 1×1 widgets resized to 1×4 on top of the embedded icons in the wallpaper.

Agenda

This screen has two widgets, the Large Pure Grid calendar with the transparent skin resized to take up most of the homescreen. Theres one Simi Folder thats resized to 1×4  just like the Media screen.

System

This screen is pretty easy and confused most of the people who tried setting it up before this tutorial. The screen has four widgets. Three Power Control widgets, One Minimalistic text widget and the stock search bar (Its Android after all!). You’re on your own to configure these, the power control panels have 3 buttons on each bar. If you get stuck let me know in the comments.

“I had to move the minimalistic text widget down one row because it was interfering with the power control buttons above it.”

Social

This ones my most used screen. I kinda love it. Two widgets on here. Pure Messenger widget with transparent skin and a Simi Folder.

Lockscreen

Last part of the tutorial. The Lockscreen, go to WidgetLocker and set the wallpaper from the Theme folder. Add in the Minimalistic Text (you’re on your own for this, just create a layout you like, I already gave out the values for the main one). The slider comes with Widgetlocker. Don’t forget to hide the status bar!

Navigation/UX

You should have the theme or the UI functional if you’re reading this and have done all the steps up there. A few UX notes, sometimes you may want to see the statusbar from the lockscreen for notifications, just swipe down from top and WidgetLocker shall show the notification bar. And you may also want to setup gestures on Apex Launcher. I have Swipe Up set to Show Drawer and Swipe Down set to show the Notification pull down. Swiping down with two fingers shows the statusbar. Double tapping on the heading of the pages shows search. Having five wallpapers can be boring. I have my set of 5 different wallpapers for 5 screens which randomly rotate. You can do this via the Multipicture Live Wallpaper settings.

Further Customization

As I just said, you can have different wallpapers but you have to make those in Photoshop and export them with the theme panel on top. I have also attached the PSD to the post in which you can customize the icons and text too. You may refer to the DeviantArt page for the credits of the resources.  I haven’t made the icons, fonts or the wallpapers. The only things I made was the black panel and the lockscreen frame.

Future Updates

I can keep developing for the UI and provide more homescreen layouts, custom skins and icon packs if people are into it. I’ll decide based on feedback, or I may make something new soon.

If you have any questions or get stuck, let me know in the comments below or by tweeting me @xDeepS. I’ll also be keeping an eye on the themes DeviantArt page, XDA thread and MyColorScreen page. You may subscribe to my blog to get updates about my recent post here.

Donate to keep this project alive.

This is something I work on my free time, if you would like for me to keep working on this, chip in! Any amounts okay. Those who donate get email support and help creating new layouts. All the resources provided below are as is and I may or may not provide support upon my discretion.

Downloads

Drop UI PSD - Download
SD Card/Theme - Download

Disclaimer

Creative Commons License
Drop UI for Android by Deep Soni is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at deepsoni.me.
Permissions beyond the scope of this license may be available at http://deepsoni.me/contact.

  • Ashish Pandhi

    AMAZING! Will try it out on my touchpad and get back to you

  • noob

    u should make a youtube video tutorial for us noobs so it will be much easire

    • http://deepsoni.me/ Deep

      Hm I may, lets see. Give it a go first though.

  • Aur0r4

    One word: AWESOME! Ok a second word: THANKS!

    • http://www.deepsoni.me Deep S.

      You’re welcome, let me know if the battery drain persists. We can try to fix that.

  • SlainedPeep

    Have resolution issue with Galaxsy S2 but its good enough for new style.
    Thanks for sharing…

    • http://www.deepsoni.me Deep S.

      Could you take a screenshot on the S2 and send it to me? I’ll make S2 optimized wallpapers.

  • Lynn

    Hi! This is wonderful! May I ask how did you get that “darker” overlay on each screen? And also if the screens are scrollable or did you click the buttons and a folder came up with the widgets and such?

    • Lynn

      Oopsies, nevermind~ The darker overlay is a part of the wallpaper, as well as the buttons. Still, such a lovely screen. Keep up the awesome work!

      • http://www.deepsoni.me Deep S.

        Glad you like it!

  • Pingback: DropUI | PhoneAlien

  • Stephen

    I adore it, wonderful!

  • Emre

    can i install this ? i can*t optimzed -.-

    • http://www.deepsoni.me Deep S.

      What phone do you have? I can optimize it.

  • lamphibang

    very nice ! But why i didn’t see how to make the dock buttons ?! ( call, mess, internet, camera and app drawer ?

    • http://www.deepsoni.me Deep S.

      Theyre inside the wallpaper, I have detailed it. Read again :)

  • Anthony Semaan

    Tony. Yes how do you have you dock buttons set up also how do you save a folder without naming it in simi

    • http://www.deepsoni.me Deep S.

      You have to set the widget view in Simi to not show their name. And the dock has transparent icons. The wallpapers handle the icons.

  • Aur0r4

    Hey its me again…still using Drop UI :) is it possible to upload a wallpaper paket? That would be awesome

    • http://www.deepsoni.me Deep S.

      I will be preparing a few this weekend. Check back on this page :)

  • Aur0r4

    Hey its me again…still using Drop UI :) is it possible to upload a wallpaper paket? That would be awesome

  • http://twitter.com/blacksheepsbr Black Sheeps

    Hey Awesome Work. Any video explaining how to configure your Theme? Noob 4ever… :)

  • ceftriaxone

    can’t set this up. Something is missing in tutorial :(

    Anyway, this look perfect!

    • http://www.deepsoni.me Deep S.

      What isnt working?