I have a listview in my app with custom view for its items.any item have a button that I set a selector to background of all buttons but selector dont work at all.
layout my adapter
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:weightSum="100"
>
<Button android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/textview"
android:background="#drawable/up_item_list"
android:gravity="center"
android:layout_weight="60"
android:onClick="listener"
android:focusableInTouchMode="true"
android:clickable="true"
android:focusable="true"
android:padding="5dp"
/>
</LinearLayout>
layout of my activity
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/lay"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ListView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listview"
android:divider="#android:color/transparent"
android:dividerHeight="10dp"
>
</ListView>
</LinearLayout>
my selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" >
<shape
android:shape="rectangle" >
<gradient
android:startColor="#aaaaaa"
android:endColor="#ffffff"
android:angle="90"
android:type="linear"/>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp" android:top="10dp" android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<gradient android:startColor="#fa7905"
android:endColor="#fcc96b"
android:angle="90"
></gradient>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp" android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
<shape android:shape="rectangle" >
<gradient android:startColor="#fa7905"
android:endColor="#fcc96b"
android:angle="90"
></gradient>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp" android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Write this code in a separate xml file like..
<shape
android:shape="rectangle" >
<gradient
android:startColor="#aaaaaa"
android:endColor="#ffffff"
android:angle="90"
android:type="linear"/>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp"
android:top="10dp"
android:bottom="10dp" />
And save with some file..then apply it in the selector..like..
<item android:drawable="#drawable/your file name" android:state_pressed="true"></item>
// try this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" >
<shape
android:shape="rectangle" >
<gradient
android:startColor="#aaaaaa"
android:endColor="#ffffff"
android:angle="90"
android:type="linear"/>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp" android:top="10dp" android:bottom="10dp" />
</shape>
</item>
<item android:state_enabled="true" android:state_focused="false" android:state_pressed="false" >
<shape android:shape="rectangle" >
<gradient android:startColor="#fa7905"
android:endColor="#fcc96b"
android:angle="90"
></gradient>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp" android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="true" >
<shape
android:shape="rectangle" >
<gradient
android:startColor="#aaaaaa"
android:endColor="#ffffff"
android:angle="90"
android:type="linear"/>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp" android:top="10dp" android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
<shape
android:shape="rectangle" >
<gradient
android:startColor="#aaaaaa"
android:endColor="#ffffff"
android:angle="90"
android:type="linear"/>
<corners android:radius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1.5dp" android:right="1.5dp" android:top="10dp" android:bottom="10dp" />
</shape>
</item>
</selector>
Related
I'm trying to simulate a frame border for an ImageView without using an image but with a drawable xml, but I'm not being able to.
The frame I'd like to simulate, and this is my "test" 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="rectangle">
<gradient
android:type="linear"
android:startColor="#86592d"
android:endColor="#ffffca" />
</shape>
</item>
</layer-list>
My ImageView definition:
<ImageView
android:id="#+id/ivBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:contentDescription="#string/desc"
android:padding="10dp"
android:scaleType="centerCrop"
android:cropToPadding="true"
android:background="#drawable/border_image" />
What I'm getting:
I wouldn't mind going with an image (if I have a good suggestion) but the problem is my images are loaded dynamically and all of them have different dimensions so first, adjusting the frame to every dimensions makes it lose its proportions and, what's more important, it's really difficult to calculate frame borders width so the image fits exactly inside the frame.
PS. It doesn't have to look exactly the same, but as close as possible.
Ok, I'm really very stubborn and persistent and I don't like the "it's not possible" 's :) so I kept trying and trying and finally got what I'm looking for.
This is my drawable 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="#58452f" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="rectangle" >
<solid android:color="#624D35" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="#795f41" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp">
<shape android:shape="rectangle" >
<solid android:color="#8e6f4c" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle" >
<solid android:color="#a17d56" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle" >
<solid android:color="#ffffd9" />
</shape>
</item>
<item
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp">
<shape android:shape="rectangle" >
<solid android:color="#a17d56" />
</shape>
</item>
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle" >
<solid android:color="#8e6f4c" />
</shape>
</item>
<item
android:bottom="9dp"
android:left="9dp"
android:right="9dp"
android:top="9dp">
<shape android:shape="rectangle" >
<solid android:color="#795f41" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<solid android:color="#624D35" />
</shape>
</item>
<item
android:bottom="11dp"
android:left="11dp"
android:right="11dp"
android:top="11dp">
<shape android:shape="rectangle" >
<solid android:color="#58452f" />
</shape>
</item>
</layer-list>
And this is my result:
Of course you can notice it's not a real frame, but it's really very very close to.
I know I can simplify my xml using two or three gradients, but for the moment I'll keep it like this as it's working and I have spent a lot of time in it.
Edit: My last attempt.
Keep on improving!
New 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="#58452f" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#624D35"
android:centerColor="#4e3d2a"
android:endColor="#624D35"
android:type="linear" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#795f41"
android:centerColor="#604c34"
android:endColor="#795f41"
android:type="linear" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#8e6f4c"
android:centerColor="#71583c"
android:endColor="#8e6f4c"
android:type="linear" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#a17d56"
android:centerColor="#806444"
android:endColor="#a17d56"
android:type="linear" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#ffffd9"
android:centerColor="#707047"
android:endColor="#ffffd9"
android:type="linear" />
</shape>
</item>
<item
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#a17d56"
android:centerColor="#806444"
android:endColor="#a17d56"
android:type="linear" />
</shape>
</item>
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#8e6f4c"
android:centerColor="#71583c"
android:endColor="#8e6f4c"
android:type="linear" />
</shape>
</item>
<item
android:bottom="9dp"
android:left="9dp"
android:right="9dp"
android:top="9dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#795f41"
android:centerColor="#604c34"
android:endColor="#795f41"
android:type="linear" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#624D35"
android:centerColor="#4e3d2a"
android:endColor="#624D35"
android:type="linear" />
</shape>
</item>
<item
android:bottom="11dp"
android:left="11dp"
android:right="11dp"
android:top="11dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#58452f"
android:centerColor="#463725"
android:endColor="#58452f"
android:type="linear" />
</shape>
</item>
</layer-list>
And the new (and much better) result:
I need to create some drawables that look like image below, is there a way to do this in xml?
Edit:
I have got this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/darker_gray" />
<corners android:radius="6dp" />
</shape>
</item>
<item
android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/dark_gray" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>
it's the same like on the picture without that blue corner and I have no idea how to do that diagonal shape. Now I'm using 9 patch, but since all my other buttons are in xml, I was just wondering if there is some way to write this also in xml
Try this code, i guess this is what you want:
draw.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<size android:width="100dp"
android:height="60dp"/>
<stroke android:width="2dp" android:color="#333333" />
<solid android:color="#333333" />
<padding android:bottom="3dp"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<size android:width="100dp"
android:height="60dp"/>
<stroke android:width="2dp" android:color="#000000" />
<solid android:color="#000000" />
<padding android:bottom="1dp"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees="-45"
android:toDegrees="45"
android:pivotX="-40%"
android:pivotY="87%" >
<shape
android:shape="rectangle" >
<size android:width="50dp"
android:height="50dp"/>
<stroke android:color="#android:color/transparent" android:width="0dp"/>
<solid
android:color="#android:color/holo_blue_light" />
<corners android:radius="5dp"/>
</shape>
</rotate>
</item>
<item>
<shape
android:shape="rectangle">
<size android:width="100dp"
android:height="60dp"/>
<stroke android:width="2dp" android:color="#android:color/transparent" />
<solid android:color="#android:color/transparent" />
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
and in your layout file
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_centerInParent="true"
android:background="#drawable/draw" >
</RelativeLayout>
You should use layer list to combine multiple drawables below is an example.
You should also check this very complete guide to android drawable
<?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="#585858" />
<solid android:color="#FF9009" />
<padding android:bottom="1dp"/>
</shape>
</item>
<item android:left="10dp" android:top="20dp" android:bottom="20dp" android:right="150dp">
<shape
android:shape="oval">
<stroke android:width="1dp" android:color="#ffffff" />
<solid android:color="#118C4E" />
<padding android:bottom="1dp"/>
</shape>
</item>
<item android:left="150dp" android:top="20dp" android:bottom="20dp" android:right="10dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#ffffff" />
<solid android:color="#C1E1A6" />
<padding android:bottom="1dp"/>
</shape>
</item>
</layer-list>
How to create such button with shadow:
I don't know how to modify this button drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle">
<gradient android:angle="90" android:startColor="#0F9D58" android:endColor="#0F9D58" />
<stroke android:width="1dp" android:color="#BABABA" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:top="10dp" android:left="20dp" android:right="20dp" />
</shape>
</item>
Thanks!
UPDATE. Finally , the code should be as follows:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:left="5dp" android:right="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#0F4858" />
</shape>
</item>
<item android:bottom="2dp" android:left="0dp" android:right="0dp">
<shape>
<gradient android:angle="270"
android:endColor="#0F9D58" android:startColor="#0F9D58" />
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Read this thread
Basically, you need create a xml for your custom button, like:
button_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<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>
And now, you can use it, doing reference to the file with:
<Button
android:background="#drawable/button_selector"
...
..
/>
I do have a group of buttons, which I am customizing using selector-shape. Here is the code and image of what i have so far:
CODE-bgbtn.xml
<item android:state_pressed="true" >
<shape>
<solid
android:color="#004dfd" />
<stroke
android:width="1dp"
android:color="#2f3436" />
<corners
android:radius="0dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#425262"
android:endColor="#51677d"
android:angle="45" />
<stroke
android:width="1dp"
android:color="#2f3436" />
<corners
android:radius="0dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
And the results of this:
I have applied the style only for first button, as you can see it looks too flat. How to make it look more as a button?
Try this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:state_pressed="true">
<shape android:padding="10dp" android:shape="rectangle">
<gradient android:startColor="#color/yourColor" android:endColor="#color/yourColor" android:angle="90"/>
<stroke android:width="2dp" android:color="#3E4976" />
<corners android:bottomLeftRadius="15dp" android:bottomRightRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp" />
</shape>
</item>
<item android:state_enabled="true" android:state_focused="true">
<shape android:padding="10dp" android:shape="rectangle">
<gradient android:startColor="#color/yourColor" android:endColor="#color/yourColor" android:angle="90"/>
<corners android:bottomLeftRadius="15dp" android:bottomRightRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp" />
</shape>
</item>
<item android:state_enabled="true">
<shape android:padding="10dp"
android:shape="rectangle">
<gradient android:startColor="#color/yourColor" android:endColor="#color/yourColor" android:angle="90"/>
<corners android:bottomLeftRadius="15dp" android:bottomRightRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp" />
</shape>
</item>
</selector>
And then setBackground for button
android:background="#drawable/custom_button"
I want to customize my background. So I design shape in selector for each state. but the first item execute.
This is my code:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:state_pressed="true" android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#8faefd" />
<stroke
android:width="3dp"
android:color="#000000" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<corners android:radius="10dp" />
</shape>
</item>
</selector>
State List
During each state change, the state list is traversed top to bottom
and the first item that matches the current state is used—the
selection is not based on the "best match," but simply the first item
that meets the minimum criteria of the state.
So you have to swap this two items. Should be like that
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#8faefd" />
<stroke
android:width="3dp"
android:color="#000000" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<corners android:radius="10dp" />
</shape>
</item>
</selector>