Changed message bubble appearance

[eiszfuchs]

WORK IN PROGRESS - OPEN DISCUSSION

Okay, I know this is a difficult topic and most of the changes are a matter of taste. I'm preparing this pull request (so don't merge this in yet) and I am willing to work on it as long as I still have got the feeling the changes have a good chance to make it into the final app.

Older example screenshot (Composed of three screenshots)

What I tried to do was to improve the overall message layouts in a way that would emphasize incoming messages and provide the user with a much modern overall appearance - without changing the code too much. I also tried to equalize margins and paddings.
I made these changes because I - personally - couldn't stand the grey border and dull colors for much longer and I just had enough drive to make the changes by myself, because I believe that's the only way to achieve anything at all.
I have yet to check what happens to inline images.

• I am willing to discuss my changes.
• I am willing to work on fixes if needed.
• I am willing to change details.

Changes could also include settings that would control the "new look".

This is my first contribution to a foreign project ever and if I did anything wrong, I'm doing this to learn, too. I already learned so much and I would be glad to learn even more, so yay!

Open tasks:

• Create and post example screenshots
• Fix issue with recycled views (message font color)
• Inline images are scaled/cropped weirdly
• Full-width messages
• Let profile images breathe
• Rethink error states
• Black locks on incoming messages
• Don't use alpha channel for message text colors
• Try to find a less saturated incoming (dynamic?) color
• Fix incoming link colors
• Make rounded corners half as big
• Fix transparency on drop shadows (please be subtle)

[iNPUTmice]

Hi,

thank you for your participation. I will wait for any comments on the actual design until you uploaded some screenshots.

When making the changes, I had to make two changes to the code itself, because message body text colors got set there, instead of using the one that was defined in the layout XML. I don't know if that breaks anything, because I couldn't yet reproduce errors that would lead to red text colors.

This will break due do the view recycler. Once you get one red message all messages that use the same view object in the future will also have red text unless you change the text color problematically.

Also could you rebase this? This pull request would be a lot easier to review if it wouldn't include my own commits. Thank you.

[eiszfuchs]

Okay, I had to walk through a guide, but I managed to rebase my branch. I will add things I need to resolve to my first comment to keep this request up-to-date.

[eiszfuchs]

Hey, I posted a link to an example screenshot and fixed my changes for text colors. Might add a smaller example later to embed that here right away. I figured it would be appropriate to show every type of message for each side.
I have yet to investigate a problem with images, if that is a problem I introduced.

[ghost]

I like it.

[iNPUTmice]

Hi,

thank you for your work. This is looking good.

Two comments so far. I think the chat bubbles shouldn't be aligned vertically but instead span the entire width. If not for personal preference then at least to fit more text on smaller screens.

I'm not a huge fan of how the bubble over lays the avatar. I think there should rather be a small space between the bubble and the avatar.

I might come up with some more comments later on. I think we need to somehow rethink the warning color thing because I doubt red on green will look good.

[eiszfuchs]

Yeah, I can see your point. Will remove the empty space when I've got the time.
About the bubbles laying over the avatar, they could easily be shifted to make a little gap or I'd swap avatar and message box again, so the profile image is above the bubble, that would make space for text again.

Red on green sure will look awful. In which case could there be an error with incoming messages, so I could try to come up with something/reproduce?

[SamWhited]

Looks pretty good; my thoughts effectively align with Daniel's. I'd also like to see the little "tails" on the messages removed in general. The "chat bubble" feel always seemed a bit silly to me, and just wastes space. Having the avatar at the top of the rectangle is enough to identify that the text block is associated with that avatar, a chat bubble tail just feels extraneous. Getting rid of it might give us more of a "cards" like view (which is what the Google design docs tend to do for things like this).

[eiszfuchs]

As I said, this topic is a bit controversial. As with most things that are a matter of taste, I think, I'm better off preparing a variety of different "bubbles"/borders (classic, bubble, card ...) for messages from which the user may chose then. Would that be an (no pun intented) option?
If I'm introducing a new option, though, I will make the classic look the default (that is a pattern I like most).

[strb]

I like the direction you're going for, nice job! Thanks for contributing.

I personally kinda like the chat bubbles. It is a more playful look for sure, but I feel like a "cards" look would just feel kinda disconnected here. While it's not technically needed to deduce - even at a glance - the association between text and avatar, I feel like those "tails" tie everything together in a nice way.

I don't really mind the fact that they're overlaying the avatar, although I much prefer the way the sent message looks to how the received message looks in your screenshot. That drop shadow at the bottom edge of the message gives it a slightly more 3 dimensional feel (in the sense of the bubble being stacked on top of the avatar). This visually separates the bubble from the avatar much more clearly than is the case for the received message, where the flat look makes it feel like message and avatar are kind of blending into one another.

Those are just my two cents. I hope what I'm saying kinda makes sense I'm not a designer by stretch of the imagination...

As for introducing an option, I'm not sure making what are, essentially, kinda nitpicky details user-configurable is the way to go. That really doesn't fall in line with the general philosophy of Conversations all that well.

[SamWhited]

Adding an option for chat themes sounds cumbersome and fault prone to me. I really like your design overall, I just think the "tails" are a waste of space and feel a bit old fashioned. As you said, just an opinion, but it's also likely not something you'd see in the Google Design Guidelines, which Conversations tries to follow.

A few other suggestions after looking at this some more:

• Using an image for the background feels poor to me; not only will it not scale up well, but it makes certain properties hard to change later (eg. what if we want the corners rounded a bit more or less?)
• You might try 2dp rounded corners for chat bubbles for consistancy with other apps 1 (unless we think chat bubbles map more to tiles than cards? I'm not sure which is a better abstraction here. Other chat apps I looked at use rounded corners, in which case 2dp is probably good)
• The primary green feels a bit heavy as a message background (eg. if you have several messages that are merged you end up with a big bubble of a dark saturated color, which is somewhat overwhelming). I'm not sure what the fix for this is. Possibly a lighter accent shade of green? Light green 300 might look good, but that's just a guess. If you still want light text (probably a good thing now that I think about it), Green 600 might be good (it's dark, but also not very saturated) 2

Thanks again for taking this on; it looks like it's going to be really nice!

Finally, another thought while the theme is being modified:

I'm not sure how I feel about it yet, but TextSecure has started using different colors for different contacts (like you have when there's no avatar) as the primary / secondary colors (eg. in the action bar) and as a message background. We already hash contacts to colors when generating an avatar, maybe this is something we should think about doing too? Like I said, I'm still unsure how I feel about it (some of the color combinations work well, others just feel distracting), but it's worth thinking about.

[eiszfuchs]

I was actually inspired by TextSecure, though I didn't want to introduce round profile images nor a changing header color. I first tried to tie the incoming bubble color to what color may assigned to the contact's screen name (and I still could do that), but that didn't work well with the green header Conversations has. So I decided to take the primary brand color for that.
Changing colors at this point is fairly easy and I really don't care for white or black text on whichever type of message, I just wanted to highlight foreign messages, because I should know what I said and not get distracted by it.

The reason for I used 9-point-sliced drawables was I couldn't make my bubbles the shape I imaged them to be in without them and still support Android 4.0+.
I'd love to use SVG for assets, yet that would require even more work. In fact, I used SVG to generate the PNG images, after all, so I could make the rounded corners half as big. I also need to make the shadow more transparent, while I'm at it.

To introduce an option seemed fair to me, because I would want to have a setting for it if somebody changed such a major thing and I know there are folks out there that would prefer not to switch. We do have an option for "larger" text, after all. The discussion on tails just shows that this would be a way to have them and not have them and not forcing anyone to it.

Edit: Oh, and hey, I finally added a screenshot that is small enough!

[iNPUTmice]

Let me say one thing straight away. Making this a setting is not going to be an option as this goes against all principals of Conversations (less options) and also conflicts with branding.
However I doubt that this is going to be necessary since the overall feedback towards your changes is positive and I'm sure we can end with something that a majority of users will like.

I like the bubbles and I'm also fine with the color. (I don't think going 'dynamic' will be a good idea. The stock SMS app does this and I got the feeling that the only reason they did it was to showcase their new colored notification bar thingy)

Did you change the color of the outgoing message text? I feel like we lost some contrast there...

I still would like to see the

Let profile images breathe

maybe in a side to side comparison.

As for the 2dp rounded corners @SamWhited suggested is this going to be more or less than now? Because I'm not sure about wasting even more space.

[SamWhited]

I still would like to see the / Let profile images breathe / maybe in a side to side comparison.

I think removing the tails would do this (and simplify things because we wouldn't need a stretchy image for the background).

[iNPUTmice]

I think removing the tails would do this (and simplify things because we wouldn't need a stretchy image for the background).

These 9 patch graphics are used all over in the android world. And as long as they are generated from a SVG (more or less) automatically I don't really see a problem with it from a technological standpoint.

[SamWhited]

These 9 patch graphics are used all over in the android world. And as long as they are generated from a SVG (more or less) automatically I don't really see a problem with it from a technological standpoint.

Fair enough, just seems like added complexity to me.

Just for fun, a mockup without the tails:

and side by side:

[ghost]

Without the tails, the square avatars don't really work well with the rounded text bubbles, I think.

[eiszfuchs]

Did you change the color of the outgoing message text? I feel like we lost some contrast there...

@iNPUTmice No, I haven't. Maybe just slightly. I could easily increase contrast, though. It may have come to that when I changed link colors. Could have messed up color blends and shades.

As for the 2dp rounded corners @SamWhited suggested is this going to be more or less than now? Because I'm not sure about wasting even more space.

@iNPUTmice No, what wouldn't need more space, just change how speech bubbles would look like. These would be the two versions with 2dp:

And as long as they are generated from a SVG (more or less) automatically

@iNPUTmice Well, they are. More or less.
One could argue I had too much sugar today or I'm insane, but now changing the slices is done with a flick.

Without the tails, the square avatars don't really work well with the rounded text bubbles, I think.

@d9h02f I was thinking that, too. The tails don't cover too much of the profile image. Other apps are cutting off way more of them because they think round avatars are nice.

[iNPUTmice]

@iNPUTmice No, what wouldn't need more space, just change how speech bubbles would look like. These would be the two versions with 2dp:

My question originated from the idea that if we have a smaller radius we can move the text closer to the edge of the bubble.

I didn't explicitly mention this before but I do prefer the one with the tail.

Can we just try one where the tail does not overlay the avatar?

[iNPUTmice]

@eiszfuchs is there a reason you changed the text colors from relative values to absolute values? This will make changing the primary color unnecessary hard.

also the text color should be 87% black and not 55% (which is actually 54% maybe round error)

see: https://www.google.com/design/spec/style/color.html#color-ui-color-application for text color values.

[eiszfuchs]

I can try decreasing inner paddings and swapping profile image and bubble in the next days, yes.

Text color for sent messages actually was supposed to be the secondary text color. As mentioned earlier, one of my goals was so make sent messages visually less important. I changed all text colors to absolute values because I noticed that relative values also faded Emoji, which looked kinda funny to me.

[ghost]

if we have a smaller radius we can move the text closer to the edge of the bubble.

I think that would look worse, though. Better to have a bit of 'wasted' space than have everything cramped together.

Btw, @eiszfuchs, could you make a mockup for how this looks in group chats? Also +1 on making sent messages stand out less.

[iNPUTmice]

@eiszfuchs I kinda understand your reasoning for making the sent text color less important but I have to disagree. I've really gotten used to the high contrast text of Conversations these days compared to the washed out colors of earlier days. Also from a usability stand point it makes sense to have your own text clearly visible as well for example if you are scanning your message history looking for something in particular.

Lets use:
100% white for primary text on dark (green background), 70% white for secondary text on dark.
85% black for primary text on white background (this includes sent messages) and 54% black for secondary text on white background. This aligns with the material colors (see me link earlier) and also matches the text colors in the rest of Conversations.
Also the background of the sent message bubbles should be primarybackground (#FAFAFA) instead of #FFFFFF

this also solves the emoji problem because on green background it will just be a 100% and on white background the minimal opacity wont matter that much.

[iNPUTmice]

The primary green feels a bit heavy as a message background (eg. if you have several messages that are merged you end up with a big bubble of a dark saturated color, which is somewhat overwhelming).

When browsing through the material design spec I found this:

Bold use of color in large fields is encouraged

So besides me not personally having an issue with large green spaces we kinda have the OK from the spec to do this.

[eiszfuchs]

For sure! These two are with half as much padding, fixed text colors and swapped avatar/bubble view.

(I also updated my gist with a Python version that takes Inkscape's guidelines to generate the black slice control lines.)

[mrueg]

The triangle connecting the bubble to the avatar looks a bit odd as it's corners (the one at the obtuse angle) are not rounded, while the corners of the bubble are rounded. Maybe you could switch the straight base line of the triangle to a curved one instead?

[eiszfuchs]

Okay, how's this for rounder edges? Did I fix the right edge? (This is just for giggles; I can easily remove the roundness here.)
I also worked on margins and paddings to make them look more consistent.

(You asked for a group chat example)

Also, I believe we would like to include the SVG files later for tweaks?

[iNPUTmice]

Hi @eiszfuchs Thank you for your work. Margins/Paddings looking good on the last one.

fixed text colors and swapped avatar/bubble view.

sorry this has been a slight misunderstanding. What I meant was move the bubble away from the avatar so the tail doesn't overlap the avater. Not move the bubble underneath the avatar.

Can we see a version with a slight gap between the tail and the avatar?

Colors and padding are looking good now. (Make sure you save your progress there so we don't end up overwriting stuff by accident.

No sure how I feel about the 'rounder edges'. I think I prefer the more standard versions with the hart edges.

I'm starting to feel real good about this.

I renamed the colors in the Conversations code in ffffca1 to match the material ones. Now you have @color/white70, @color/black87, ``@color/black54` to work with.

Also I noticed that the background tinting attributes you are using are only available in API 21. You might have to change this to the support library or something.

[DoM1niC]

I love it <3 but plz fix the Issue with the API all ppl under Android 5.0 have trouble with the background tinting attributes :(

[eiszfuchs]

Okay, here's a comparison of the gap, starting at -12dp, in steps of 4dp.

Will look for pre-Lollipop tinting support now.
Also, I would like to check in the source SVG files, too. For now, I have them lying in a folder right next to main, called stash. What's the best place to store them for later use/tweaks?

[SamWhited]

Also, I would like to check in the source SVG files, too. For now, I have them lying in a folder right next to main, called stash. What's the best place to store them for later use/tweaks?

Probably /art.

Second to the last one in that screenshot looks the best IMO. Feels less cluttered without wasting too much space.

[iNPUTmice]

svg file should go into /art - your slicing script can probably be integrated into render.rb

second to last looks good to me as well.

[eiszfuchs]

Might have a look at Ruby again, but fair enough. Totally missed that folder. Will wrap things up for a commit soon. 👍

[SamWhited]

Another opinion from a friend:

the middle one [smallest non-overlapping margin in the comparison image]
you could probably get away with squeezing a pixel or two in there
floating looks better, but it needs to be close enough to make the association [between the text and the avatar / user]
I think the optimal position would be something between #3 and #4
but at that point it comes down to personal taste

[iNPUTmice]

Hi,

quick info. secondary text on dark background (ie the status line) should be white70 (not white54) and thus the lock indicator should be at 0.7 alpha.

[eiszfuchs]

Okay, will fix that with the next commit. Might have goofed a bit because I'm tired and rebasing now throws a lot of merge conflicts. Yay! 🙌

By the way, is it even possible to get backgroundTint to work on pre-Lollipop devices? I tried appcompat-v7, but that seems to tackle the header bar and some widgets, like the FAB.
It's late and I might do a bit of a research this week, but if that's never going to work, I just set the fill color of the received bubble to the right green and copy the security lock icon as well. I wanted to avoid that.

[iNPUTmice]

@eiszfuchs I haven't actually verified this but appcompat should (might?) include a LinearLayoutCompat as well. (And you can ignore all the header bar and FAB stuff)

I just set the fill color of the received bubble to the right green and copy the security lock icon as well.

This might be an option as well to avoid the overhead of pulling another library in.

[SamWhited]

@eiszfuchs You'll need support library 22.1+, so you'd need to update it in build.gradle, I think.

http://android-developers.blogspot.se/2015/04/android-support-library-221.html

[eiszfuchs]

Hey, I added the bubbles! And I made changes to the Ruby script. Phew! So much for auto-slicing. Also, I had to make a lot of changes to whitespace, because the file had mixed tab/space indentation. Boo!

What do you think?
It works just as my Python script does and might come in handy for other assets, too.

I'm still trying to figure out how this support library is supposed to work. I'm on 22.2, and have changed the type of the layout in question to android.support.v7.widget.LinearLayoutCompat where needed. Incoming messages are still white. That's unfortunate.

[iNPUTmice]

And I made changes to the Ruby script. Phew! So much for auto-slicing

ok. awesome. looking very good judging from the code. good job! Haven't actually run this yet but for now I'm just gonna trust you on that it is actually working.

I'm still trying to figure out how this support library is supposed to work. I'm on 22.2, and have changed the type of the layout in question to android.support.v7.widget.LinearLayoutCompat where needed. Incoming messages are still white.

To be honest I was kinda afraid this might happen. I haven't found any mentioning of backgroundTint in the docs.
I think we are better off just coloring that bubble directly. Now that this is part of the rendering script it's still just changing one hex value. This might actually be the lesser of two evils compared to pulling in a whole library just for this.

[eiszfuchs]

Well now! I fixed the Ruby script (was using break instead of next because I'm a dummy - also fixed some issues with ImageMagick) and ditched usage of backgroundTint, because let's be serious about that feature, it's great, but support sucks.
(Turned out -border 1 messed up my transparency values and I had to explicitly export/import PNG32 for the files to use proper channel values.)

This leaves dog feeding these changes (which I'm already doing) and coming up with something fot error messages. I'll give myself a break for a bit.

[iNPUTmice]

Thank you. If you could go ahead and squash and rebase this I'll be able to merge this tomorrow. We can figure out the warning color thing together at a later point. Probably just get rid of it for received messages entirely and indicate faulty messages differently (via italic font for example)

[iNPUTmice]

Hi.
1.5.0 is out. So I'm ready to merge when you are.
Can't wait. I'm really looking forward to this now.

[eiszfuchs]

I'm excited, too!

But I believe I messed something up. The squashed commit shows up with you as an author.
And Travis is sad, too.

... Help?

[iNPUTmice]

Not really sure. Maybe you went one step to far back in the git history?
I'm really not an git expert myself unfortunately. And I don't know what you did exactly. Here is however what I think you should have done: git reset --soft HEAD~(number of your commits). Then git add your stuff. git commit. (This combines all your commits into one.) And then git rebase development. And after that you might have to resolve some merge conflicts (or rebase conflicts)

[iNPUTmice]

Yes. You included my last commit in yours and thus I'm the author (and we get merge conflicts)

[eiszfuchs]

I will make a backup and merge that back in. Sorry. This wasn't supposed to become nasty all of a sudden.

[eiszfuchs]

Okay, now the author shows up right; but there are lint errors. Travis won't tell me which.

[iNPUTmice]

but there are lint errors

These are probably mine. Will fix them after I merged this

[eiszfuchs]

Oh, phew! I ran an code inspection for giggles, it showed 3.800 errors. I might fix some of those if I'm really bored. For now, I'm just too excited. 👍

[iNPUTmice]

or on imgur with next/prev button and original size.

I've been using this the entire day and besides my original enthusiasm (it looks nice) I'm not really sure this is practical as white on dark is hard to read... not because of the contrast. the contrast is fine. it's just irritating...

[eiszfuchs]

My first impression was that the paddings of the messages look off. Is that because I's using dp instead of sp? My device shows them way more compact.

If your concern is the overall contrast, do you think swapping the colors incoming/sent or getting rid of the green bubbles completely (which would treat all messages alike in visual means) would help?

[andersruneson]

I love the new look, great work!

Is the green color being used the primary color? I'm a bit worried that
this might look odd with other colors then green (in branded versions of
conversations) like red, pink or neon green..

/Anders
On 20 Jul 2015 09:51, "Raphael Pohl" notifications@github.com wrote:

My first impression was that the paddings of the messages look off. Is
that because I's using dp instead of sp? My device shows them way more
compact.

If your concern is the overall contrast, do you think swapping the colors
incoming/sent or getting rid of the green bubbles completely (which
would treat all messages alike in visual means) would help?

—
Reply to this email directly or view it on GitHub
#1280 (comment).

[iNPUTmice]

@eiszfuchs I changed the avatar size back to what it was before. And also made the padding resemble the old ones much closer. I didn't notice you changed that from your screenshots

@andersruneson every material color that can be used with white text on it should be fine. The stock sms app does exactly the same. (If your actionbar which has also white text) displays fine then the bubbles should not be a problem.

[iNPUTmice]

Oh this has been merged. Don't know why github didn't recognize this and closed here. Thank you