EditText Rounded corners look different on Low Res devices - android

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.

Related

Android drawable background doesn't show on devices

I want to give to a TextView a background. This background (classement_background.xml) is a drawable located in res/drawable.
Here's its code :
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="ring"
xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:startColor="#ff648add"
android:endColor="#ff3656dd"
android:type="linear"
/>
</shape>
In the render window of the layout file, my background is set. (Android studio)
But for some reason, this drawable is not there anymore on a genymotion emulator nor an actual device.
I've been trying quite a few things (like making sure it isn't the first element in the drawable folder), but I can't figure out what's going on. Any thoughts ?
Here's the code from the textview itself : `
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E2"
android:id="#+id/classement"
android:layout_below="#+id/firstname"
android:layout_centerHorizontal="true"
android:textSize="85dp"
android:layout_marginTop="15dp"
android:padding="30dp"
android:background="#drawable/classement_background"
android:textColor="#android:color/white"/>`
Add the android:useLevel="false" attribute to your shape tag. My IDE didn't display your shape in its preview window until I added it.
According to the docs:
android:useLevel
Boolean. "true" if this is used as a LevelListDrawable. This should normally be "false" or your shape may not appear.
Try to set android:thickness for the shape. Maybe android doesn't provide a default thickness for the xml drawables.
Maybe I will post something, that helped me.
My backgroung id 1920x1920 pixels and display 1920x1080, so different size shouldn't be the problem.
I suppose that you have your background putted in some resource "drawable" folder (for example in drawable-hdpi) in Eclipse IDE. I had that either and on real device (Sony Xperia Z2) I haven't seen nothing.
Short answer:
I had to add my desired backgroung to every single drawable folder - drawable-ldpi, drawable-xxhdpi, ...
After this strange operation Sony finally recognized my backroung and accepted it. :-)
I hope this will help somebody.

creating a gradient with certain effects in android

I understand how to create gradients using start color, end color, etc like below:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:type="radial" android:gradientRadius="260"
android:startColor="#A74171" android:endColor="#690136"/>
</shape>
But I dont understand how to bring about more complex effects. For Eg:- I am faced with a task of making a textview look like a button where it will look a little raised at the center, something like the image attached .
How can such an effect be brought by code without using images?
Here's the good news: Something like the button, shown in the picture, already exists. Maybe in other colors, but with a little painting you should get there easily. Check out the design downloads
When there're good news, than there might be some news with - lets say - more work involved. This link to Drawable Resource gives you an overview of what is possible with XML.
When you get out of XML possibilities, you must create your own Drawable, which is described here which is extremely powerful.
You can always paint your own drawings, load them as bitmap and use them. There you must be very sensitive on the size of the bitmap and the good looking (painted with enough pixels). I mysef have not found the right mix up to now.
All in all, in my experience, even the most complex XML drawables are quite efficient, whereas my own Drawables, painted at runtime are always a cause for lagging on the UI-Thread.

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)

Is it possible to dither a gradient drawable?

I'm using the following drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient
android:startColor="#color/content_background_gradient_start"
android:endColor="#color/content_background_gradient_end"
android:angle="270"
/>
</shape>
The problem is that I get severe banding on hdpi devices (like the Nexus One and Droid) since the gradient goes from the top of the screen to the very bottom.
According to http://idunnolol.com/android/drawables.html#shape_gradient there isn't a "dither" attribute for a gradient. Is there anything I can do to smooth the gradient?
Note: adding dither="true" to shape doesn't seem to work.
I wrote the documentation you referenced. I've taken another look at the code and unfortunately there's no way to enable dithering on a GradientDrawable except by explicitly calling GradientDrawable.setDither() in code.
(The way the codes looks, technically you could include the Gradient as the only child of a <selector>, and enable dithering on the entire selector; however, it's definitely a hack.)
I'm not convinced enabling dithering will actually solve your problem, as dithering (at least as it's noted in the official Android docs) are for solving banding problems when the device has too small of a color palette. This seems to be a banding problem due to the size of the gradient.
Hi all i have the same problem, there is one solution which works but it's not very good.
getWindow().setFormat(PixelFormat.RGBA_8888);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DITHER);
It works for me but the problem is that the whole windows is dithered. I was looking to find a way to dither only the gradient but i couldn't find anything. android:dither="true" in xml is not working and GradientDrawable.setDither(true) is also not working. So any ideas how can i dither only the gradient ?
I faced a very similar problem last year and came to no useful conclusion on the android-developers list.
However, a while ago I discovered — after trying <gradient> and all sorts of Drawables with various dither attributes and manually creating dithered PNGs — that if I manually create a new image using GIMP, and specify the density at this point (i.e. explicitly entering 120, or 240 etc) when creating the image, it looks great, even on hdpi devices. And this is despite it being a grayscale gradient, with not so many colours.
The PNG when saved ends up being comparatively large (at least for 240dpi), but it looks great.

Android view dithering

As you can see from the screenshot below, the "titlebar" is getting these ugly banding lines across the areas with text that extend the entire width of the screen. It's even more noticeable on a real device.
Is there any way to work around this?
From Android Developers: Widget Design Guidelines:
In some cases, devices have low pixel
depths that can cause visual banding
and dithering issues. To solve this,
application developers should pass
assets through a "proxy" drawable
defined as XML:. This technique
references the original artwork, in
this case "background.9.png", and
instructs the device to dither it as
needed.
EDIT:
Example source. This is an xml file in your res/drawables directory:
<?xml version="1.0" encoding="UTF-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/title_bar_medium"
android:dither="true" />
Add android:tileMode="repeat" in this code, like this -
<?xml version="1.0" encoding="UTF-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/b1"
android:tileMode="repeat"
android:dither="true" />
Reason is, on some devices it still stretches the image and it looks pretty bad, check this
Reference here

Categories

Resources