I would like to create a border around my RableRow.
I am using the following shape as background.
bg_stroke_dotted_right
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-4dp"
android:left="-2dp"
android:bottom="-4dp"
android:drawable="#drawable/stroke_dotted">
</item>
</layer-list>
stroked_dotted drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#000000" />
<stroke
android:dashGap="4dp"
android:dashWidth="2dp"
android:width="2dp"
android:color="#color/greyDark" />
</shape>
I do not understand why using "bg_stroke_dotted_right" as bg - files the background with black color.
As soon as I add "bg_stroke_dotted_right" as bg - the bg turns to black.
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_stroke_dotted_right"
>
in the shape try this :
<solid android:color="#00000000" />
in this case the first 2 "00" are the alpha of the colors, and "00" meand transparent.
enjoy!
The accepted answer suggests to use transparent in the solid element. Where as this is the reason for the bug (missing the solid element falls back to black on android <4.2) the solution is not the most optimal.
For starters instead of hard code the colour you can use #android:color/transparent however it's potentially best to use #null so that it doesn't overdraw. Something like this:
<solid android:color="#null" />
Related
How to implement PopupWindow shape like on the screenshot below ?
I understand how to create Rectangle shape with stroke/solid color.
I know how to play with corners, but how can I implement an arrow < near Close label ?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/edittext_border"
android:left="#dimen/edittext_border"
android:right="#dimen/edittext_border"
android:top="#dimen/edittext_border">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/edittext_border_width"
android:color="#color/divider_color_light" />
<solid android:color="#color/white" />
<padding android:bottom="#dimen/awsome_edittext_padding" android:left="#dimen/awsome_edittext_padding" android:right="#dimen/awsome_edittext_padding"/>
</shape>
</item>
</layer-list>
you can set exactly that type of background in custom popup
see this library
https://github.com/kvirair/Quick-Action
U can use .9 patch png as background for PopupWindow.
like below code `
<FrameLayout
android:id="#+id/popupbg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/POPUPBACkGROUND" >
</FrameLayout>
You can refer this site!
I'm trying to build a custom android view and apply a background drawable that is a layer-list.
The layer-list has two items:
A background color (white)
A simple shape drawable that is a stroked rectangle with rounded-corners
here's the drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white"/>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp" />
<stroke
android:width="2dp"
android:color="#color/background_green" />
</shape>
</item>
</layer-list>
The custom view is a class derving from Android.view.View that currently has NO functionality except the required measuring overloads.
I'm applying the background in the view definition in an activity layout:
<view
android:layout_width="match_parent"
android:layout_height="300dp"
class="com.example.widget.TestView"
android:id="#+id/view2"
android:layout_gravity="center_horizontal"
android:background="#drawable/rect_sig_cap"
android:layout_margin="20dp" />
What I expect to see is a view with a white background and a green border. What I actually see when I deploy the project is a view with a black background and a green border.
Interestingly it appears correctly in the designer preview in Android Studio. It's only when I deploy it to a device that it renders black.
Am I missing something obvious here?
For those interested, I found the solution.
I had defined the shape drawable as including only a stroke definition. Without any other inputs, this causes the fill color to be inferred as black.
In the end, a Layer-List drawable is not required at all. Instead, add a solid fill definition to the shape layer with color Transparent and it works just fine.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/corner_radius" />
<stroke android:width="1dp"
android:color="#color/background_green" />
<solid android:color="#android:color/transparent" />
</shape>
Try this one.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/white" />
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp" />
<stroke
android:width="2dp"
android:color="#color/background_green" />
</shape>
</item>
</layer-list>
I am trying to implement in XML a ShapeDrawable like this, but so far without success.
How do I make the Stroke visible only for two sides?
Is that even possible?
Otherwise what cloud I use (I seed it as background of a TextView).
Here is a solution which is using a LayerListDrawable:
background_white_lateral_border.xml
<?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="#android:color/white" />
</shape>
</item>
<item>
<inset
android:insetLeft="1dp"
android:insetRight="1dp" >
<shape android:shape="rectangle" >
<solid android:color="#android:color/black" />
</shape>
</inset>
</item>
</layer-list>
Note: This firstly draws a white rectangle and then a black rectangle with a left and right inset of 1dp on top of it, giving the effect of lateral borders. It's just something to keep in mind, in case you worry about performance (which is in my opinion negligible for minor styling like this).
AFAIK, that is not possible with a single ShapeDrawable. A nine-patch PNG, or a LayerListDrawable of two ShapeDrawables (one per line) should work though.
I have created layout similar to this:
<RelativeLayout
android:id="#+id/layout_one"
style="#style/layout_one" >
<RelativeLayout
android:id="#+id/layout_two"
style="#style/layout_two" >
<RelativeLayout
android:id="#+id/layout_three"
style="#style/layout_three" >
</RelativeLayout>
</RelativeLayout>
For layout one I have created a custom drawable with rectangle shape so that the corners would be rounded and blue background color.
But for layout three I need to set white background color but if I do android:background="#FFFFFF" than it changes also the shape and the bottom corners are no longer rounded.
My first thought was to create custom drawable for the layout_three with rounded bottom corners but it wasnt working. Either all the corners were rounded or none.
Need to create something like this in the picture with rounded corners. Any suggestions?
I see that for layout three you use #style/layout_three which is different from #style/layout_one. So why don't you go to your style folder and put item with background white in layout_three style
It should look something like this:
<style name="layout_three">
<item name="android:background">#FFFFFF</item>
<!-- ... other stuff here... -->
</style>
EDIT: Sorry I did not understand your question well, reading that comment now.
There is only one way that comes to my mind right now to help you fix that.
Create an .xml file in your drawable folder and name it layout_three.xml or whatever.
And use this code:
<?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="#FFFFFF" />
<padding
android:bottom="10dp" <!-- you can set padding here
or on your layout layout_three -->
android:left="10dp"
android:right="10dp"
android:top="10dp"
/>
<corners android:radius="2dp" /> <!-- change the radius too -->
</item>
</layer-list>
And then you just use #drawable/layout_three instead of #style/layout_three
EDIT2: You can also use this code for the corners if you want only the bottom one to be rounded
<corners
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"/>
You can create a xml drawable with rounded bottom corners for your requirement. Try the below code:
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="7dp"
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"/>
</shape>
</item>
I just read that the problem is that the Android layout preview doesn't show the different corner radius so you have to test in on device or emulator to see the difference.
I have the following code:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp"/>
<size android:height="1dp" />
<solid android:color="#FFF"/>
</shape>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background ="#drawable/line"/>
I have two questions:
Why the line is black instead white? I have tried putting it inside a ImageView but the result is the same.
How can i set the opacity of the shape?
1) In order to set the color of the line, you need to define android:color on the <stroke>. The <solid> element is for the background.
2) You can set the opacity of the shape by using color values with an alpha layer, aka #ARGB. In your case, maybe #7FFF.
The simplest example of the line for 2 density pixels with black color.
Just save the xml in drawable folder: res/drawable/shape_black_line.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="1dp"
android:color="#000000" />
<size android:height="2dp" />
</shape>
Use LinearLayout and background to show the line.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/divider">
</LinearLayout>
I hope this helped.
A tricky way can be like this:
1) Add a View where you want have a line.
2) set android:background to a hex value that you can set both color and opacity.
For example:
<View
android:layout_width="match_parent"
android:layout_height="6dp"
android:background="#77f27123"
android:orientation="vertical" />