I have a Button and I am setting as background a gradient drawable.
The buttons with the gradient drawable are missing the elevation whereas all other buttons have the elevation.
Why is the elevation missing on the buttons with the gradient drawable? And is there any easy way to fix this?
My code looks like this:
gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="radial"
android:gradientRadius="250dp"
android:startColor="#color/blue"
android:endColor="#color/red"/>
<corners android:radius="#dimen/round_corner_radius"/>
<stroke
android:width="5dp"
android:color="#android:color/transparent"/>
</shape>
</item>
<item android:top="7dp"
android:left="7dp"
android:right="7dp"
android:bottom="7dp">
<shape android:shape="rectangle" >
<solid android:color="#88ffffff"/>
<corners android:radius="#dimen/round_corner_radius"/>
</shape>
</item>
</layer-list>
activity.xml
...
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button"
android:background="#drawable/gradient"/>
...
I solved my problem. I had to remove the
<stroke
android:width="5dp"
android:color="#android:color/transparent"/>
The problem was probably the color that was set. Without the stroke the button behaves like a normal raised button.
Related
I want to draw a circle of color 1 inside a circle of color 2. Both of them have stroke and its inside is transparent. This should be used as a background of a button.
Something like this (but green and red are next to each other - no gap in between. Sorry, I don't have any graphical program where I could draw them so they're next to each other.)
Is there a way how to do it in XML ?
I was thinking of doing it using shape XML but layers are scaled so layers would be on top of each other so only 1 color would be visible.
You use a layer list with insets in order to avoid the inner circle to lurk out from the outer circle, like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_red_dark" />
</shape>
</item>
<item>
<inset android:inset="4dp">
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_green_dark" />
</shape>
</inset>
</item>
</layer-list>
You set the size and background of the button like this:
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/red_green" />
It then looks like this:
Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size android:height="10dp" android:width="10dp"/>
<stroke
android:width="2dp"
android:color="#FF0000"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="1dp"
android:color="#00FF00"
/>
</shape>
</item>
</layer-list>
You can change the width and height of the size element to get a different ring width.
You can achieve this by defining two drawable resources both circle with different stroke colors and puting them in a layer-list drawable one on top of the other, with different ofsets which give then the effect you need:
Inner circle inner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorRed"
android:width="2dp"/>
</shape>
Outer circle outer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorGreen"
android:width="2dp"/>
</shape>
Button background background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/outer"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"
android:left="0dp"
android:gravity="center"/>
<item android:drawable="#drawable/inner"
android:right="4dp"
android:top="4dp"
android:bottom="4dp"
android:left="4dp"
android:gravity="center"/>
</layer-list>
And this is final result
I am attempting to create a drawable shape that will become the background of a search bar. I know how to create a rectangle with two colors but I do not know how to tilt the color at an angle, like in the second image. Can someone help me with this? Thanks.
Take a Toolbar...code is here...
<android.support.v7.widget.Toolbar
android:layout_width="500dp"
android:layout_height="wrap_content"
android:background="#drawable/custom_background" />
create a drawable res file custom_background.xml and
In that toolbar set drawable like this....code is here
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<size
android:width="500dp"
android:height="50dp" />
<solid android:color="#0072BC" />
<corners android:radius="0dp"/>
</shape>
</item>
<item
android:top="8dp"
android:bottom="0dp"
android:left="-400dp"
android:right="128dp">
<rotate
android:fromDegrees="160">
<shape android:shape="rectangle">
<solid android:color="#FFF" />
</shape>
</rotate>
</item>
I'm trying to create a ripple background drawable for a Button with a stroke.
This is what I have so far:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#336699">
<item>
<shape android:shape="rectangle">
<solid android:color="#998811" />
<stroke
android:width="2dp"
android:color="#119988" />
</shape>
</item>
</ripple>
But with this solution, the ripple overlaps with my stroke.
I only want the ripple within the stroke, How can I do this?
As per the documentation you add another item with id #android:id/mask - that will limit where the ripple goes. You can set that to be inset, like so:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#336699">
<item>
<shape android:shape="rectangle">
<solid android:color="#998811" />
<stroke
android:width="2dp"
android:color="#119988" />
</shape>
</item>
<item android:id="#android:id/mask">
<inset android:insetBottom="2dp"
android:insetLeft="2dp"
android:insetRight="2dp"
android:insetTop="2dp">
<shape android:shape="rectangle">
<!-- Color doesn't matter -->
<solid android:color="#android:color/white"/>
</shape>
</inset>
</item>
</ripple>
This question already has answers here:
Is there an easy way to add a border to the top and bottom of an Android View?
(25 answers)
Closed 1 year ago.
I would like to add only a bottom and a top border on my Linearlayout.
I have tried to do this :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000" />
</shape>
</item>
</layer-list>
But it add a border around the shape..
Could you help me please ?
I think you can create this drawable and use it as background:
<?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="#000"/>
</shape>
</item>
<item android:bottom="1dp" android:top="1dp">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Think of is as drawing a rectangle with border color first and then lay on top of it a rectangle with your background color leaving out 1dp on top and at the bottom.
Make this two file and put this code. you can set border top and bottom border,
main.xml
<TextView
android:text="This is textline"
android:background="#drawable/border_set"
/>
border_set.xml
This file located into full path project_root/res/drawable/border_set.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#000" />
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Here is the solution. It works even with transparent background.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#color/borderColor" />
<solid android:color="#color/backgroundColor" />
</shape>
</item>
</layer-list>
I believe this is the simplest way:
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />
This is my version; top border and bottom border are visible, not showing the left or right borders. And the background is transparent.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:left="-1dp"
android:right="-1dp"
android:top="-1dp"
android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/BlueGrey_colorPrimary" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
A quick way to achieve this:
Add a Text View to the bottom and/or top of your layout.
Set the TextView's width to "match_parent"
Set the TextView's height to about "1dp" or find the thickness you would like
Set the TextView's background to the color you would like the border to be
I hope this helps!
You can follow this link Is there an easy way to add a border to the top and bottom of an Android View?
I expect that you are solve from this link.
also you can solve How to add border around linear layout except at the bottom?
Its simple. Draw 3 shapes like this.
<?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/menu_line_separator_in" />
</shape>
</item>
<item android:bottom="1.5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/menu_line_separator_out" />
</shape>
</item>
<item android:top="1.5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/menu_line_separator_out" />
</shape>
</item>
</layer-list>
I’m attempting to create a layout border with corners that are square on the outside and round on the inside. I’ve gathered that I need to create an .xml drawable definition composed of two shapes: one with a stroke width and corner radius and another with a stroke width only:
The drawables
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="4dp" android:color="#FF000000" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="4dp" />
<solid android:color="#FFC0C0C0" />
</shape>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#FF000000" />
<solid android:color="#FFC0C0C0" />
</shape>
Each of these works independantly as a border when appliedby itself like so:
android:background="#drawable/round_border"
but when they either or both are added to an item-list drawable like so:
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
and:
android:background="#drawable/composite_border"
The layout's background is completely black instead of just a black border.
Does anyone know how to make the layer list work for this task?
From Shape Drawable Doc you can see that shape can't have layer-list inside so you should define your composite_border.xml like this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/square_border"/>
<item android:drawable="#drawable/round_border"/>
</layer-list>
note that I changed the order of your items inside the layer-list as stated in the documentation of layer-list
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top and you want it to be squared from outside
Try this will work fine enough:
solid is background color
stroke is border
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/white"/>
<stroke android:width="1dp" android:color="#ffaaaaaa" />
<size
android:width="15dp"
android:height="15dp"/>
</shape>
Create a xml file like round_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#CCCC33"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
In the layout set as background
<LinearLayout
android:id="#+id/layout_wellbeing"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/rounded_corner_leuvan"
android:orientation="horizontal" >
</LinearLayout>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp"
android:color="#FF000000"
/>
<solid android:color="#FFC0C0C0" />
</shape>
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
watch out the comments and the quotation marks! =]