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>
Related
Please how can I achieve the image below as background for an image view.
Create my_shape.xml under res/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="#A5A5A5" />
<corners
android:bottomRightRadius="75dp"
android:topLeftRadius="100dp" />
</shape>
</item>
</layer-list>
Then, you can apply it to your view with:
android:background="#drawable/my_shape"
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/
I am trying to create a simple layer-list drawable for my Android app. When I set the drawable as src of an ImageView it is not drawn correctly:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Just two ovals with a little offset to each other. Nothing special (just a test) but it does not work.
It seems that android:left|right|bottom|top is the problem. If I use only of of these commands the drawable is drawn correctly. If two or more are used the ImageView stays empty.
Works:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Does NOT work (like the first example):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="..." >
<item android:top="20dp" android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
What is wrong here?
EDIT: # Rod_Algonquin
I use a quite simple layout to test the drawable:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#aaa" >
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/testDrawable" >
</ImageView>
</LinearLayout>
It seems that the number of android:left|right|bottom|top arguments is not the source of the problem but the concrete value being used.
This drawable works fine and:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
This one does not draw anything (the ImageView is just transparent):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="1dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
The only difference here is the value of android:top. 1dp does not work. 2dp works without any problem.
Any idea?
The problem is that you are using the layer-list drawable as an image resource of the ImageView. android:src will only accept an image not a drawable thus giving you nothing in there.
solution:
Instead of putting it in the android:src put it in the background where you can freely use the drawable.
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/testDrawable" >
</ImageView>
In ImageView i have set the rounded border as like below:
<ImageView
android:id="#+id/twsbiLogoButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right"
android:src="#drawable/tp_twsbi_logo"
android:background="#drawable/logo_layout_border"></ImageView>
where background is xml file like:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dip"
/>
<solid
android:color="#3D2A1D"/>
<corners
android:radius="20sp"
android:topRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
</shape>
But i also want to give the selector to that imageview so how it is podssible ?
are you talking about focus?
android:focusable="true"
We can do by using LayerList Just create one more xml 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:shape="rectangle">
<stroke
android:width="1dip"
/>
<solid
android:color="#3D2A1D"/>
<corners
android:radius="20sp"
android:topRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
</shape>
</item>
/* Now add more items which you use in the selector */
<item android:drawable="#drawable/postbutton_press" android:state_pressed="true"/>
<item android:drawable="#drawable/postbutton_press" android:state_focused="true"/>
<item android:drawable="#drawable/postbutton_normal"/>
</layer-list>
Now add this drawable to your android:background of the Imageview / Button.
I didn't test this. Guess it would work! Fingers crossed! :)...
I am using the following below code to round the corners of RelativeLayout. I save this as mybackground.xml in drawable folder.
It's working fine for rounding the corner but the problem is that I also want to add an transparent image as a background of my RelativeLayout. How can I achieve both things? How can I use an image and a drawable xml (for rounding the corner) at the same time for a RelativeLayout ...
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
</shape>
use Layer List and Item tag for setting Image and use solid tag and set the color as #AA000000 for transparent as shown below
<?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="rectangle" android:padding="10dp">
<solid android:color="#AA000000"/>
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/yourfilename"/>
</item>
</layer-list>
You can use Layer-List
It will be like 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:padding="10dp">
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
</shape>
</item>
<item><!-- your transparent image --></item>
</layer-list>
This one works. If you dont round corners of your pic you will not be able to see rounded corner too. Some friends talked about this in previous answers. They should round their image to see round effect.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/listviewback2">
<shape android:shape="rectangle" android:padding="10dp">
<corners
android:bottomRightRadius="35dp"
android:bottomLeftRadius="35dp"
android:topLeftRadius="35dp"
android:topRightRadius="35dp"/>
</shape>
</item>
</layer-list>
Try 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:shape="rectangle" android:padding="10dp">
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/background"/>
</item>
</layer-list>