Sorry if this is a very simple question; I'm still new to a lot of Android and am learning as I go!
I currently have a shape specified in the drawable folder for a black rectangle at 60% opacity that takes up all of the screen- it creates something of a "tinted window" effect when placed over a picture.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/tinting_rectangle">
<stroke android:width="2dp" android:color="#ff207d94" />
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<corners android:radius="5dp" />
<solid android:color="#99000000" />
</shape>
My goal, however, is to create a circular "opening" in this tinting, right in the middle of the rectangle. Basically, a transparent oval that allows you to see past the tinting in that one spot to see the background underneath.
I had imagined it would be something like this:
<?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:id="#+id/tinting_rectangle">
<stroke android:width="2dp" android:color="#ff207d94" />
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<corners android:radius="5dp" />
<solid android:color="#99000000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#00FFFFFF" />
<padding
android:left="#dimen/tint_padding"
android:top="#dimen/tint_padding"
android:right="#dimen/tint_padding"
android:bottom="#dimen/tint_padding" />
</shape>
</item>
</layer-list>
However, that did not accomplish the goal I was looking for; I still just have a giant solid rectangle of 60% opacity black.
Does anyone have a suggestion for what might accomplish this in XML (looking to keep this as a nodpi solution if possible)? A "tinted window" rectangle with a hole in the middle to see through to whatever is behind it.
Thank you!
EDIT: Additional: As you can see the oval in the second example I am using static padding to center it in the rectangle. Obviously this won't work. If anyone has a good suggestion how to make sure the oval is always centered in the rectangle, that would also be greatly appreciated!
Related
I was trying to make a drawable using XML in android. The requirement is I need to have a rounded rectangle(all 4 corners rounded) with a stroke of 7dp height only on the top edge. I am using the following XML for that:
<?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="5dp" android:color="#color/theme_color" />
<solid android:color="#color/theme_color" />
<corners
android:radius="7dp"/>
<padding android:top="7dp"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/designer_cell_background" />
<solid android:color="#color/designer_cell_background" />
<corners
android:radius="7dp"
android:topRightRadius="0dp"
android:topLeftRadius="0dp"/>
<padding android:bottom="1dp"/>
</shape>
</item>
</layer-list>
I am getting this working almost OK, except that the bottomRight and bottomLeft corners are not rounded.
Question - 1 : How to get the bottom corners rounded?
Question - 2 : Is this the correct way to achieve what I actually want? Is there a better way? I am asking this because, I understand what I do here is actually making two rectangles, one on top of another, the second one is being slightly lowered from the top edge of the first rectangle so that the color of the first rectangle appears as a line on top of the second one. And then adding corner radius to each rectangle individually. I don't think it is the right solution. But I failed when I tried to add a stroke of 7dp width to the top of a rounded rectangle. The stroke I gave was appearing on all the edges.
EDIT
Here is what I want:
And this is what I currently get:
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<solid android:color="#ffffff" />
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<corners android:radius="12dp" />
</shape>
ur using the radius value increased curve shape wil increase
try this is works let me know
this tool is helps me you can also get help from it
http://angrytools.com/android/button/
<?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="5dp" android:color="#color/theme_color" />
<solid android:color="#color/theme_color" />
<corners
android:radius="7dp"/>
<padding android:top="7dp"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/designer_cell_background" />
<solid android:color="#color/designer_cell_background" />
<corners
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"/>
<padding android:bottom="1dp"/>
</shape>
</item>
i think you should create 2 shapes the black one and the red one, just overlay the other shape to become the image you're looking for. you can't accomplish that with one shape in android.
I want to create a rectangle shape in XML, it needs a curved shape.
Is this possible with the XML markup or programmatically?
the code i have now:
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:topLeftRadius="45dp"
android:topRightRadius="45dp"
android:bottomLeftRadius="45dp"
android:bottomRightRadius="45dp" />
<solid
android:color="#4F4F4F" />
<stroke
android:width="3dp"
android:color="#878787" />
</shape>
Can someone help me out?
My idea is as followed:
The rectangle has to be transformed with a curve.
You can use a shape resource for your view background, either an oval:
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#FF000000" />
</shape>
or a rectangle with rounded corners:
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF000000" />
<corners android:radius="20dp" />
</shape>
it's not clear to me from your question what you're looking to do exactly. The oval will fit to your objects width and height.
Of course you can have precise control via a custom Drawable, implementing your own draw() method and painting on the canvas. This is likely your best approach if you're looking for something very specific.
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.
I want to make a drawable for my Android button, defined as drawable. I found I could set all the borders by using a rectangle, but I got kinda stuck when I wanted it on three sides. I want for example have either the top or the bottom open.
Could anyone show me how to do this?
Try doing this, though I saw it on some other post
<?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" Remove this to avoid seeing the bottom border
android:left="10dp"
android:right="10dp"
//android:top="10dp" Remove this to avoid seeing the top border
/>
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<solid android:color="#666666" />
</shape>
</item>
</layer-list>
https://stackoverflow.com/a/10133434/1244489
If anyone is running into issues regarding padding taking effect in the accepted answer, try taking a look at: https://stackoverflow.com/a/11006931. That solution uses position attributes on the tags to achieve the same effect.
I was having trouble using the accepted answer here while creating drawables for use in an ActionBar, and the linked approach worked for me.
This might help you.
I The border on Three sides of the XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="0dp" android:right="0dp" android:top="0dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<corners android:radius="0dp" />
<stroke android:width="3dp" android:color="#000000" />
</shape>
</item>
</layer-list>
I want to have a shape element with a two color border outline. I can do a single color outline using the solid element, but this only allows me to draw a single line. I tried using two stroke elements within my shape, but that didn't work either.
Is there a way to either draw a shape within a shape or draw two lines around my shape (which has rounded corners, BTW).
I found that the <layer-list> is the best approach. Like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="6dp"
android:right="6dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#000000" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="8dp"
android:right="8dp"
android:top="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
<solid android:color="#android:color/white" />
<stroke
android:width="1dp"
android:color="#BDBDBD" />
</shape>
</item>
</layer-list>
You then need to put the proper margins on your listView row layout, but it works quite nicely.
so i have a work around but its ugly. the work around is to wrap my element inside another container element. i.e.
<RelativeLayout ... android:background="#drawable/outer">
<ListView ... android:background="#drawable/inner" />
</RelativeLayout>