Split Contacts List (Optional)

A couple of people were asking me for something like SlidingMenu, but it think SlidingMenu can get a bit difficult for some people to use. What I’ve done is created something similar to Google Play’s partial fragment screen. I”m not entirely sure how other people are doing it, but I got it to work pretty reliably without a major hassle with ViewGroups and the like. Let me start off by reiterating that almost all display options on the application are optional.

By default, I believe I’ll set the margin between 48dp and 96dp (so… 72dp?). For this example, I’m showing the the Light theme, which is pretty much the same thing as the dark theme, with the opposite Holo colors (instead of holo_blue_light, holo_blue_dark). I’m not sure if it’s as pretty as dark. Maybe it’s the colors or just the fact I prefer black. Maybe it’s the fact, by default Light background doesn’t use a gradient for a background.

I’m setting the dp to 144dp to really show off the effect. I’ve written a custom SeekBarPreference and it looks like this:

Screenshot_2013-02-28-16-42-48

The minimum is 0dp (off), max is 192dp and increments are 8dp.

The XML for this preference is written like this:

<org.shortfuse.hermes.SeekBarPreference
  android:defaultValue="0"
  android:key="pfContactsListRightMargin"
  android:max="192"
  android:text="dp"
  android:title="@string/pfContactsListRightMargin_title"
  seekBar:increment="8"
  seekBar:min="0" />

So it’ll pretty easy to make a seekable preference from now on.

Here’s how it looks in portrait view. Just remember I’m exaggerating here for effect.

split contacts screen

Here’s with the option off and in dark:
contactsfullwidthdark

The color on the right hand side of the contact is the “Unread Indicator.” I figure having the number of unread messages seems kind of silly, since regardless, when you flick over, they will be marked red. The color is based on the IM service. Seems silly now for just SMS and GVoice, but when you start adding more services it won’t be as needlessly colorful. I’m not sure if I want to move this to the immediate right of the contacts icon instead all the way on the lefthand, since I don’t like the colors clashing on the right hand side.

I just realized I haven’t considered putting the last message time in the contacts list.

Oh well, I’ll think of something.

Mock ups and suggestions welcome.

Edit: Portrait is okay, but totally awesome on landscape. I also moved the color indicator to the other side with gray as no new messages. Check it out:

landscape split contacts

You can manipulate both lists simultaneously. Slide to the right and you’ll see the text entry box like in the other pictures.

This means forwarding messages is going to be a lot easier, since you can select/copy messages on the right and hold and “paste & send” to the contacts on the left.

You just slide to the right to get to your edit box.

landscape split motion

And finally you’ll reach your normal messaging window:

landscape split end

8 thoughts on “Split Contacts List (Optional)

  1. Korben

    I’m confused. I’m not entirely sure what I’m looking at. It looks backwards (why would I want to see parts of a conversation but my whole contact list?) So on the light image (with the split) when I slide over to the messages the messages will be fully visible and the contact list will be partially visible? Then when I slide to other messages that contact list will remain partially visible?

    Reply
    1. ShortFuse Post author

      Just think of as, the Contact view is 500 pixels and all Conversations are 800pixels.

      The conversation window is full width while contacts one isn’t.

      Something like this: http://munday.ws/wp-content/uploads/2012/07/sliding-menu2.png.

      It would be interesting to use something like this in a landscape and still allow you to interface with both fragments (essentially how most tablet layouts work). The only difference here is I can make a lot of adjustments where most UI systems can’t.

      Picture this in landscape. Instead of a landscape view of all your Contacts (with wasted space), you have have contacts on the left and your first conversation item on the right. Swipe over and the first conversation will go fullscreen, allowing to access the text input.

      It’s also for people to notice that you can slide to keep going. It’s a way to avoid having to explicitly state: “Slide to the right”.

      Now that I think of it, I might make this option landscape only and use what sliding system I was mentioning.

      Reply
      1. izokronus

        I think making it landscape only (on phones) is a good idea, simply because there’s not enough room on screen to make the columns look good, at least from what I could imagine, without changing the DPI or running ParanoidAndroid. I think leaving the option on phablets/tablets would be good though, much like how the official gmail app works.

        Reply
        1. ShortFuse Post author

          Yeah, I inadvertently created and finished the tablet UI. I tested it on my Note 10.1 and it works great.

          The official GMail app doesn’t do what this does. The gmail app opens another activity when you click something. Also when you slide, it’s slide to delete/archive

          Reply
  2. Muze

    I think this would work fine in portrait mode, It’s simplified from how Sliding Messaging does it and that looks fine. As with the rest though it’ll probably be an option, right?

    Reply
    1. ShortFuse Post author

      Sliding Messaging just used https://github.com/jfeinstein10/SlidingMenu . I wrote this implementation from scratch so you probably won’t find an app that has it. I prefer this because it’s still a fragment that can updated and modified with all the advanced features. Also, it follows the regular paradigm of a ViewPager.

      I’m not sure if it’s required but SlidingMenu has you pull from the edge of the screen which, I believe, isn’t intuitive.

      Reply
      1. Muze

        Ok, I guess what I’m asking is will we be able to slide to contacts from any message, or must we be in the leftmost conversation?

        Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>