Creating this shape (Attached picture) in Android XML? - android

I know this question is very brief but how can I create this shape in XML for an Android Studio project?
It seems like I can create a rectangle and then remove a semi circle portion from it but achieving that effect in XML seems very difficult. Has anyone done this before?


Create such background with pure xml drawables is always tricky, but possible.
I've created button you need in xml. Add this files to your drawable folder:
circle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!-- inset - moves circle to the left-->
<inset android:insetLeft="-150dp">
<shape android:shape="ring"
android:thicknessRatio="7"
android:innerRadius="0dp"
android:useLevel="false"
>
<stroke android:width="2dp" android:color="#000000"/>
<solid android:color="#ffffff"/>
</shape>
</inset>
</item>
</selector>
custom_button_default.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="#00ff00"/>
<stroke
android:color="#000000"
android:width="2dp"/>
</shape>
</item>
<item android:drawable="#drawable/circle" />
</layer-list>
custom_button_pressed.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="#dddddd"/>
<stroke
android:color="#000000"
android:width="2dp"/>
</shape>
</item>
<item android:drawable="#drawable/circle" />
</layer-list>
custom_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/custom_button_pressed" />
<item android:drawable="#drawable/custom_button_default"/>
</selector>
Set custom_button_selector drawable as a background of your view in layout:
<Button
android:layout_width="150dp"
android:layout_height="100dp"
android:id="#+id/button"
android:background="#drawable/custom_button_selector"
/>
You probably will have to adjust circle insetLeft value and button width, height in layout. Would be better to have this variables defined in values/dimens.xml.
Default state:
Pressed state:
I've tested it on Nexus 5 and Nexus 7 - button background looks the same.


Hi you ca use convert online tools http://www.online-convert.com/ after convert svg to xml android file this site http://inloop.github.io/svg2android/

Related

How to have bottom line programmatically just like in default edittext with gradientdrawable in android

It will draw a bottom underline and i want to simply achieve below xml code by using gradientdrawable, I am trying to have custom edit text class which used in xml and set some property like bottom line color or others.
<?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"
android:top="-6dp">
<shape>
<stroke
android:width="1dp"
android:color="#000" />
</shape>
</item>
</layer-list>

First create gradient file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="180" android:startColor="#7c0000" android:endColor="#ff9a9a"/>
</shape>
and than add it here :
<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 android:drawable="#drawable/gradient" android:gravity="bottom" android:height="2dp"/>
</layer-list>

Custom button looks different on lower API in Android

hello i tried solution posted on Stack overflow but not working please help on this problem.Am using custom Button which is in drawable folder
button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_not_pressed" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/button_pressed" android:state_pressed="true"/>
</selector>
button_pressed.xml
<?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="#009688"/>
<corners android:radius="1dp"/>
<gradient android:startColor="#color/header" android:centerColor="#color/header"
android:endColor="#color/header" android:angle="270"/>
</shape>
button_not_pressed.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="0.4dp" android:color="#color/header"/>
<corners android:radius="0dp"/>
</shape>
but on lower API screen look like this
Above API 17 it look's like this
This is the actual design i done for Button

Add this in both drawable:
<solid android:color="#android:color/transparent" />

I encountered such problem in 15 api.
Add into shape
<solid android:color="#android:color/transparent"/>
or what color you need.
It helped me.

Custom drawable with Layer-list

I'm going to create a drawable like below image that is included an arrow image.
When I use layer-list , arrow image appear in middle of my drawable!!!
Please let me know how can I achieve it ...
UPDATE:
This is my Layer-List:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#d5d5d5"/>
<stroke android:width="1dp" android:color="#242425"/>
</shape>
</item>
<item android:drawable="#drawable/ic_arrow"></item>

Make a drawable resource file set bitmap as the root element, then set the android:gravity="left" and use this bitmap file as drawable in your layer-list item.
<?xml version="1.0" encoding="utf-8"?>
<bitmap
android:gravity="left"
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/ic_launcher"/>
layer-list:
<?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="#color/blue" />
<solid android:color="#color/silver" />
</shape>
</item>
<item android:drawable="#drawable/stack" />
</layer-list>

Gravity for xml drawable

I want to create a custom View based on ImageView to make a widget as below where the drawable source is the camera and the background is the rectangle with the tick sign:
The problems are:
I can not create the border with the tick sign on the right: the tick is stretched fullscreen instead of staying at the bottom right.
The tick sign is sometime behind the image if I set it with android:background.
Here are my xml files:
The current border xml 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="#android:color/transparent"/>
<stroke
android:width="2dip"
android:color="#color/bg_black"/>
<padding
android:left="3dp"
android:right="3dp"
android:top="3dp"
android:bottom="3dp"
/>
</shape>
</item>
<item >
<layer-list >
<item>
<shape
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/border_yellow"/>
<size
android:width="37dp"
android:height="37dp"/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
</shape>
</item>
<item android:drawable="#drawable/ic_tick"/>
</layer-list>
</item>
</layer-list>
The Image Button xml layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/product1"
android:background="#drawable/toggle_rectangle_check"/>
Thanks for your time.

I'm not sure if this is the sort of solution you'd be looking for but instead of having an xml file with the styling in it, I believe it would be better to have a layout file which defines your layout for your custom Widget, Something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customWidgetBox"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customCheckmark"
android:gravity="bottom|right" />
</LinearLayout>
And to the drawable folder you would need to add both the customCheckmark.xml and customWidgetBox.xml
customCheckmark.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/check_mark">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
customWidgetBox.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/camera">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
Not sure if this code accomplish exactly what you want, but it'll be a good help to get you started because this is definitely the way to do it! :)
Some links that might be interesting for examples:
Set border and background color of textView
Drawable Resource, Android API
how to put a border around an android textview
Tips & Tricks -XML Drawables Part 1

How to get gravity 'bottom' working on a drawable in xml

I have a simple aim. I want a light grey background on my FrameLayout with a black dividing line underneath it (only undernearth, not all around). So far I have this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" android:gravity="center">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item>
<shape android:shape="line" android:gravity="bottom" >
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
But it draws the line through the centre, i.e. ignores the gravity='bottom' bit. How can I fix this?
EDIT: This question is very old. The selected answer may or may not be in-line with current APIs, etc. You are encouraged to start your own question rather than add to this one, which is no longer monitored.

I've struggled a lot with this as well. Basically, to create a border at the bottom, you have to think in opposite direction from what you expect. You start with a rectangle with your Border color. On top of that, you draw the actual color, with an offset from the bottom.
I use this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- CREATE A RECTANGLE WITH YOUR BORDER COLOR -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff"/>
</shape>
</item>
<!-- NOW DEFINE THE NORMAL COLOR-->
<item android:bottom="BOTTOM_BORDER_THICKNESS E.G. 4dp">
<shape android:shape="rectangle" >
<solid android:color="#ccc"/>
</shape>
</item>
</layer-list>
Or, as Juan Pablo Saraceno suggested :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<color android:color="YOUR_BORDER_COLOR" />
</item>
<item android:top="YOUR_BORDER_THICKNESS">
<color android:color="YOUR_BG_COLOR" />
</item>
</layer-list>

Unfortunately I have not found a way to get the gravity working for drawables, but I found how you can achieve what you want with pure xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-2dp"
android:left="-2dp"
android:right="0dp"
android:bottom="1dp"
>
<shape android:shape="rectangle">
<solid android:color="#EEEEEE"/>
<stroke android:width="1dp" android:color="#010101"/>
</shape>
</item>
</layer-list>
Good luck:)

I'd recommend using a nine-patch image for this - here's an example that should do the job:
(It's only tiny but it is there!)
If you place this in your drawable folder and set your FrameLayout's background to it then you should get the desired result. The content will go in the grey area and the #010101 pixel will be stretched horizontally to form a line at the bottom. Just make sure to keep the .9.png extension to ensure it gets loaded as a nine-patch.
Hope that helps you

This works!
<item>
<bitmap
android:gravity="left|bottom"
android:src="#drawable/myDrawable" />
</item>

I know it's pretty old question but given answers didn't work for me. Turns out in order to gravity property work you just need to add size tag in drawable item.
So following will work as expected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item
android:gravity="bottom">
<shape android:shape="line">
<size android:height="2dp"/>
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
ps. this feature added in api level 23
https://developer.android.com/reference/android/graphics/drawable/LayerDrawable#setLayerGravity%28int,%20int%29

<?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/Black" />
</shape>
</item>
<item android:bottom="5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/White" />
</shape>
</item>
</layer-list>

Well, it's pretty old question, but none of the answers seem to answer the actual question (how to make gravity working) so here's a working example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#2196F3"/> <!-- Background color -->
</item>
<item android:gravity="bottom">
<shape>
<size android:height="10dp" /> <!-- I would suggest 1dp -->
<solid android:color="#F50057" /> <!-- Line color -->
</shape>
</item>
</layer-list>
By analogy, if you want to use gravity left or right change attribute height to width

Categories

Resources