Development Journal – Smsr Update 001

I’d like to think that I started working on a rough draft with Smsr and then it evolved into something else.

This “rough draft” had a bit of code in it encapsulated in an entity called ConversationThread. A function of this class in particular was really nasty since what it did was take all of the SMS messages on the device and effectively organize them in a cohesive manner that didn’t rely on querying sub-providers like Sms.Inbox or Sms.Sent. The reasoning behind this was that when I would query some of the more specific Content Providers, like Sms.Conversations, the Cursor returned from that query would only contain three fields regardless of the applied projection. In other words, despite the fact that the contract class inherited from base interfaces that gave it the additional fields you’d want, this inheritance doesn’t apply to what’s returned from queries against the provider because these columns are missing from the Cursor. So it wouldn’t contain things like ADDRESS or _ID. And because these Content Providers weren’t designed with the ability to perform SQL Joins via queries (despite the fact that the documentation would lead you to believe so), the only other alternative, really, is to perform several separate queries against several different Content Providers and join them using either MatrixCursor or CursorJoiner. The issue there is (A) how to do this without blocking on the UI thread and (B) because subsequent queries would rely specifically on information that was contained in previous queries, how then to make sure that the queries had completed before attempting to use them?

I really tried to avoid the solution where multiple queries were involved because it just seemed so… lackluster. Not to mention that the idea of tossing back and forth between five or six Cursors seemed like an explosion in the works. But there was a major issue with the way I was doing it originally – real-time updates. Because the backing data was effectively abstracted into this seemingly convoluted construct that didn’t directly bind to the backing data, if something changed in the data (i.e. received a new text message), the structure would effectively have to be completely rebuilt. One pass on building that thing was expensive enough since it relied heavily on Collections. Doing it over and over again could lead to some really janky issues.

So I went back to the drawing board. And what I came out with, after struggling for a bit to understand MatrixCursor, was a solution that does in fact query multiple Content Providers which will yield several Cursors and then combines them into a MatrixCursor which is then given to my custom CursorAdapter. The result here also adds to a modified layout for the Conversation Stubs which uses a LayerDrawable to get the contact’s image (default if none) and apply a gradient over top of it that leads to the other half of the list.

Unfortunately, this change has broken the Activity that will show the Conversation Thread because the data that’s now contained in the stubs is different than what that Activity was looking for in the first place. But the stub viewer looks nice! 😀

If you want to follow along, the branch that this work is being done on is the “rewrite” branch.

Customizing GNOME Shell (As Far As I’ve Done)

I was really tossing up the idea of doing this over an audio tutorial or what but in the end I decided that it would be best if I just typed it out. I’ve had really bad luck with recording audio on Linux and it just doesn’t seem to get any better no matter what I do.

One of the things that I really like about using Linux is the modular nature of all of the software on the system. That especially applies to the look and feel of the desktop environment. To some degree, regardless of which DE you use (if any), you have some level of control over how you can personalize it. This is usually one aspect that I’ll spend an entire weekend on just because I can.

So if anyone hasn’t figured it out by now, I’m pretty partial to GNOME 3. Despite my angst against their documentation efforts for GTK, I think it’s a fantastic DE and most importantly I think it’s the best looking one out there. And that’s just judging by stock appearance with the Adwaita theme. At some point, however, you’ll probably get the itch to try and create a custom theme yourself. Ambitious to say the least. The problem is that it’s not exactly clear how to go about doing that. In fact, I’m still looking into how to do this for myself.

However all is not lost. For there do exist on the internet a vast collection of Shell themes, GTK3 themes, icon themes, fonts, sounds; literally everything you need to really make your desktop experience your own. What I wanted to do was share my current desktop and show you how I went about bringing it to that point. Be forewarned that the background image is NSFW and if you don’t like it, you can go fuck yourself.

Desktop Screen Capture
My default GNOME 3 desktop

Here’s a view of Nautilus

Nautilus Screen Capture
Nautilus using Tree View in the Sidepane

And here’s Rhythmbox (mainly to show off the GTK3 theme)

Rhythmbox Screen Capture

So here’s what we have going on here.

  • The GNOME Shell theme is Nord
  • The GTK3 theme is FlatStudio (there are four variants available; I’m using the Light version)
  • The icon theme is ALLBLACK
  • The font is Roboto (The same font used on modern versions of Android)

Let’s start the process.

Before you start downloading anything to customize with, you’ll need to get a few packages. You’ll want to download the gnome-tweak-tool package. It’s important that you check to make sure that when you download it that it brings along with it the gnome-shell-extension-common and gnome-shell-extension-user-theme packages; it usually does these days. If it doesn’t, you’ll have to manually install those packages.

GNOME Tweak Tool is a pretty nifty tool that will help you customize GNOME Shell/GTK with very little effort (which is what we want). The other two packages are for enabling the use of custom extensions with GNOME Shell and a specific extension that will allow you to use custom themes on the Shell. It’s pretty straightforward.

Once you have those installed, you can start downloading all of the themes, icons and fonts that you want. You just need to know where those assets need to go after they’re all downloaded.

Technically speaking, there are two places you can move your assets to so that they’re visible to GNOME. If you’re on a single-user computer, it really doesn’t matter where you put them. However if you’re on a computer that has multiple users, it will matter if you’re concerned about providing other users aside from yourself access to those assets so that they can customize their DE.

The “single-user” way (it may be more accurate to say this is the user-private way) is to simply move the assets into hidden directories under your home directory. There’s a good chance that these directories don’t already exist so you’ll have to make them. Here’s where things should go:

  • GNOME Shell/GTK Themes – ~/.themes
  • Icon Themes – ~/.icons
  • Fonts – ~/.fonts

Remember that in order to check to see if these directories exist, you’ll either need to use ls -a from bash or use Control+H in Nautilus.

The other method requires that you have root permissions. On a computer with multiple users, this should be an issue if you’re the administrator. If you’re not, then you can’t place those assets in these directories and you’ll have to resort to the user-private way.

  • GNOME Shell/GTK Themes – /usr/share/themes
  • Icon Themes – /usr/share/icons
  • Fonts – /usr/share/fonts

As I mentioned before, using this method will make these assets available to all users on a single computer. Or if you just feel more comfortable having these assets in a root-protected directory or if you’re running a self-imposed quota on your home directory, this would be where they’d go.

Once the assets are moved, they should immediately be available to GNOME thus making them available to the Tweak Tool. To open the Tweak Tool, you can go through Shell and type “Advanced Settings”. Or you can open it up through bash by using gnome-tweak-tool & (the & makes the process run in the background).

If this is the first time you’ve run the Tweak Tool, there’s a small process that you’ll need to go though before you can start customizing the Shell. By default, the use of Shell Extensions is disabled which we don’t want. The screenshot below shows the Shell Extensions section and while mine shows that it’s on, first timers will probably see that it’s off. You’ll need to toggle that on and then restart GNOME Shell (Alt+F2, type the letter ‘r’, then press Enter). You may want to restart the Tweak Tool as well just to be safe.

GNOME Tweak Tool - Shell Extensions Enabled
GNOME Tweak Tool – Shell Extensions Enabled

Now you’ll want to open the Tweak Tool again and if you check the Shell Extensions section, you should see that it’s toggled on. Now you can start making changes to your Shell/GTK themes under the Theme section. I have my current configuration shown below. See the very last combobox at the bottom labeled “Shell Theme”? If we hadn’t enabled the User Themes Extension in the previous step, this combobox would be disabled and you wouldn’t be able to use custom themes on the Shell. You still would’ve been able to make changes to GTK, fonts and the icons.

GNOME Tweak Tool - My Current Configuration
GNOME Tweak Tool – My Current Configuration

It really is as simple as that. Hopefully before too long I’ll be able to figure out how to go about creating a custom theme and can share those experiences here. Any questions, please feel free to leave them in the comments below!

The Shopper – Questions, Questions

This morning I was able to complete another critical portion of the feature set: item deletion. It now works for either single or batched deletion. In other words, you can delete either single or multiple items in one fell swoop. Of course, there’s no way to undo this but I’m not too concerned about that right now.

Something struck me though. The original version of The Shopper had a visible dynamic calculator. As the user added, deleted, and edited items, the calculator would display the cost with and without sales tax applied. It also showed the total number of items in the list. More accurately, it showed the total of items that should be in your buggy (it counted item quantities rather than strictly the number of items in the list). I thought this was a really useful feature but for some reason or another, when I was drawing the initial UI design drafts for the current version, it never made it in. It still isn’t in there.

In fact, the degree to which it’s missing is evident in code as well. There are no accommodations for calculating a running total for the items currently existing in the list. None.

This might be a little bit of a problem. Adapting the code that calculates these values from the old code base isn’t a problem. I just need to figure out where the hell to put the calculator at. Originally, it was below the list of items (as shown below). I’m thinking that maybe it should go there again? Or maybe above the list? I’m not sure.

The Shopper v1.0 showing the dynamic calculator below the list contents

So here’s another screenshot showing the current iteration in landscape mode. Any thoughts?

A Quick Thought on Android UI Themes

Right now I’m sitting in the dentist office lobby and decided to jot some thoughts down while killing time.

Earlier today I was showing off the latest version of The Shopper to a few friends of mine. If you follow me on Google+ you may have seen about a week ago ago that I posted a few screenshots of the app with the new UI optimized for tablets. The major difference is that it adheres more closely to the design guidelines provided by Google with modifications only to the colors used.

Surprisingly each of them agreed that it looks sharp and way better than the previous version. Even my girlfriend, who is my primary test user, said that she’s much happier with this layout design and prefers it.

This got me wondering about UI design for mobile as a whole. It’s always interesting to design your own UI theme but is it really necessary in most cases? I’m not talking about developing custom widgets but more toward themes and skinning.

I’ve used a few apps where skinning was possible and it’s always felt a little flaky. There are usually a handful of skins the user can choose from and some just look like total shit. I guess I’m wondering where it is a designer draws the line and says enough is enough.

I think it’s different for solo developers like myself who are the entire team in one: designer, developer, marketer, etc… Personally I’d rather cop out as easily as I can with UI such that I’m not spending a month working on custom art for widgets. So I’m more inclined to stick to design guidelines. We’re not necessarily designers by trade so the recognition of where to stop with theming might not be as obvious.

Does that mean we can’t make beautiful looking apps? I don’t think so. But I do think that it’s easier for people like me to go into overkill with the UI design. With The Shopper, I’ve been skirting around the UI carefully which is in stark contrast to how I did it last time. Maybe this is the better way to go?