Drawing top border on a shape on Android - android

I'm creating a custom progress bar (positioned under a WebView) and what I would like to draw is a 1dp-wide line between the WebView and the ProgressBar. I'm modifying existing drawable, namely progress_horizontal.xml, and tried 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="line">
<stroke android:width="1dp" android:color="#FF000000" />
</shape>
</item>
</layer-list>
This line however is vertically centered but I want it to be drawn on top of the drawable. The only idea I could come up with is to use this "hacky" gradient below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
(...)
<item>
<shape>
<gradient
android:startColor="#FF000000"
android:centerColor="#00000000"
android:centerY="0.01"
android:endColor="#00000000"
android:angle="270"
/>
</shape>
</item>
</layer-list>
Do you have better ideas how to draw a single line shape aligned to the top of the drawable defined with layer-list?


I spent a while trying to figure this out as well. Hopefully there is a better way to do it but here is the method I used, which is also kind of hackish, but in case it helps someone, I thought I would share.
The first item in your layer list should be a solid of whatever color you want to be your border. Following that would be the thing(s) you want to have the border, with padding on whatever side you want the border to be on.
For example:
<?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="YOUR BORDER COLOR" />
</shape>
</item>
<item android:top="YOUR TOP BORDER THICKNESS">
THE THING YOU WANT A BORDER ON
</item>
</layer-list>
The idea is that the padding on the item reveals the solid shape behind it, giving the border appearance. You could add padding to any side to add a border. I imagine you could get more complicated and have different colored borders this way as well.
Seems like a hack but it worked for me.
EDIT: I said "padding" but in layer-lists it's more of an offset.


i was going through all related topics but no one could solve my problem. But some of them were very useful to understand how the layer-list or shape parameters work.
My problem was to define a button with a linear gradient and draw a top and a bottom line in different colors. After all I hacked this solution. I saved the file unter res/drawable/blue_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle">
<solid android:color="#color/blue_end" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<stroke
android:width="1dp"
android:color="#color/bottomline_btn" />
</shape>
</item>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/blue" />
<gradient
android:startColor="#color/blue"
android:endColor="#color/blue_end"
android:angle="270" />
</shape>
</item>
<item android:top="0dp" android:bottom="-1dp" android:left="-1dp" android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/topline_btn" />
<solid android:color="#00000000" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:top="-1dp" android:bottom="0dp" android:left="-1dp" android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/bottomline_btn" />
<solid android:color="#00000000" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
<color name="topline_btn">#31ffffff</color>
<color name="bottomline_btn">#31000000</color>
<color name="blue">#449def</color>
<color name="blue_end">#2f6699</color>


Did you try offsetting it by something like this
http://android.amberfog.com/?p=9


My solution is to add 9-patch as the last layer item :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/tab_button_active_layer2" />
</shape>
</item>
<item android:bottom="#dimen/tab_button_active_bottom_bar_width">
<shape>
<solid android:color="#color/tab_button_active_layer1" />
</shape>
</item>
<!-- 9-patch drawable -->
<item android:drawable="#drawable/tab_button_border_top"/>
</layer-list>

Related

How to set shadow to line?

I do not know how to do it
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="line">
<stroke android:width="5dp"
android:color="#698cc8"
/>
</shape>
</item>
</selector>
Something like this:
https://i.stack.imgur.com/npZm0.png

I think it will help you,
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="line">
<stroke android:width="8dp"
android:color="#c7c7c7"
/>
</shape>
</item>
<item android:bottom="4dp">
<shape android:shape="line">
<stroke android:width="5dp"
android:color="#698cc8"
/>
</shape>
</item>
</layer-list>
out put is,
give needed shade color in first item. then give bottom value in second item.
which means second item height get reduce from bottom corresponding to bottom value.there for we can visible shade color below the line.

How to define a rectangle with a circle at the end using Android XML definitions

Is it possible to define a shape like shown on the following image:
I tried a layer-list but I could not find a solution close to what I am looking for.
I want to use the resulting shape as a background image to a RelativeLayout with a transparency.
Any hints are appreciated! Thank you.

Here is the shape you asked for:
<?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="250dp"
android:height="100dp" />
<solid android:color="#ffffff" />
</shape>
</item>
<item
android:top="0dp">
<shape android:shape="line">
<stroke
android:width="25dp"
android:color="#000000" />
</shape>
</item>
<item
android:right="0dp"
android:left="150dp">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
</layer-list>
Screenshot:

Android LinearLayout : Add border with shadow around a LinearLayout

I would like to create the same border of this LinearLayout as the example :
In this example, we can see that the border is not the same all around the linearLayout.
How can I create this using an XML drawable file?
For now, I have only able to create a simple border all around the LinearLayout like this :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:radius="1dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" />
<stroke
android:width="1dp"
android:color="#E3E3E1" />
<solid android:color="#color/blanc" />
</shape>

Try 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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>

That's why CardView exists. CardView | Android Developers
It's just a FrameLayout that supports elevation in pre-lollipop devices.
<android.support.v7.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardUseCompatPadding="true"
app:cardElevation="4dp"
app:cardCornerRadius="3dp" >
<!-- put whatever you want -->
</android.support.v7.widget.CardView>
To use this you need to add dependency to build.gradle:
compile 'com.android.support:cardview-v7:23.+'

I get the best looking results by using a 9 patch graphic.
You can simply create an individual 9 patch graphic by using the following editor:
http://inloop.github.io/shadow4android/
Example:
The 9 patch graphic:
The result:
The source:
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="#drawable/my_nine_patch"

okay, i know this is way too late. but i had the same requirement. i solved like this
1.First create a xml file (example: border_shadow.xml) in "drawable"
folder and copy the below code into it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<item>
<shape>
<!-- set the shadow color here -->
<stroke
android:width="2dp"
android:color="#7000" />
<!-- setting the thickness of shadow (positive value will give shadow on that side) -->
<padding
android:bottom="2dp"
android:left="2dp"
android:right="-1dp"
android:top="-1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#fff" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
2.now on the layout where you want the shadow(example: LinearLayout) add this in android:background
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="8dip"
android:background="#drawable/border_shadow"
android:orientation="vertical">
and that worked for me.

This is so simple:
Create a drawable file with a gradient like this:
for shadow below a view below_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="270" >
</gradient>
</shape>
for shadow above a view above_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="90" >
</gradient>
</shape>
and so on for right and left shadow just change the angle of the gradient :)

As an alternative, you might use a 9 patch image as the background for your layout, allowing for more "natural" shadows:
Result:
Put the image in your /res/drawable folder.
Make sure the file extension is .9.png, not .png
By the way, this is a modified (reduced to the minimum square size) of an existing resource found in the API 19 sdk resources folder.
I left the red markers, since they don't seem to be harmful, as shown in the draw9patch tool.
[EDIT]
About 9 patches, in case you never had anything to do with them.
Simply add it as the background of your View.
The black-marked areas (left and top) will stretch (vertically, horizontally).
The black-marked areas (right, bottom) define the "content area" (where it's possible to add text or Views - you can call the unmarked regions "padding", if you like to).
Tutorial: http://radleymarx.com/blog/simple-guide-to-9-patch/

You create a file .xml in drawable with name drop_shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item android:state_pressed="true">
<layer-list>
<item android:left="4dp" android:top="4dp">
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp"/>
</shape>
</item>
...
</layer-list>
</item>-->
<item>
<layer-list>
<!-- SHADOW LAYER -->
<!--<item android:top="4dp" android:left="4dp">
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp" />
</shape>
</item>-->
<!-- SHADOW LAYER -->
<item>
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp" />
</shape>
</item>
<!-- CONTENT LAYER -->
<item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Then:
<LinearLayout
...
android:background="#drawable/drop_shadow"/>

1.First create a xml file name shadow.xml in "drawable" folder and copy the below code into it.
<?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="#CABBBBBB" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="6dp"
android:left="0dp"
android:right="6dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Then add the the layer-list as background in your LinearLayout.
<LinearLayout
android:id="#+id/header_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shadow"
android:orientation="vertical">

Use this single line and hopefully you will achieve the best result;
use:
android:elevation="3dp" Adjust the size as much as you need and this is the best and simplest way to achieve the shadow like buttons and other default android shadows.
Let me know if it worked!

If you already have the border from shape just add elevation:
<LinearLayout
android:id="#+id/layout"
...
android:elevation="2dp"
android:background="#drawable/rectangle" />

Ya Mahdi aj---for RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#7d000000"
android:endColor="#android:color/transparent"
android:angle="90" >
</gradient>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="3dp"
android:top="0dp"
android:bottom="3dp">
<shape android:shape="rectangle">
<padding
android:bottom="40dp"
android:top="40dp"
android:right="10dp"
android:left="10dp"
>
</padding>
<solid android:color="#color/Whitetransparent"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>

I know this is late but it could help somebody.
You can use a constraintLayout and add the following property in the xml,
android:elevation="4dp"

I found the best way to tackle this.
You need to set a solid rectangle background on the layout.
Use this code - ViewCompat.setElevation(view , value)
On the parent layout set android:clipToPadding="false"

Android xml shape drawable - how to draw a u-form?

I need to create a xml shape drawable that draws a rectangle without the top-line (a "u-form"). What I am able to do is draw a rectangle, like so:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/detailrow_bg_normal" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:radius="1dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<padding
android:bottom="2dip"
android:left="1.5dip"
android:right="1.5dip"
android:top="8dip" />
<stroke
android:width="1dip"
android:color="#color/detailtable_border" />
But how - if possible, can I define the same shape without the top (or bottom) line?

You could try using a layer-list. See if something like this would work:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/detailtable_border" />
</shape>
</item>
<item android:left="1.5dp" android:right="1.5dp" android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/detailrow_bg_normal" />
</shape>
</item>
</layer-list>
This (should) fill the rectangle with the border color, then overlay it with the default background color, leaving the appropriate amount of the right/left/bottom border color showing.

try this code and also refer this link:::
I achieved a good solution with this one:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item android:top="-1dp" android:right="-1dp" android:left="-1dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#ffffff" />
</shape>
</item>
</layer-list>
This works well in case you need a transparent color but still an open stroke color (In my case i only needed a bottom line). If you need a background color you can add a solid shape color as in above answer.

You might be able to achieve this using two shapes and a LayerList, but I think it is both a better solution and easier to use a NinePatch-drawable.

how to make stroke for 3 sides for a shape in android?

I am using a stroke to make a colored border to a shape in xml layout in android .
Can I make the stroke for only 3 edges ( left,top,bottom) the right NO ?

You can achieve this by using a layerlist and messing with the padding. You'll need 3 elements:
1: A border.xml shape, which is just a solid shape in the color of your border: border.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff0000"/>
</shape>
2: The 'inner' shape, the shape where you want the border to appear around: inner.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00ff00"/>
</shape>
3: A layer list, which will put these 2 on top of eachother. You create the border by setting the padding on the inner shape: layerlist.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/border"/>
<item android:drawable="#drawable/inner"
android:top="3dp" android:right="0dp" android:bottom="3dp"
android:left="3dp" />
</layer-list>

Using #Mopper answer, you can like that too.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ff0000" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="0dp"
android:top="3dp">
<shape>
<solid android:color="#00ff00" />
</shape>
</item>
</layer-list>

Here's my solution, which works if you want transparent or semi-transparent background colors.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="-1dp"
>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#c45b5b5b"
android:width="1dp"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
/>
</shape>
</inset>
</item>
<item
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/infoBox_Background"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
/>
</shape>
</item>
</layer-list>

Another approach would be to use a 9-Patch png file for your background. You do this by taking a normal png file and then using a tool like this to define:
The area where your content goes in the png.
The area of your png that stretches as the underlying control grows in either width or height.
Once you generate the 9-patch png file, add it to your drawables (define files for various resolutions). Then just set the drawable as your control background.
android:background="#drawable/my9_patch_file_name"

Categories

Resources