How to design this UI?

[Inman]

Of late many apps are starting to use the UI of the official Google Plus app. Here is a screenshot.

http://i.imgur.com/U4iSyRO.png

This UI can be attained using Panels and ScrollView. But what I am trying to understand is how Google provides a slight 3D embossed look for each Google Plus post in the UI. It looks like some sort of shadow around the edges of each item and it looks great.

Any idea how this is done?

 

[thedesolatesoul]

Something like this: http://www.b4x.com/forum/basic4android-share-your-creations/27368-demo-expandable-panels.html
EDIT:
Actually you want the card_background 9patch rather than search_background.

 

[Inman]

I checked your sample app for Expandable Panels class but it has a plain background and not the shadow effect. But your BackupSMS.apk file has exactly the UI I am looking for.

Could you please explain how you did it? I couldn't find search_background or card_background files in your res sub folders.

EDIT:

I read the rest of your thread and found search_bg_shadow.9.png. Fortunately a Google search also provided card_background.9.png. Let me see if I can put together the UI.

 

[Informatix]

Of late many apps are starting to use the UI of the official Google Plus app. Here is a screenshot.

http://i.imgur.com/U4iSyRO.png

This UI can be attained using Panels and ScrollView. But what I am trying to understand is how Google provides a slight 3D embossed look for each Google Plus post in the UI. It looks like some sort of shadow around the edges of each item and it looks great.

Any idea how this is done?

Basically, you have two techniques:
- using a 9-patch drawable with the shadow already drawn (that's what the Google devs use most of the time);
- drawing a shadow (a blurry rectangle with a transparency gradient) behind your main panel.

 

[Inman]

Thanks guys. I made it with technique 1 - using their own 9 patch drawable.

Another question. Is the gray color border around the panel that displays the number of user comments (which is 100 in the above screenshot) achieved using a 9 patch as well? I couldn't find any direct options to add a border. There is a function posted in the forums that adds a border by drawing a rectangle around the view using canvas but it won't work for rounded rectangles.

 

[thedesolatesoul]

There are many ways to do it. I would probably do it using a 9patch. Before I used to use canvas, but its not the most efficient, and sometimes a cause for OOM.

 

[Inman]

I think I found the relevant PNG file from Google Plus apk.

http://i.imgur.com/B1KG7RJ.png

The filename is btn_white.9.png, so I assumed it is a 9 patch PNG file. But when I tried it with the SetNinePatchView function, I get the following error during compilation.

ERROR: 9-patch image res\drawable\btn_white.9.png malformed.
       Frame pixels must be either solid or transparent (not intermediate alphas).
       Found at pixel #4 along top edge.
ERROR: Failure processing PNG image res\drawable\btn_white.9.png

If it is not a valid 9 patch file, I wonder how Google is using it.

 

[thedesolatesoul]

Sometimes I have the same problem when extracting a 9patch from such a source. I just re-draw the borders and save it as a 9-patch again.
Try extracting it some different ways, it is 9-patch but some times extracting changes it.

 

[Inman]

Looks like Google has made some slight changes to their Card UI. The above screenshot is from the latest version of the YouTube app. The shadow at the bottom is not as thick as it used to be and the cards now have some sort of a border around.

Previously it was done using a 9-patch image for the background, but I am not sure if that is the case now. I decompiled the YouTube apk file and checked its resource folder. There are many 9-patch files but I couldn't find the right one. The drawables folder also contains some XML files, which might be how Google draws it.

I have uploaded the contents of the res folder of YouTube apk. Could you please take a look and see if you can find out how Google does this UI?

https://mega.co.nz/#!DhBDUKCI!zKvKJzSNPOrykiypHGvOGwE56-IrsaMLHnvZ_vJFY1w

 

[thedesolatesoul]

Its called card_frame.9.png in the drawable-mdpi and those kind of folders.

 

[Inman]

Great. Thank you.

You are our resident Card UI expert

 

[thedesolatesoul]

I was also working on CardUI framework to make adding removing cards easy. But I havent had time to work on that for a while and there are some things I havent figured out how to do (swiping out cards/animating them in)

 

[Inman]

That's great. I hope you will get time to implement this framework successfully.