Question

I have a few issues and questions regarding some UI development on Android. Firstly look at this image:

Firstly at image A) This is a image that I insert and repeat horizontally to give the zig-zag shape at the top of the screen regardless of screensize and above that a textField with no content and a background color – But as I’m sure you can is that the two colors don’t match up quite as perfectly as it should even though they both have the same hex color value (#BF0426). And secondly, you can also see some serious pixelation on that zig-zag image. How do I fix these 2 problems?

And then at image B) Here I have a simple listView. What I would like to do, is firstly indent it a bit on both sides, and round the corners of the top and bottom item. So basically I want it to look like the blue border drawn on the screenshot. (Your typical iOS listView). How do I go about doing this?

Thanks in advance for any tips!

Answer 1

For the image. Just out of curiosity, why wouldnt you simply extend your image to include the top pixels as well? In other words, build your repeating image such that it incorporates the pixels that you are trying to create using the empty textview. This will at least take care of the color missmatch, as the color will all be generated from the same place. In terms of the pixelation. Are you truly repeating the image, or are you spreading the image. A spreading will definitely cause what you are seeing.

For your tableview:
For the left and right indent, you can simply use the margin or padding attributes of tableview item. There are generic padding and/or margin attributes (which will pad all of the top, bottom, left and right), or there are separate padding and/or margin attributes for each top, bottom, left, and right. Here is a great link on padding versus margin that you may want to read.

Difference between a View's Padding and Margin

Example attribute (as called in an XML file) for bottom margin

android:layout_marginBottom
setMargins(left, top, right, bottom) // for setting margins programmatically

Example attribute (as called in an XML file) for top padding

android:paddingTop
setPadding(left, top, right, bottom) // for setting padding programmatically

For the custom top and bottom, you should be able to use the following tutorial

http://www.softwarepassion.com/android-series-custom-listview-items-and-adapters/

From here, you should be able to detect the item as the first and last item and set the background property (image) to a background image that has a rounded top or rounded bottom. This is how I do it on the iPhone. I have also implemented things that LOOK like tableviews but are simply vertical layouts with my own custom views that I have made to look like what you are wanting.