I am trying to create a background drawable for a linearlayout that has multiple gradients.
E.g. I want to have a gradient at the top and bottom, and a solid color in the middle. So basically a header and footer.
I am trying to use a layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<!--Red-->
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#ff0000" />
</shape>
</item>
<!-- Green -->
<!-- Offsets from the top and bottom -->
<item
android:top="20dp"
android:bottom="20dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#00ff00" />
</shape>
</item>
<item
android:top="80dp">
<!--Blue -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#0000ff" />
</shape>
</item>
</layer-list>
The problem is, I am unsure of the max value of density independant pixels. For this to work, the bottom item offest would need to be (max dp value-20). I have tried to assume the max is 100, and also assume the max is 160 (from the documentation), but neither of these work.
Any ideas?
Related
I would like to create a custom drawable background for an EditText component in my Android layout. This should include a lower border spanning the entire length of the EditText, and 2 connected vertical lines at either end which take up 25% of the height, as per below:
The text itself will then use android:gravity="left|center" with a small amount of margin on the left/top/bottom.
I've been able to create a custom border on other input text elements where it was desirable to include all borders using a shape such as below:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#android:color/transparent"/>
<corners
android:bottomRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
<stroke
android:color="#color/lightgrey"
android:width="1dp"/>
</shape>
However, now I don't want a full rectangle, only 1 full side + 2 partial sides.
Two steps to achieve that:
Keep only the bottom border by removing the top, right, and left borders by adding negative insets with android:left|right|top.
Add new rectangle for the side items: adjust left/right relevant gravity, and limit the height to which size you want (here it's set to 8dp):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom border -->
<item
android:left="-50dp"
android:right="-50dp"
android:top="-50dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/lightgrey" />
</shape>
</item>
<!-- Left border -->
<item
android:height="8dp"
android:gravity="left|bottom">
<shape android:shape="rectangle">
<solid android:color="#color/lightgrey" />
<size android:width="1dp" />
</shape>
</item>
<!-- Right border -->
<item
android:height="8dp"
android:gravity="right|bottom">
<shape android:shape="rectangle">
<solid android:color="#color/lightgrey" />
<size android:width="1dp" />
</shape>
</item>
</layer-list>
Here is the result
I want to have a bottom line in a view. The following drawable somehow adds a bottom border:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<!-- Set the border color of your layout here -->
<solid android:color="#color/red" />
</shape>
</item>
<!-- This is for border bottom but
you can change this according to your need -->
<item android:bottom="2dp" >
<shape
android:shape="rectangle">
<!-- Set the background color of your layout here -->
<solid android:color="#color/green" />
</shape>
</item>
</layer-list>
The result of this is:
Problem:
1) I don't understand how this works at all. It seems this is some trick using margins to get a red bottom border but I don't really get it.
2) I need to be able to add a bottom border but I don't want to set any specific background color for the whole view. Is that possible?
This is telling the system from where to start this item layout.
Since here we have bottom 2dp so this layout start 2dp from bottom.
Change bottom to end,start or other options for more understanding.
For 2) I need to be able to add a bottom border but I don't want to set any specific background color for the whole view. Is that possible?
replace your drawable with below code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<!--Uncomment this if you wnat to set any background color to
your rectangle
<solid android:color="#ffffff" />-->
<stroke
android:width="1dp"
android:color="#color/red" />
</shape>
</item>
I need to create a speech bubble background for an icons container like the white one in this image:
Required Appearance
I decided to use a drawable xml rather than a 9 patch image, so I can control of the rounded corner radii in my code. So, with the help of this answer to a related question, I have created the following xml:
bg_icons_container.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:top="27dp"> <!-- How to make this 50% of height? -->
<rotate
android:fromDegrees="-45"
android:toDegrees="0"
android:pivotX="0%"
android:pivotY="0%"> <!-- How to make the triangle more acute? -->
<shape
android:shape="rectangle" >
<solid
android:color="#color/white"/>
</shape>
</rotate>
</item>
<item
android:left="10dp">
<shape
android:shape="rectangle">
<solid
android:color="#color/white"/>
<corners
android:radius="#dimen/border_radius_small"/>
</shape>
</item>
</layer-list>
This results in:
Actual Apperance (enlarged)
My problem is that the triangular part of the drawable is too wide. How can I make it more acute? (My minSdkVersion is 16, so I cannot use android_width on the first item to try and stretch it.)
Also, I am having to hard code android:top of the first item to 27dp. Is it possible to make this 50%, so it will correctly adjust when the height of the drawable changes?
What I wanted was while background with red part on the left. Something like this.
I tried many things (is there any WYSIWIG editor? I think I ran this hundreds of times.) Specifying width like in the following article did not work.
how to specify width and height of a drawable item
The following article only tells me that I cannot use percentage, now how to apply width.
Android Drawable: Specifying shape width in percent in the XML file?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid
android:color="#FFFFFFFF"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#55FF0000" />
<size android:width="100px" />
</shape>
</item>
</layer-list>
Rather than specify the size of the red box, you would define a red layer and then set the left margin of the white layer equal to the amount of red to show.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#55FF0000" />
</shape>
</item>
<item android:left="100px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFFFF"/>
</shape>
</item>
</layer-list>
If you know the desired negative space, you could even swap the two and set the right margin of the red (now top) layer to the amount of white that should be visible.
I have a simple aim. I want a light grey background on my FrameLayout with a black dividing line underneath it (only undernearth, not all around). So far I have this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" android:gravity="center">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item>
<shape android:shape="line" android:gravity="bottom" >
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
But it draws the line through the centre, i.e. ignores the gravity='bottom' bit. How can I fix this?
EDIT: This question is very old. The selected answer may or may not be in-line with current APIs, etc. You are encouraged to start your own question rather than add to this one, which is no longer monitored.
I've struggled a lot with this as well. Basically, to create a border at the bottom, you have to think in opposite direction from what you expect. You start with a rectangle with your Border color. On top of that, you draw the actual color, with an offset from the bottom.
I use this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- CREATE A RECTANGLE WITH YOUR BORDER COLOR -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff"/>
</shape>
</item>
<!-- NOW DEFINE THE NORMAL COLOR-->
<item android:bottom="BOTTOM_BORDER_THICKNESS E.G. 4dp">
<shape android:shape="rectangle" >
<solid android:color="#ccc"/>
</shape>
</item>
</layer-list>
Or, as Juan Pablo Saraceno suggested :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<color android:color="YOUR_BORDER_COLOR" />
</item>
<item android:top="YOUR_BORDER_THICKNESS">
<color android:color="YOUR_BG_COLOR" />
</item>
</layer-list>
Unfortunately I have not found a way to get the gravity working for drawables, but I found how you can achieve what you want with pure xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-2dp"
android:left="-2dp"
android:right="0dp"
android:bottom="1dp"
>
<shape android:shape="rectangle">
<solid android:color="#EEEEEE"/>
<stroke android:width="1dp" android:color="#010101"/>
</shape>
</item>
</layer-list>
Good luck:)
I'd recommend using a nine-patch image for this - here's an example that should do the job:
(It's only tiny but it is there!)
If you place this in your drawable folder and set your FrameLayout's background to it then you should get the desired result. The content will go in the grey area and the #010101 pixel will be stretched horizontally to form a line at the bottom. Just make sure to keep the .9.png extension to ensure it gets loaded as a nine-patch.
Hope that helps you
This works!
<item>
<bitmap
android:gravity="left|bottom"
android:src="#drawable/myDrawable" />
</item>
I know it's pretty old question but given answers didn't work for me. Turns out in order to gravity property work you just need to add size tag in drawable item.
So following will work as expected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item
android:gravity="bottom">
<shape android:shape="line">
<size android:height="2dp"/>
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
ps. this feature added in api level 23
https://developer.android.com/reference/android/graphics/drawable/LayerDrawable#setLayerGravity%28int,%20int%29
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/Black" />
</shape>
</item>
<item android:bottom="5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/White" />
</shape>
</item>
</layer-list>
Well, it's pretty old question, but none of the answers seem to answer the actual question (how to make gravity working) so here's a working example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#2196F3"/> <!-- Background color -->
</item>
<item android:gravity="bottom">
<shape>
<size android:height="10dp" /> <!-- I would suggest 1dp -->
<solid android:color="#F50057" /> <!-- Line color -->
</shape>
</item>
</layer-list>
By analogy, if you want to use gravity left or right change attribute height to width