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.
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.
I'm trying to change the color of the stroke of a Drawable that I use as a background.
Here is my drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item
android:id="#+id/item_border_drawable"
android:left="16dp"
android:right="16dp"
android:top="16dp"
android:bottom="16dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- This is the stroke you want to define -->
<stroke android:width="3dp"
android:color="#color/itemLegendary"/>
<!-- Optional, round your corners -->
<corners android:bottomLeftRadius="0dp"
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
As you can see I use an item Rectangle to have a Background color, then another rectangle on top that draws a border around it but with 16dp of margin all around.
I want to change the color of the stroke in the MainActivity, without affecting the padding and background-color.
I tried to do as mentionned here:
Android change color stroke (border) programmatically
However it seems like it doesnt "change the color" but replace the whole Drawable and I don't want to have to give the information of the padding etc... once again.
Could you guys please help me to easily change the color of the border?
Regards.
I have a layout with 2-3 childs. Set linear layout backgroud to a following drawable using android:background property.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#373949"/>
<stroke android:width="3dip" android:color="#FFF"/>
<corners android:radius="30dip" />
<padding android:left="10dip" android:top="10dip" android:right="10dip" android:bottom="10dip" />
</shape>
But when set radius to 30dip, rounded corners getting displayed, but back to
layout default gray colored border with rectangular shape is displayed.
Is there any way to get rid of that ?
Thanks in advance
Try this code
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF"/>
<corners android:radius="15px"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
once you change the background of the view, this drawable will no longer be active to draw UI, hence the default layout of view will be applicable, so if you want gray layout to also be rounded, make another drawable, and set that drawable instead of gray color.
That rounded corner border that you see is of the parent of layout that you have changed background.If your cusytomized background belongs to your activity than the grey color you see belongs to system. You can use Hierarchy Viewer. To see it in detail.
you can also refer this for your reference.
I have a very simple shape that I want to set the width of:
<shape android:shape="rectangle">
<solid android:color="#color/orange"/>
<size android:width="2dp"/>
</shape>
However, when I assign this to the background of a EditText it just shows an orange background instead of a rectangle of width 2dp. Why isn't setting the size working? I want to create a transparent drawable with a orange rectangle on the left side. I also have this wrapped in a selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="#color/orange"/>
<size android:width="2dp" android:height="6dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</selector>
I've tried adding height just to see if it would change the size. It doesn't. It's like its completely ignoring the size. WTF?
For me, setting the gravity of the item to "center" solved the issue.
For example:
<item android:id="#android:id/progress" android:gravity="center">
<clip>
<shape>
<size android:height="2dp"/>
<solid android:color="#color/my_color"/>
</shape>
</clip>
</item>
It can work with a foreground. It seems like you can't set a background's gravity. But you can on a foreground. I checked API 21, 23 and 24 (well, with the Studio design preview) and the following places a solid circle dot on the ImageView.
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorPrimary" />
<size android:height="8dp" android:width="8dp" />
</shape>
With the layout snippet
<ImageView
android:foreground="#drawable/list_new_dot"
android:foregroundGravity="right|center_vertical"
tools:src="#drawable/model_1_sm"
/>
UPDATE: While it appears to work in the layout design tool, it doesn't look the same in the emulator. UPDATE 2: Since this answer has a few votes, you might want to check what I actually used in order to show a new indicator dot:
https://gist.github.com/CapnSpellcheck/4d4638aefd085c703b9d990a21ddc1eb
Just to specify the user983447's answer - the size attribute does really mean a proportion. You should set the size for all shapes in your layer-list and it'll be used a as a proportion when scaling - like the layout_weight attribute of LinearLayout. So it's better to name it not a size but a weight
Below is a work-around how to implement top and bottom white lines without using the size attribute:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#fff" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape>
<solid android:color="#888" />
</shape>
</item>
</layer-list>
I found the layer-list to be very devious for a first time Androider because of the following. At first glance most would think item top,bottom,right,left attributes are FROM the top,bottom,right,left. Where a value of the following:
<item android:top="10dp">
Would net you a starting point 10dp from the top of the respective container. This is not the case. Think of it as OFF OF the top,bottom,right,left. <item android:top="10dp"> will still net you a starting point 10dp OFF OF the top, but what happens when you want to set the bottom?
<item android:bottom="20dp">
This will not get you a bottom at 20dp from the TOP, rather a bottom of 20dp OFF OF the BOTTOM of the container.
So, for example with a 100dp container, if you wanted a rectangle with a top edge starting at 20dp and a bottom edge at 40dp:
<item android:top="20" android:bottom="60dp">
The size of a shape will be ignored when you use it as a background of a View. It will work when you show it via an ImageView:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF7700" />
<size android:width="20dp" android:height="20dp"/>
</shape>
In your layout XML:
<!-- will have the size of 20dp x 20dp -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_shape"
/>
I had similar problem.
Documentation ( http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape ) says:
<size>
The size of the shape.
(...)
Note: The shape scales to the size of the container View proportionate to the dimensions defined here, by default. When you use the shape in an ImageView, you can restrict scaling by setting the android:scaleType to "center".
If I understand correctly, it means that "size" tag is not for setting size but for setting proportions.
shape's size attribute will provide the value for drawable.getIntrinsicWidth & getIntrinsicHeight.
if the drawable's container(e.g. ImageView, TextView) has the layout param WRAP_CONTENT, then the container dimension will change if the drawable drawingState change.
but there are a bug in android framework in ImageView drawingState implementation
ImageView only update/resize its dimension by the drawable dimension on state_selected but don't on state_activated
used this.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:color="#color/lgray"
android:width="1dip" />
<corners
android:bottomLeftRadius="0dip"
android:bottomRightRadius="0.1dip"
android:topLeftRadius="0dip"
android:topRightRadius="0.1dip" />
<solid android:color="#color/White" />
</shape>
put this rectangle.xml to drawable.and set your view background.
I need to implement such button for my Android app. It would be great to do this without using full image as button.
I've done almost the same button using <shape> with <gradient>. The only thing I need is to add bottom blue button shadow and include image.
Is it possible?
Thanks in advance.
You can do this by combining Shape Drawables inside a Layered Drawable. To do so, you'll have 3 xml files as below:
button.xml (the one you already have i guess)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="16dp" />
<gradient
android:angle="270"
android:centerColor="#FFFFFF"
android:endColor="#CAEBF8"
android:startColor="#FFFFFF"
android:type="linear" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
<stroke
android:width="2dp"
android:color="#FFFFFF" />
</shape>
button_bg.xml (to add the blue border below the button)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="16dp" />
<solid android:color="#6FC8F1" />
</shape>
layered_button.xml (to combine the previous xml, and the drawable to use as background on your button)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_bg"/>
<item
android:bottom="2dp"
android:drawable="#drawable/button"/>
</layer-list>
You'll find more information on the Layer List in the Drawables Documentation
Make your button's android:background attribute to point your desired image. Create your image with the text and the little person icon. It's not possible to put a text and an image at the same time inside a button.
For the blue shadow, you can either include it in your image or achieve the same result with the gradient attribute as you already said in your question.
For the image, you should use
android:drawableRight
As for the shadow I'm not sure how this is achieved.