Android Clip image to bounds - android

I have a custom #drawable as a background for a button. I have a bitmap and a shape on top of it. The problem is that the corners of the bitmap are not clipping to the shape, like illustrated bellow.
My question is: Is there a way to clip the bitmaps to the bounds the shape? How?
EDIT: Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid
android:color="#8F8F8F" />
<stroke
android:width="1dp"
android:color="#8f8f8f" />
<corners
android:radius="8dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<layer-list>
<item>
<!-- <nine-patch android:src="#drawable/button"/>-->
<bitmap android:src="#drawable/background_image" />
</item>
<item>
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#8f8f8f" />
<corners android:radius="12dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>

You will have to change alpha level at the corners or use Draw 9-patch tool to create the background

Related

Is it possible to have multiple borders on a shape?

I was wondering if it is possible to have multiple borders/"stroke" elements on a shape, or if I need to use an image (or a bunch of shapes covering each other). My code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:endColor="#color/editTextBG"
android:startColor="#color/editTextBG"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeInner" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeCenter" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeOuter" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
I've tried just using the code, which didn't work, and giving the earlier strokes a bigger width (so that the later, if drawn over, would only color part). However, it seems the last stroke overrides the others?
A workaround for borders is to overlay elements:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/colorAccent"/>
</item>
<item android:top="8dp">
<color android:color="#color/colorPrimaryDark"/>
</item>
<item android:top="16dp">
<color android:color="#color/colorPrimary"/>
</item>
<item android:top="32dp" android:right="8dp">
<color android:color="#android:color/holo_red_dark"/>
</item>
</layer-list>
This is the result:
The first element in the layer-list from top to bottom is the background and every other is mounted on top.
<item>
<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/colorWhite" />
<stroke
android:width="1dp"
android:color="#979797" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#ffd400" />
</shape>
</item>

Custom button in android & giving custom border color

I am Trying to get a clickable effect for a white button that shows clickable effect on clicking it
My button
What i have tried is
I have achieved clickable effect for the button using a selector as below
black_button_for_account.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#343434" />
<stroke
android:width="1dp"
android:color="#171717" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<corners android:radius="4dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</selector>
How to give a border of like 3dp size for the button retaining the above effect color for the border like be black?
just change the following
<stroke
android:width="3dp"
android:color="#000" />

Android Button's background as shape with Shadow

I've made a button background from shapes and is looking quite good for my purpose. The only thing needed is to drop a bit of shadow for it.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#343434" />
<stroke android:width="1dp" android:color="#171717" />
<corners android:radius="3dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
<item>
<shape>
<gradient android:angle="270" android:endColor="#E2E2E2" android:startColor="#BABABA" />
<stroke android:width="1dp" android:color="#BABABA" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</selector>
Here's what I want to achieve
How do I drop the shadow ? My guess is that I need to make another shape but with black/gray background and set some sort of topa nd left padding of margin to make it look like a shadow. But I don't know how to do it... and documentation didn't helped me too much.
Later Edit: I want to add the shadow in xml file and not by code.
Thanks.
If you want to stack more shapes one on top of each other then you could use a layer-list. Bellow is the code for the normal item in your selector(with a strip of gray color):
<item>
<layer-list>
<item android:right="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#D6D6D6" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="#E2E2E2" android:startColor="#BABABA" />
<stroke android:width="1dp" android:color="#BABABA" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
The problem is that you'll not be able to achieve a true shadow look on your Button with this type of drawable. You could use the code from the other answer or a nine patch image that already has shadow on it.
Try this...
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#000000" />
<corners android:radius="7dp" />
</shape>
</item>
<item
android:bottom="5px"
android:left="5px">
<shape>
<solid android:color="#FF0000" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>
Paint mShadow = new Paint();
// radius=10, y-offset=2, color=black
mShadow.setShadowLayer(10.0f, 0.0f, 2.0f, 0xFF000000);
// in onDraw(Canvas)
canvas.drawBitmap(bitmap, 0.0f, 0.0f, mShadow);
This code is from Android's Romain Guy available here : http://www.devoxx.com/download/attachments/1705921/D8_C_10_09_04.pdf
You may try this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom Shadow Darker Line-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/blue_darker" />
<corners android:radius="9dip" />
</shape>
</item>
<!-- Main Content Gradient -->
<item android:bottom="1dip">
<shape android:shape="rectangle" android:dither="false" >
<gradient
android:startColor="#color/blue_dark"
android:centerColor="#color/blue_medium"
android:endColor="#color/blue_light"
android:type="linear"
android:angle="90"/>
<corners android:radius="9dip" />
</shape>
</item>
<!-- Upper Shadow Dark Line -->
<item android:bottom="1dip" android:left="1dip" android:right="1dip">
<shape android:shape="rectangle" >
<gradient
android:centerX="0.98"
android:centerY="0"
android:startColor="#android:color/transparent"
android:centerColor="#android:color/transparent"
android:endColor="#color/blue_medium"
android:type="linear"
android:angle="90"/>
<corners android:radius="9dip" />
</shape>
</item>
you can try the following code also to get a smooth border shadow for view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#88000000" />
<corners android:radius="15dp" />
</shape>
</item>
<item
android:bottom="5px"
android:right="5px">
<shape>
<solid android:color="#55B0CF" />
<stroke
android:width="2dp"
android:color="#ffffff" />
<corners android:radius="7dp" />
</shape>
</item>
In this case I use lib https://github.com/dmytrodanylyk/shadow-layout
Firstly, you should turn on it in gradle
dependencies {
compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.3'
}
then put your Button into ShadowLayout
<com.dd.ShadowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:sl_shadowRadius="3dp"
app:sl_shadowColor="#color/your_color">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</com.dd.ShadowLayout>
It's worsk great for me)

Background for a button in android?

In my app I have set for a button the background to a certain color. I don't like how it looks like.The button is like a rectangle, with straight edges. I want that the button to have rounded corners. How is it possible?
Here is my button in xml :
<Button android:id="#+id/button" android:text="Participer au concours de photos"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="410dip" android:layout_centerHorizontal="true"
android:background="#drawable/orange1"/>
Thanks...
Use selector
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#24a1dd"
android:centerColor="#158ee4"
android:endColor="#37b8ee"
android:angle="270"
android:centerY="0.88" />
<stroke
android:width="3dp"
android:color="#00ffffff"
/>
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#59bfe6"
android:centerColor="#36aced"
android:startColor="#91def7"
android:angle="270"
android:centerY="0.88" />
<stroke
android:width="3dp"
android:color="#00ffffff"
/>
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#e1e1e1"
android:centerColor="#bdbebd"
android:startColor="#f6f2f6"
android:angle="270"
android:centerY="0.88" />
<stroke
android:width="3dp"
android:color="#00ffffff"
/>
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Something like this should do the work. Just fix the color values. Which is the same as the the answer of this question Standard Android Button with a different color
There are two ways :
Use 9 patch drawables (png image)
here is complete tutorial 9 patch drawables: background of a customized Button
Set xml drawable as background of your buttons.
Take a look here Gradient buttons for android.
And to know more about xml drawables :-
ANDROID XML DRAWABLES

Android: Spinner background with a drop down shape

Currently I am using this xml for the background of my spinner:
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#008000"
android:endColor="#7FFF00"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#A8A8A8" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#ffc536"
android:startColor="#ffe9b3"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#e4962d" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
And I like the color and the gradient however there is no indicator that there it is a drop down menu. Is there anyway to add a image or a shape to the right side to indicate a drop down menu? I found this easier then make 9-patch files.
You need to create a custom component and write an XML file and a UI element for it to implement this.
Simply treat the UI element as a drop-in version of what you're trying to implement.
Hope this helps!
i know that this question is old but i resolve in this way :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#color/green" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right|center"
android:src="#drawable/ic_arrow_drop_down" />
</item>

Categories

Resources