I have a list view structure, with Relative layout that uses
alternating background images for odd/even elements. I'm trying to set
the background drawable dynamically by calculating the position. It
worked fine with the normal bitmap. But when I tried to use the
ninepatch image it breaks the UI, all the elements get distorted. What
am I doing wrong? Could it be how the ninepatch image is created or is
there a different way to use a ninepatch image compared to a normal
bitmap.
My List View XML goes like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/id01"
android:background="#drawable/my_9patch_bg_image">
<ImageView />
<RelativeLayout>
<ImageView />
<TextView />
<TextView />
</RelativeLayout>
</RelativeLayout>
May be the solution here might work for my problem. It's exact though I have to try it.
Since nobody answered you for a year now...
I had the same issue you need to setpadding of zero (even if you don't need it).
Good luck.
You can use nine patch in the same way you use a normal drawable. I assume you have a problem with the 9 patch itself. In the /tools directory of your android sdk you have the draw 9 patch tool. It will help you to correct your 9 patch drawable and to preview it for different sizes of your view.
select all sides except corners as the stretching edges
you can use this xml as background to show as cardview.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:dither="true" android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#e2e2e2" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:dither="true" android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#color/white" />
</shape>
</item>
Related
I am trying to make a circle progressbar that looks like a snake.
In my phone, it looks exactly like I want:
Yet, Android Studio shows something very different:
That is, the "head" of the snake is stretched, out of center... I am afraid that Android will show different drawables in different phones. How to solve this?
This is the progress_gradient.xml of the drawable that I placed in res > drawables (I came out to this after several tries and errors in my phone):
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720">
<layer-list>
<item>
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="30"
android:useLevel="false">
<size
android:width="100sp"
android:height="100sp" />
<gradient
android:angle="0"
android:endColor="#9ac14e"
android:startColor="#android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
</item>
<item
android:left="82sp"
android:right="16dp"
android:top="47sp"
android:bottom="45sp"
>
<shape
android:shape="oval" >
<solid android:color="#9ac14e"/>
<size
android:width="1sp"
android:height="5sp" />
</shape>
</item>
</layer-list>
</rotate>
And this is how I load it in the layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical">
...
<ProgressBar
android:id="#+id/waitcircle"
android:layout_width="100sp"
android:layout_height="100sp"
android:layout_marginTop="50dp"
android:layout_gravity="center_horizontal"
android:indeterminate="true"
android:indeterminateDrawable="#drawable/progress_gradient"/>
</LinearLayout>
It looks like the "head" is being overdrawn by the tail. The missing chunk matches the area where the tail is drawn. If the head was drawn first and the tail was drawn over it without transparency, this is what I'd expect to see.
Android Studio and the device have different drawing systems. When they don't agree, assume you'll see the device's version. However for something like this I would test on a variety of OS versions to double check, this is the kind of thing where a tweak to the implementation of the drawable subsystem could break things for you.
As an aside- I'm not sure I would have gone with an xml drawable for this. If you really want to control how it looks, I would have gone with either a vector drawable or a png image.
One other possible problem in your code- you have a mix of sp and dp sizes in your "head". Those are different things. If someone with bad eyesight has the text a bit bigger, it will break you. Use one or the other. For this, it should be exclusively dp- there's no reason to scale this based on text size.
I have a RelativeLayout. I wanted to apply a shadow effect on it, so I defined a custom background (updatebg.xml):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background" >
<shape android:shape="rectangle">
<solid android:color="#449966"/>
</shape>
</item>
<item android:id="#+id/shadow">
<bitmap android:src="#drawable/shadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</item>
</layer-list>
And the RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/layoutP"
android:background="#drawable/updatebg"
>
</RelativeLayout>
Everything works great, except that the RelativeLayout gets stretched to the same height as the background image height (shadow). If I have content inside the RelativeLayout that takes less height than the height of the shadow background image, then the RelativeLayout will be stretched to "wrap around the background" as well, instead of wrapping around just the content inside RelativeLayout.
I need for the background image to ether adjust to the parents height (RelativeLayout) or get cropped off. Any hints on how to accomplish this? Thanks!
I'm trying to apply the gradient type of shadow from top to bottom:
Edit
Maybe I have misunderstood what you said "shadow effect", if you just want a gradient, use <gradient> drawable.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/background" >
<shape android:shape="rectangle">
<solid android:color="#449966"/>
</shape>
</item>
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#7fffffff"
android:startColor="#7f000000" />
</shape>
</item>
</layer-list>
The result is like:
Original Answer
You should consider using a 9-Patch png instead. It's like this:
It's just a normal png image but with some addition markers (the black points/lines on the borders), and Android will use these markers to stretch the image as you want.
For more details about how to use the 9-Patch file, see the official docs.
Image View background reflect only inside the circle not outside the circle.
I tried so many things but not able do that.
Anybody please me.
Thanks!!
Make an .xml file in drawable folder with this content:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#color/black"/>
</shape>
Then set this file as your background.
circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<size android:width="50dp"
android:height="50dp"/>
<stroke
android:width="3dp"
android:color="#color/black"/>
<solid android:color="#color/black"/>
</shape>
in ImageView
add this in
android:background="#drawable/circle"
thank you everyone for the help.
This code is working as I want.
thank You!!
I guess you're using CircularImageView custom imageview class to make it circular. That's why background it getting apllied in cicular region only.
To solve it, do something like this,
<LineaLayout
android:width="wrap_content"
android:height="wrap_content"
android:orientation="vertical"
android:background="#color/black"/>
<!-- your circular CircularImageView here..!! -->
</LinearLayout>
Other solution you can do is, Use native ImageView and set its android:src by creating circular bitmap and use android:background black color and i would suggest to go with thise solution as you can avoid nested layouts.
I hope this hepls! Thanks.
I've got two shape drawable xml files that I am using on imagebuttons. One contains a ring, the other contains an oval small enough to fit into the larger ring, similar to a radiobutton. In this image http://imgur.com/mYPALoT you can see (from left to right) the ring, the smaller middle oval, and the combined image showing the layerlist view of both together. This doesn't work and instead shows a complete filled in oval.
Here is the ring xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="3"
android:thickness="1dp"
android:useLevel="false">
<solid android:color="#1976D2" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
Here is the oval xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#1976D2" />
<size
android:height="7dp"
android:width="7dp" />
</shape>
Here is the layerlist xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ring_select" />
<item android:drawable="#drawable/ring_center" />
</layer-list>
I'm not familiar with layerlists as I am new to android. What am I doing wrong?
In case another person descends upon this page by the guiding of the knowledegable Google...
I have a workaround that may or may not work for you: instead of using <scale> , try <inset>. You can use a combination of the <item>'s android:top / android:bottom / android:left / android:right and the <inset>'s android:insetXXX to size the image
You can do things like set the sides of each inset value relative to your source image's dimensions. For example, if you have a 64 pixel-wide image and want to cut it down by 50%, you can do (64 / 4 = 16) for each side
I finally found the answer. Basically, the oval in front needs to have this added to it's line:
<item android:top="10dp" android:bottom="10dp" android:left="10dp" android:right="10dp">
The dimensions need to be the same since this is an oval. I'm still not sure why the oval stretched to the entire size of the ring, especially since the size was defined. If anyone has any idea why the top oval stretched like that, please let me know.
Well.. I have some ImageButtons in my Android application. I want them to display the full picture. I mean: I want the ImageButton to be JUST the picture, you know?
Ok... so far, so good... I can do it use the property "background".
However I also want the ImageButton to have the corners rounded.
I have the following xml in my layout folder:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF"/>
<corners android:radius="10dip"/>
<stroke android:width="8dip"/>
<size android:height="8dip"/>
</shape>
It works perfect when I don't want the picture to fill the WHOLE ImageButton... however when I try to use the picture to use the whole imagebutton... it doesn't show the rounded corners.
Can anyone help me, please?
Bonus question: Also, how can I have a beautiful black line (rounded corners) around the imagebutton?
I can suggest you to use ImageView instead of ImageButton and catch its onClick().And you can use this xml file to give it a fine black rounded edges outline to your image:
image_bg.xml:(paste this xml file in drawable folder)
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#000000" />
<stroke android:width="3dp" android:color="#776da8" />
<corners android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
<padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" />
</shape>
You can use it (in xml file where you have added the image) like:
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image"
android:src="#drawable/icon"
android:background="#drawable/image_bg" />
What is the use of the image button? I'm currently working on a soundboard and i ran into the same issue. Then I realized that it doesn't have to be an "imagebutton" for you to be able to use it like a button. Now i'm just using imageview and then using onclick. As for the aesthetics of the black line i don't know but my images have rounded corners because i brought the images in by creating icons under new/other/android icons. It automatically makes one in each diff size category. Hope it helps!
I believe this will help you out. You might be able to tweak it slightly to add in black borders when painting the new bitmap.
How to make an ImageView with rounded corners?
You can then just attach an onClick handler to the imageview.