Trying to use LayerDrawable (defined in XML as layer-list) to layer several shape drawables onto one another; to be used as a background for a layout.
The Android guide (for LayerList) says:
All drawable items are scaled to fit the size of the containing View,
by default. Thus, placing your images in a layer list at different
positions might increase the size of the View and some images scale as
appropriate. To avoid scaling items in the list, use a <bitmap>
element inside the <item> element to specify the drawable and define
the gravity to something that does not scale, such as "center".
I don't want my shapes to scale, but I'm unsure how to wrap them in bitmap tags correctly: it produces an error if I do it as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="#drawable/layer_one"
android:gravity="center" />
</item>
<item>
<bitmap
android:src="#drawable/layer_two"
android:gravity="center" />
</item>
<item>
<bitmap
android:src="#drawable/layer_three"
android:gravity="center" />
</item>
<item>
<bitmap
android:src="#drawable/layer_four"
android:gravity="center" />
</item>
</layer-list>
Complaining:
Binary XML file line #25: <bitmap> requires a valid src attribute
An example of one of the drawables, e.g. res/drawable/layer_one.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/layer_one.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
The example used on the Android site uses images as drawables, not XML-defined shapes (not to say that my error is specific to these, and that I haven't made a silly mistake somewhere). Any clues appreciated, thanks.
Using drawable resources
This question's answer states that you cannot use an XML drawable as the src for a Bitmap. I've amended the title of the question, to now ask how you can prevent shapes from scaling (thereby resizing the container view) without using bitmap, or am I forced to use actual image resources?
Added an image of the desired outcome - the ability to have a background with a regular rectangle filled shape or whatever, and then layered on top of this, more shape drawables (here there are 3 ellipses). On the left is ideal, where top and left offsets are allowed, and on the right is fine, where all shapes just go to a default position:
Yes, (as per my previous answer) you cant use xml drawable for bitmaps. It is fine to build, but when you run the app, it crashes.
Regarding the statement use a <bitmap> element inside the <item> element means that you can define further shapes in your layer-list and that's what it is for. Though you can also define Bitmaps but then your bitmaps should have a src value referring to solid image (not xml).
What you can do is to insert the layer_one, layer_two and other layer's xml into your layer_list xml. For example:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
</item>
<!-- and so on with your other shapes -->
</layer-list>
Hope it should work :)
Related
I am trying to get a glow effect like the background for edittext
I tried doing it but the background is not as much effective as the image
<?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="#68F30606"/>
<corners android:radius="10dp" />
</shape>
</item>
<item
android:left="1.7dp"
android:right="1.7dp"
android:top="1.7dp"
android:bottom="1.7dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
Can someone help me to solve this mystery?
Then you will need to use the old-technique(kind of) of 9-Patch Drawing. I used to do it too. Examples are scarce because they are big, but there is documentation.
Documentation: https://developer.android.com/studio/write/draw9patch.
Also, if this helps you can check this too: Outer glow in edittext
To use the 9-Patch images in Xml to this (remember this is after you have created the 9-Patch Images):
Reference the drawable with the name but don't include .9.png (auto-complete in eclipse will take care of this)
Make sure you only have 1 image under the main /drawable folder (not a version for each dpi folder)
The image must be specified using :background, not :src (this got me stuck for a while)
android:background="#drawable/splash_logo"
Make sure the image and layout that contains it are using:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Credit To: Creating & Using 9-patch images in Android
Also, check this website out, it contains a lot of useful examples that the documentation doesn't provide:
https://tekeye.uk/android/examples/ui/android-9-patch-image-files
I'm making an app with custom buttons, but I want to know is it better to use the nine-patch tool or define styles and colors in xml. My buttons change in height and width but they do not have images, just words, something like this:
Please check this link also. What should i use for better performance, nine-patch or drawable xml resource?. Both approaches have is own merits. Select one option as per your situation
no you don't need to use nine-patch just give the width,height,and text sizes in values folder.
Seems like a fairly simple shape, you might as well use a shape to create the background.
first create a button_shape.xml file in drawable resource directory:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#505050"/>
<corners
android:radius="7dp" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
<solid android:color="#505050"/>
</shape>
Now, assign it to the backround of you Button.
android:background="#drawable/button_shape"
You will need to change some of the color values to fit your needs
I'm trying to create an button with xml gradient code. (Because I'm a new user can't upload the image :( ) This image has two colors and corners in its edges.The color which starts the gradient will start from 15% of all gradient length and ending color ends on 75% of gradient length.
I use this code to create Gradient with two colors:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<gradient
android:angle="-45"
android:startColor="#64bcfb"
android:endColor="#2f8fd4"
android:type="linear"/>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
The problem is that i don't know how to add the start percentage and the end percentage of gradient.I have some searches about this and ind some things in:
banded background with two colors?
Gradients and shadows on buttons
in both there is some solutions but i it's not work for me. The solutions is about creating a simple bar with two colors but i want to create a button that have some corners in its edges also.
I cant also use the original image in my app because i need to changes its colors pragmatically.
Have any body some idea about how we can add percentages in gradients?
This is quite old but no answer and I think I was having the issue and found a fix.
If you only need a gradient with 2 colors, a single transition and with corners, you can do the following:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<gradient
android:angle="270"
android:startColor="#android:color/transparent"
android:centerColor="#android:color/transparent"
android:centerY="0.65"
android:endColor="#color/colorPrimary"
android:type="linear" />
</shape>
The trick here is adding a centerColor and centerY and modifying it's center. This will allow you to modify where the transition occur.
I want to show edit text box with two sides. so, for that i need to create a rectangle shape with two sides. PLease help some one.
create a drawable under drawable folder and add the belwow contents (border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#color/black" />
<stroke android:width="1dip" android:color="#color/white"/>
</shape>
Now set the Background of the EditText to this draw able like :
android:background="#drawable/border"
I think the best way to do this is to create a 9-patch in PhotoShop with required border sides... there are also several other ways... depends on your design.
I want to provide a background drawable, similar to the one shown in the figure, to a layout. How can i do it using a drawable xml? Please suggest a suitable approach to go about this.
It is not possible to do this with single xml drawable but probably you can club two to create this effect. I would do it this way
Create a drawable of square type with black borders
Create a clip drawable and clip the bottom of sqaure drawable.
Reference here
http://developer.android.com/guide/topics/resources/drawable-resource.html#Clip
You can use the android:gravity="top" and then programmatically set the level to reveal 90% (or more) of the image
ImageView imageview = (ImageView) findViewById(R.id.image);
ClipDrawable drawable = (ClipDrawable) imageview.getDrawable();
drawable.setLevel(drawable.getLevel() + 9500);
I know this is 4+ years after the fact but for anyone else wanting to achieve the same result, there's a very simple way to achieve this by creating a layer-list xml drawable.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding
android:top="5dp"
android:left="5dp"
android:right="5dp" />
<solid
android:color="#android:color/black" />
</shape>
</item>
<item>
<shape>
<solid
android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Save this to your project's drawable folder and reference it like any other drawable (android:src / android:background, or programatically)