Develop Reference

EditText Rounded corners look different on Low Res devices

This feels like a silly question, but i'm still a bit of a noob so....
I'm trying to get my EditText to look like this:
And it works fine on most devices, using this as a background for the editText:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_button.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#color/colorTextfield"/>
<corners
android:bottomRightRadius="40dp"
android:bottomLeftRadius="40dp"
android:topLeftRadius="40dp"
android:topRightRadius="40dp"/>
</shape>
However, on some devices (I have an old, low-res testing device here) I get this instead:
Note how the edges are super stretched. It really doesn't look nice. I'm guessing the one solution is to make a style file especially for low-res devices (I'll try that in the meantime), but I was wondering if there was a better way to do this, without having multiple files in which I need to guess what the radius should be for each res. I only have a limited amount of testing devices, and I'm worried I get it wrong.

Android GridLayout - How to increase the spacing between columns or rows?

This is just a portion of the background image. I have a gridlayout with 4 rows and 3 columns. These buttons in the layout (included just 3 for now) need to superimpose a background image which has a numeric keypad. I need to put the buttons exactly to fit these parts of image which have the numbers and will then make it transparent, so clicking on a number corresponds to clicking the actual button. Tried several methods but to no avail. I am not able to exactly fit them. Increasing the spacing between might help but just not able to get at it. Could someone please help? Thanks!

It will be exceedingly difficult to make sure the buttons fit the superimposed image exactly on devices with different screen sizes and different pixel densities. You are much better off having the user tap on the button itself. Use white for the text color and make a single rounded rectangle to use as the background of each button.
In src/main/res/drawable/orange_round_rect.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#color/orange_button" />
</shape>
Anything that isn't the button can be added elsewhere, e.g. as a background of the GridLayout.

shape corner rendering (in app widget RemoteView) - strange failure on Sony Xperia tab

Building an app widget using RemoteViews, I'm using a pair of TextViews to create a toggle style button.
I use this method on the remote views object to dynamically change the background of each TextView (as a response to click event - wired up using the recommended setPendingIntentTemplate + setOnClickFillInIntent methods as this is within a collection view item):
setInt(R.id.toggle_left, "setBackgroundResource",
R.drawable.widget_toggle_left_on)
setInt(R.id.toggle_right, "setBackgroundResource",
R.drawable.widget_toggle_right_off)
(these calls are made from the adapter RemoteViewsService.RemoteViewsFactory "getViewAt" method)
The drawable is just a simple Shape (rectangle) with a solid color and corner radii specified.
Yes I'm aware of what Android documentation says about corner specification:
"Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner..."
e.g. in widget_toggle_left_on.xml -
<corners
android:radius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp"/>
This all works fine on several devices EXCEPT a Sony Xperia tablet (4.4.2, note other devices running this version don't have a problem)
The toggle button sometimes (doesn't seem to be a pattern) gets rendered incorrectly e.g. the left and the right toggle buttons are rendered with the same "solid" colour ("left" and "right" drawables have "off" and "on" versions that have different color) even though the code outputs suggest nothing is wrong. Typically the toggle button works for a few successive click events but then screws up. In fact, there are two pairs of toggle buttons (TextViews), and sometimes clicking on one pair changes the background on the other!
logcat gives no errors
removing the "corners" from the shape drawables fixes the issue!
Such a specific context I'm not hopeful anyone will know what's going on here (apologies if you prefer to see lots of code) but just wondering whether anyone had seen similar device specific shape rendering weirdness and/or any guesses to try some kind of work around?! Thanks

Android how to do intricate backgrounds and borders

I want to do intricate borders in my android popups like I see on the ipad.
example:
What I see here is a thick gradient blue border with alpha transparency at the top. As well as a drop shadow extending further from the background.
In android I've tried using shape objects for doing semi intricate backgrounds. This is just a white border.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#303030"/>
<stroke
android:width="1dip"
android:color="#ffffff"
/>
</shape>
but these are limited in that they can't accept images as variables here. I guess it would be awfully complex to do these kind of borders in Android. Like perhaps make a relativelayout or tables with the views having the pieces of the background. Kind of like an HTML layout.
Is there a better way to do complex and intricate borders in android? I'd like to make a polished skin kind of like how iOS has that one default that has a uniform aesthetic for iOS.

Yes it is complicated, but the good thing is you can reuse the layout you draw for all the components in your application, so you basically only have to do it once for each "style".
Here are a few pointers in which I've learned a lot about styling Android:
http://blog.donnfelker.com/2011/08/01/android-rounded-corners-with-a-beveldrop-shadow/
http://blog.stylingandroid.com/archives/378
Custom ImageView with drop shadow
Android: Using linear gradient as background looks banded
And here is the 9-patch image I use for drop-shadow (I think it's taken from one of the posts above)

Glossy gradient with android drawable xml

I'm trying to bring out a glossy xml drawable gradient as a background to a layout. I am already using the start color and end color boring linear gradient.
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#242424"
android:endColor="#4e4e4e"
android:type="linear" />
</shape>
</item>
Is there any way to control its range of flow? Please some one help.
Edited:
Ok, I have done a little hack around method to get a nice glossy looking title bar,
Linear Layout (with a gradation - drawable background, specifying all
the start and end color values separately) Over this are the icons, (I
used Image buttons with transparent BG), and over this another Relative Layout (with may
be a drawable gradient or a fixed, grey color - for glossiness -
android:background="#20f0f0f0" ) Here 20 is defining the Alpha value.
P.S, This might not be a correct work around, but I'm quiet satisfied with this because switching themes according to clients needs is much faster when compared to 9 patch PNG files (hey, BTW this is just my opinion on it)
And this link is so informative on this,

you cant control its range of flow but instead you can use another property centerColor.
you should try the center color Property in gradient for glossy background.
i used this in my application .
<gradient
android:startColor="#FFF7F7F7"
android:centerColor="#FFCECFCE"
android:endColor="#FFBEBEBE"
android:angle="270"/>
hope this will work for you