I have found that to add borders around views I can use the following code as a background for the view:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="1dp" android:color="#999999" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>
But what if I want a border just for bottom, or top or right or left? I tried the following:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:color="#000"/>
</shape>
but when I set it as background
android:background="#drawable/my_border"
it draws the line at the middle of the view, so I have a strike-through effect. Is there any way I can draw this line at the bottom or at the top or make it vertical?
In WPF we have a relative coordinates for shapes, so I can offset lines as needed. Is there something similar on Android? If we don't have borders, at least we should have good line shape drawing tools, so we can draw borders as needed. Do Android developers plan to do something about it?
For border line on the top or bottom of you view, you can check my previous answer here. It is a very simple way.
Are u looking for this:
<item android:state_pressed="false">
<inset
android:insetBottom="-3dp"
android:insetLeft="-3dp"
android:insetTop="-3dp" >
<shape >
<corners android:radius="0.0dip" />
<stroke android:width="2.0dip" android:color="#EEE"/>
</shape>
</inset>
</item>
it will show a border only at the right. And u have to set it as the background
Related
I know the solid color and also the corner section but
I want to know how can I fill color of the corner
Try using stroke in your layout file. stroke can give you the border colour and width.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/yourcolour"
android:width="4dp"
/>
//Other adjustments
</shape>
Let me know if this is what you were looking for
Or if you want something like in your image try the below
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<stroke android:color="#android:color/black"
android:width="10dp"
/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_blue_bright"/>
<stroke android:color="#android:color/black"
android:width="10dp"
/>
<corners android:bottomLeftRadius="150dp"/>
</shape>
</item>
</layer-list>
It seems you talking about that red colour on above image.
In that case, there is no property which give you such result.
You need to make it logically., Like take 2 views with diff background,
Red background with black colour stroke.
Sky background overlaping on 1st red view.
And simply make top view background as rounded with black color stroke. It will provide you the desired design layout.
Make sure you give same stroke to both view so that itlook to be same.
Happy coding.
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!
My goal:
Figure 1: The Goal
So, before I knew about the issue, here's what I tried.
First, a base layout:
<LinearLayout
android:orientation="horizontal"
android:layout_below="#id/heading"
android:layout_marginTop="10dp"
android:layout_width="#dimen/horizontal_two_button_width"
android:layout_height="#dimen/button_height_small" >
<Button
android:id="#+id/button_one"
android:layout_width="0dp"
android:layout_weight="1.0"
android:layout_height="fill_parent"
android:padding="10dp"
style="#style/ButtonText"
android:background="#drawable/button_left_green" />
<Button
android:id="#+id/button_two"
android:layout_width="0dp"
android:layout_weight="1.0"
android:layout_height="fill_parent"
android:padding="10dp"
style="#style/ButtonText"
android:background="#drawable/button_right_green" />
</LinearLayout>
The 'button_left_green' drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_left_green_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_left_green_focused"
android:state_focused="true" />
<item android:drawable="#drawable/button_left_green_default" />
</selector>
And, for example, the 'button_left_green_default' drawable:
<?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/shadow" />
<corners
android:radius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="0dp" />
</shape>
</item>
<item
android:bottom="19dp"
android:top="1dp"
android:left="1dp"
android:right="1dp" >
<shape android:shape="rectangle">
<gradient
android:startColor="#color/button_left_green_top_gradient_start"
android:endColor="#color/button_left_green_top_gradient_end"
android:angle="270" />
<corners
android:radius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
</shape>
</item>
<item
android:top="19dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp" >
<shape android:shape="rectangle" >
<solid android:color="#color/button_left_green_bottom_gradient" />
<corners
android:radius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="0dp" />
</shape>
</item>
</layer-list>
So, after all that, I got the image in Figure 2:
Figure 2: Take One
After double-checking the definition of the bottom corners, I was convinced I was crazy until I found the known issue: http://code.google.com/p/android/issues/detail?id=9161
I'd rather not just swap them, 'cause then if/when the issue is fixed, the buttons will be broken in newer versions.
One idea I had was to leave the actual buttons as regular rectangles (i.e. no corner radii) and wrapping both buttons with a rounded rectangle. I added a background drawable to the LinearLayout which had rounded corners, but the button corners overlapped the edge of the LinearLayout rounded edge (see Figure 3).
Figure 3: Take Two
How can I keep the button's background within the bounds of its parent's background drawable? Or do you have any other suggestions on how to work around the bug?
Another solution is to create another folder called "drawable-v12".
In here put the correct radius (so bottomLeftRadius, topLeftRadius), and in the original drawable folder put in the swapped values. Then 3.1+ will use the v12 folder, and pre 3.1 versions will use the drawable folder.
This feels like such a hack, but it worked.
The buttons were originally made up of (1) an outer shadow, (2) a top-half gradient and (3) a bottom solid color. Here's what I did:
Made the top and bottom halves each rounded on all four corners. This left (1) a gap in the middle of the left and right sides and (2) rounded corners on the right.
Created a small rectangle to fill in the gap in the left middle.
Created another small rectangle to both fill in the gap in the right middle and make the top and bottom corners on the right side square.
Here's an example of the XML for the normal state of the left button.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Main part of button -->
<item
android:bottom="20dp"
android:right="5dp" >
<shape android:shape="rectangle">
<solid android:color="#color/button_normal_green_top" />
<corners android:radius="5dp" />
</shape>
</item>
<item
android:top="20dp"
android:right="5dp" >
<shape
android:shape="rectangle" >
<solid android:color="#color/button_normal_green_bottom" />
<corners android:radius="5dp" />
</shape>
</item>
<!-- Patch left middle part of button, which was left empty due to rounded
corners on top and bottom halves of button -->
<item
android:top="5dp"
android:bottom="20dp"
android:right="5dp" >
<shape android:shape="rectangle">
<solid android:color="#color/button_normal_green_top" />
</shape>
</item>
<item
android:top="20dp"
android:bottom="5dp"
android:right="5dp" >
<shape
android:shape="rectangle" >
<solid android:color="#color/button_normal_green_bottom" />
</shape>
</item>
<!-- Patch right middle and make right side corners square -->
<item
android:bottom="20dp"
android:left="15dp" >
<shape android:shape="rectangle">
<solid android:color="#color/button_normal_green_top" />
</shape>
</item>
<item
android:top="20dp"
android:left="15dp" >
<shape android:shape="rectangle" >
<solid android:color="#color/button_normal_green_bottom" />
</shape>
</item>
</layer-list>
I did, however, lose the gradient on the top half, but I can live with the two-tone button. Here's what the result looks like:
This appears to have been fixed in Android 3.0. And there's a comment on the issue that explains how to have backwards compatibility.
It should work if we provide already left right swapped configuration; so that bug swap will restore the configuration required, as below for left only curved, and righ sharp edged button
<corners android:radius="2dp" android:topLeftRadius="2dp"
android:topRightRadius="0dp" android:bottomLeftRadius="0dp"
android:bottomRightRadius="2dp">
A better solution:
Create another folder values-12
Create dimensions.xml file under values-12.
Put 2 dimension properties in values-12/dimensions.xml for the bottom left, and
bottom right corner radius.
Put 2 dimension properties in values/dimensions.xml for bottom left, and bottom right corner radius values, but remember to flip them.
Use the dimension values when assigning corner radius instead of hardcoding them in your drawables. When a pre 3.1 loads, it will use the reversed corner radius values under folder values. When 3.1+ loads, it will use correct corner radius values under folder values-12.
Why is this better? You don't need to duplicate drawable code. Now you can change any code not related to corner radiuses without having to update 2 or more places.
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>
I want to make a shape with with left-top rounded corner and left-bottom rounded corner:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#555555"/>
<stroke android:width="3dp"
android:color="#555555"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners android:bottomRightRadius="0dp" android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp" android:topRightRadius="0dp"/>
</shape>
But the shape above didn't give me what I want. It gives me a rectangle without any rounded corners.
It looks like a bug http://code.google.com/p/android/issues/detail?id=939.
Finally I have to write something like this:
<stroke android:width="3dp"
android:color="#555555"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners android:radius="1dp"
android:bottomRightRadius="2dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="2dp" android:topRightRadius="0dp"/>
I have to specify android:bottomRightRadius="2dp" for left-bottom rounded corner (another bug here).
While this question has been answered already (it's a bug that causes bottomLeftRadius and bottomRightRadius to be reversed), the bug has been fixed in android 3.1 (api level 12 - tested on the emulator).
So to make sure your drawables look correct on all platforms, you should put "corrected" versions of the drawables (i.e. where bottom left/right radii are actually correct in the xml) in the res/drawable-v12 folder of your app. This way all devices using an android version >= 12 will use the correct drawable files, while devices using older versions of android will use the "workaround" drawables that are located in the res/drawables folder.
From the documentation:
NOTE: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific
corners to not be rounded, a work-around is to use android:radius to
set a default corner radius greater than 1, but then override each and
every corner with the values you really want, providing zero ("0dp")
where you don't want rounded corners.
E.g. you have to set an android:radius="<bigger than 1dp>" to be able to do what you want:
<corners
android:radius="2dp"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp"/>
You can also use extremely small numbers for your radius'.
<corners
android:bottomRightRadius="0.1dp" android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp" android:topRightRadius="0.1dp" />
for others there are a solution for any API level , you can place a item on top of each other example :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- my firt item with 4 corners radius(8dp)
-->
<item>
<shape>
<solid
android:angle="270.0"
android:color="#3D689A" />
<corners android:topLeftRadius="8dp" />
</shape>
</item>
<!-- my second item is on top right for a fake corner radius(0dp)
-->
<item
android:bottom="30dp"
android:left="50dp">
<shape>
<solid android:color="#5C83AF" />
</shape>
</item>
<!-- my third item is on bottom left for a fake corner radius(0dp)
-->
<item
android:right="50dp"
android:top="30dp">
<shape>
<solid android:color="#5C83AF" />
</shape>
</item>
</layer-list>
the result with light color to show you the three items :
the final result :
Best regards.
This bug is filed here.
This is a bug of android devices having API level less than 12.
You've to put correct versions of your layouts in drawable-v12 folder which will be used for API level 12 or higher.
And an erroneous version(corners switched/reversed) of the same layout will be put in the default drawable folder which will be used by the devices having API level less than 12.
For example: I had to design a button with rounded corner at bottom-right.
In 'drawable' folder - button.xml: I had to make bottom-left corner rounded.
<shape>
<corners android:bottomLeftRadius="15dp"/>
</shape>
In 'drawable-v12' folder - button.xml: Correct version of the layout was placed here to be used for API level 12 or higher.
<shape>
<corners android:bottomLeftRadius="15dp"/>
</shape>
try this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/upkia"/>
<corners android:radius="10dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp" />
</shape>
This works for me
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
<corners
android:bottomLeftRadius="0dp"
android:radius="#dimen/dimen_5dp"
android:topLeftRadius="0dp" />
</shape>