I want to get shape similar to what you can see below. The thing I am missing is the header color (the color behind Anonymous text). I've reproduced what I wanted by simply moving mouse over second textview which is now highlighted and makes this effect :)
Current code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2dp" android:color="#000000" />
<gradient android:startColor="#898989" android:endColor="#B5B5B5" android:angle="270"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>
You need to use a Layer List that contains two drawables.
For example, the first will cover the whole shape, and the second will overlay it but with android:top="10dp" set, to create an offset showing the underlying first shape
Edit:
Like so:
<?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="2dp"
android:color="#000000" />
<solid android:color="#00ff00" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="20dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#B5B5B5"
android:startColor="#898989" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp" />
</shape>
</item>
</layer-list>
Use a LinearLayout and place two TextView with different shapes as background.
The first one having its upper corners rounded and the second one its bottom corners.
this tools might be helpful further in development
http://angrytools.com/
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Related
I am adding a ViewPager to my app, together with an picture indicator.
I want the shape of the indicator to be a thin line instead of the usual dots.
For that, I have taken a reference from this answer here.
I have tried to modify the XML files given, like this:
default_dot.xml ---> default_line.xml
<?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:shape="line">
<solid android:color="#android:color/darker_gray"/>
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
</layer-list>
selected_dot.xml -----> selected_line.xml
<?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:shape="line">
<solid android:color="#color/colorAccent"/>
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
</layer-list>
And the file tab_selector.xml remains the same, just change the name of the corresponding xml files.
So, well, the result of all this, is that, the selected_line.xml (the pink one) is showed, however, the default_line.xml is not showed, so I can just see the pink like moving to the right/left as I swipe the pictures, but no default grey lines.
Please make changes to your selected_line.xml as follows
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="#dimen/activity_horizontal_margin"
android:color="#color/colorAccent" />
<size android:height="1dp" />
<solid android:color="#color/colorAccent" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
I am using the following code to get rounded corners as well as a colored outline:
<?xml version="1.0" encoding="UTF-8"?>
<gradient
android:startColor="#color/white"
android:endColor="#color/white" />
<corners
android:bottomRightRadius="2dp"
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
<stroke
android:width="5dip"
android:color="#color/black" />
The image displays what I'm getting right now. Due to the stroke, the rounded corners only lie on the outer edge of the layout and the inner edge of the black outline makes a rectangle with sharp edges. How can I convert the sharp edges to rounded corners?
Use the <shape> tag to create a drawable in XML with rounded corners. (You can do other stuff with the shape tag like define a color gradient as well).
Following code may help you:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
Use this customize according to your need.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke
android:width="4dp"
android:color="#android:color/holo_blue_light" />
<corners android:radius="6dp" />
</shape>
I had this drawable to have a rounded rectangle as a background:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<stroke android:width="1dp" android:color="#color/light_gray" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
<corners android:radius="6dp" />
</shape>
This is working fine, as expected.
Now, I want to change this to only round the top corners, so I change it to this:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<stroke android:width="1dp" android:color="#color/light_gray" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
<corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>
But now none of the corners are rounded and I get a plain rectangle. What am I missing here?
Try giving these values:
<corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>
Note that I have changed 0dp to 0.1dp.
EDIT: See Aleks G comment below for a cleaner version
Try to do something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="-20dp" android:left="-20dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="20dp" />
</shape>
</item>
</layer-list>
It seems does not suitable to set different corner radius of rectangle. So you can use this hack.
In my case below code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="10dp" android:bottom="-10dp"
>
<shape android:shape="rectangle">
<solid android:color="#color/maincolor" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
/>
</shape>
</item>
</layer-list>
bg.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<corners android:topLeftRadius="24dp" android:topRightRadius="24dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>
add in your layout:
android:background="#drawable/bg"
Building upon busylee's answer, this is how you can make a drawable that only has one unrounded corner (top-left, in this 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="#color/white" />
<!-- A numeric value is specified in "radius" for demonstrative purposes only,
it should be #dimen/val_name -->
<corners android:radius="10dp" />
</shape>
</item>
<!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
<item
android:bottom="10dp"
android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
Please note that the above drawable is not shown correctly in the Android Studio preview (2.0.0p7). To preview it anyway, create another view and use this as android:background="#drawable/...".
try to use MaterialShapeDrawable and configure it in kotlin/java code.
val backgroundShapeModel:ShapeAppearanceModel = ShapeAppearanceModel.builder()
.setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
.setTopRightCorner(CornerFamily.ROUNDED, 16F.toPx)
.build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
fillColor = ColorStateList.valueOf(Color.GREEN)
}
P.S:
In addition to abilities that xml drawables provides (fillColor, stroke...), MaterialShapeDrawable supports:
cornerFamily in two category: rounded and cut
edgeTreatment with TriangleEdgeTreatment, OffsetEdgeTreatment, ...
doesn't need to context and getting resource
]
val backgroundShapeModel = ShapeAppearanceModel.builder()
.setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
.setTopRightCorner(CornerFamily.CUT, 16F.toPx)
.setAllEdges(TriangleEdgeTreatment(5f.toPx, true))
.build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
fillColor = ColorStateList.valueOf(Color.GREEN)
setStroke(2f.toPx,Color.RED)
}
You may need read this https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
and below there is a Note.
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.
Create roung_top_corners.xml on drawable and copy the below code
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="22dp"
android:topRightRadius="22dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
/>
<gradient
android:angle="180"
android:startColor="#1d2b32"
android:centerColor="#465059"
android:endColor="#687079"
android:type="linear" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/></shape>
I tried your code and got a top rounded corner button. I gave the colors as #ffffff and stroke I gave #C0C0C0.
try
Giving android : bottomLeftRadius="0.1dp" instead of 0. if its not working
Check in what drawable and the emulator's resolution. I created a drawable folder under res and using it. (hdpi, mdpi ldpi) the folder you have this XML.
this is my output.
Try removing these attributes altogether.
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"
In My android xml layout i am applying the border by using the borderframe.xml as a background.
borderframe.xml file is looks like below:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#ffffff"/>
<solid
android:color="#95865F"/>
<corners
android:radius="10px"/>
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
</shape>
Now, While there is a android:radius="10px" then it is works but while i am going to give round shape to specific corner only then it not works.
There is no any erro message in log cat but i found error in eclipse like:
The graphics preview in the layout editor may not be accurate:
* Different corner sizes are not supported in Path.addRoundRect.
Even if there is no padding in that xml file then also i am not able to see any border.
Now, what should i have to do for it ?
and whats the sollution of it if i want to create the rounded border for only topLeftcorner and bottomLeftCorner. ?
Thanks.
I am also facing the same problem. But for that I use layer-list. I post my answer here which may help you. Please check output screen
<?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="1dp" android:color="#c1c1c1" />
<solid android:color="#c1c1c1" />
<corners android:radius="20dp"/>
</shape>
</item>
<item android:right="20dp"
>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#c1c1c1" />
<solid android:color="#c1c1c1" />
</shape>
</item>
</layer-list>
You'll have to do that, assuming you only want a rounded top left corner:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="20sp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" />
<gradient
android:startColor="#color/logo_blue"
android:endColor="#color/blue"
android:angle="0"/>
</shape>
Explanation: 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. [source]
As a consequence, you need to define your drawable as:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#ffffff"/>
<solid
android:color="#95865F"/>
<corners
android:radius="10px"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
</shape>
Update
From The Shape Drawable Resource Android Documentation:
android:radius
Dimension. The radius for all corners, as a dimension
value or dimension resource. This is overridden for each corner by the
following attributes.
overridden is the keyword for your problem…
I'm using SDK tools 19, platform-tools 11 and running the app in Android 4.0.3. Using the following XML 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="#dd000000"/>
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
The Eclipse warning is about not being able to show the preview. In het app it shows up correct.
I got the solution on one of the forums. I solved it by commenting each corner & adding to the xml in drawable. I have retained commented code below only for understanding.
XML Code-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#fd2149" />
<stroke android:width="1dip" android:color="#ffd102"/>
<!-- <corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
-->
<corners android:radius="8dp" />
</shape>
---Edited-
The above code is my back.xml in drawable folder and if required you can add padding to the same back.xml. For those who are new developers, the back.xml is referenced from your layout file as follows
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:scrollbars="vertical"
android:background="#drawable/back">
Hope this helps.
I am trying to make a drawable to use for a button. I would like it to have this coloring, with a 2px border around it.
Everything works just fine except I cannot get the border to show up...
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient android:startColor="#color/bar_clicked_dark"
android:endColor="#color/bar_clicked_light"
android:angle="90"/>
<corners android:bottomLeftRadius="0dp"
android:topLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topRightRadius="0dp" />
<stroke android:width="2dp"
color="#ff00ffff" />
</shape>
It looks like you forgot the prefix on the color attribute. Try
<stroke android:width="2dp" android:color="#ff00ffff"/>
If you want make a border in a shape xml. You need to use:
For the external border,you need to use:
<stroke/>
For the internal background,you need to use:
<solid/>
If you want to set corners,you need to use:
<corners/>
If you want a padding betwen border and the internal elements,you need to use:
<padding/>
Here is a shape xml example using the above items. It works for me
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#D0CFCC" />
<solid android:color="#F8F7F5" />
<corners android:radius="10dp" />
<padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" />
</shape>
We can add drawable .xml like below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_C4CDD5"/>
<corners android:radius="8dp"/>
<solid
android:color="#color/color_white"/>
</shape>