I use following xml, it works on most device , but in some devices the background is not trasparent, is black? why and how solve?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke android:width="#dimen/_3sdp" android:color="#dcdcdc" />
<corners android:radius="#dimen/_10sdp" />
<padding android:bottom="#dimen/_6sdp" android:left="#dimen/_6sdp" android:right="#dimen/_6sdp" android:top="#dimen/_6sdp" />
</shape>
</item>
</selector>
The result must be like this :
In your above xml border, you've only specified the color of shape. You didn't mention the color of background. You can set solid background color as Transparent inside shape tag:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke android:width="#dimen/_3sdp" android:color="#dcdcdc" />
<corners android:radius="#dimen/_10sdp" />
<padding android:bottom="#dimen/_6sdp" android:left="#dimen/_6sdp" android:right="#dimen/_6sdp" android:top="#dimen/_6sdp" />
<solid android:color="#android:color/transparent" /> <!-- Add This -->
</shape>
</item>
Hope this helps.
Related
I have a customized button with rounded corners, I put some shadow for when it's pressed but I want to do an outer shadow just to the bottom part of the button, I am making the drawable via xml, so if the glow could be that way would be great.
These are the relevant parts of the code:
button_pressed_shadows.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<gradient
android:startColor="#color/black_overlay"
android:endColor="#color/btn_login"
android:angle="270"/>
<corners android:radius="4dip" />
</shape>
</item>
<item
android:top="2px">
<shape android:shape="rectangle">
<solid android:color="#color/btn_login"/>
<corners android:radius="4dip" />
</shape>
</item>
</layer-list>
style_login.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/button_pressed_shadows" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_login" /> <!-- default -->
</selector>
Since I have the button design on photoshop, I made a 9 patch image with it, and put it on the style selector, everything went fine, think is the better (easiest) way.
Also while using layer-list you can use appropriate color combinations and padding to make it like glow or shadow.
edit_text_background
<?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="#fff" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<stroke
android:width="1dp"
android:color="#dadad7" />
<solid android:color="#fff" />
</shape>
</item>
I am having few buttons added programatically and I want to set their text to be with black border and white inside, stroke, outline, or whatever it is called...
How can I do that? I think I need some style.xml but I can't find any.
I want the text to be just like this, simple
http://cdn.tutsplus.com/net/uploads/legacy/855_cssProperties/images/textStroke.jpg
1. create three .xml in res/drawable:
button_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<solid android:color="#FFFFFF" />
<corners android:radius="3dip" />
<stroke
android:width="1dip"
android:color="#android:color/transparent" />
button_focused.xml
<solid android:color="#FFFFFF" />
<corners android:radius="3dip" />
<stroke
android:width="1dip"
android:color="#android:color/transparent" />
button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<item android:drawable="#drawable/button_normal.xml" android:state_window_focused="false"/>
<item android:drawable="#drawable/button_focused" android:state_focused="true"/>
2. set background with button_background.xml in your layout.xml or code
button.setBackgroundDrawable(getResources().getDrawable(
R.drawable.button_background.xml));
more information:http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
I would like to change the background color of a SeekBar from yellow (default) to a color I choose but I've only found the method to change the color of the black area around the SeekBar. Can anyone help me????
xmls ( background_fill , progress_fill and progress could look like that for a gradient red
progress xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/background_fill" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
background_fill xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#FF555555" android:centerColor="#FF555555"
android:endColor="#FF555555" android:angle="90" />
<corners android:radius="5px" />
<stroke android:width="2dp" android:color="#50999999" />
<stroke android:width="1dp" android:color="#70555555" />
</shape>
and progress_fill xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#FF470000" android:centerColor="#FFB80000"
android:endColor="#FFFF4400" android:angle="180" />
<corners android:radius="5px" />
<stroke android:width="2dp" android:color="#50999999" />
<stroke android:width="1dp" android:color="#70555555" />
</shape>
i did not complete the implementing for android:thumb, so the thumb will be still the original one
Therefore we just have to delete this line again from our layout xml where we define the seekbar
android:thumb="#drawable/thumb"
for more info see this link
I’m attempting to create a layout border with corners that are square on the outside and round on the inside. I’ve gathered that I need to create an .xml drawable definition composed of two shapes: one with a stroke width and corner radius and another with a stroke width only:
The drawables
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="4dp" android:color="#FF000000" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="4dp" />
<solid android:color="#FFC0C0C0" />
</shape>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#FF000000" />
<solid android:color="#FFC0C0C0" />
</shape>
Each of these works independantly as a border when appliedby itself like so:
android:background="#drawable/round_border"
but when they either or both are added to an item-list drawable like so:
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
and:
android:background="#drawable/composite_border"
The layout's background is completely black instead of just a black border.
Does anyone know how to make the layer list work for this task?
From Shape Drawable Doc you can see that shape can't have layer-list inside so you should define your composite_border.xml like this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/square_border"/>
<item android:drawable="#drawable/round_border"/>
</layer-list>
note that I changed the order of your items inside the layer-list as stated in the documentation of layer-list
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top and you want it to be squared from outside
Try this will work fine enough:
solid is background color
stroke is border
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/white"/>
<stroke android:width="1dp" android:color="#ffaaaaaa" />
<size
android:width="15dp"
android:height="15dp"/>
</shape>
Create a xml file like round_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#CCCC33"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
In the layout set as background
<LinearLayout
android:id="#+id/layout_wellbeing"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/rounded_corner_leuvan"
android:orientation="horizontal" >
</LinearLayout>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp"
android:color="#FF000000"
/>
<solid android:color="#FFC0C0C0" />
</shape>
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
watch out the comments and the quotation marks! =]
I'm creating a custom progress bar (positioned under a WebView) and what I would like to draw is a 1dp-wide line between the WebView and the ProgressBar. I'm modifying existing drawable, namely progress_horizontal.xml, and tried something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
(...)
<item>
<shape android:shape="line">
<stroke android:width="1dp" android:color="#FF000000" />
</shape>
</item>
</layer-list>
This line however is vertically centered but I want it to be drawn on top of the drawable. The only idea I could come up with is to use this "hacky" gradient below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
(...)
<item>
<shape>
<gradient
android:startColor="#FF000000"
android:centerColor="#00000000"
android:centerY="0.01"
android:endColor="#00000000"
android:angle="270"
/>
</shape>
</item>
</layer-list>
Do you have better ideas how to draw a single line shape aligned to the top of the drawable defined with layer-list?
I spent a while trying to figure this out as well. Hopefully there is a better way to do it but here is the method I used, which is also kind of hackish, but in case it helps someone, I thought I would share.
The first item in your layer list should be a solid of whatever color you want to be your border. Following that would be the thing(s) you want to have the border, with padding on whatever side you want the border to be on.
For example:
<?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="YOUR BORDER COLOR" />
</shape>
</item>
<item android:top="YOUR TOP BORDER THICKNESS">
THE THING YOU WANT A BORDER ON
</item>
</layer-list>
The idea is that the padding on the item reveals the solid shape behind it, giving the border appearance. You could add padding to any side to add a border. I imagine you could get more complicated and have different colored borders this way as well.
Seems like a hack but it worked for me.
EDIT: I said "padding" but in layer-lists it's more of an offset.
i was going through all related topics but no one could solve my problem. But some of them were very useful to understand how the layer-list or shape parameters work.
My problem was to define a button with a linear gradient and draw a top and a bottom line in different colors. After all I hacked this solution. I saved the file unter res/drawable/blue_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle">
<solid android:color="#color/blue_end" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<stroke
android:width="1dp"
android:color="#color/bottomline_btn" />
</shape>
</item>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/blue" />
<gradient
android:startColor="#color/blue"
android:endColor="#color/blue_end"
android:angle="270" />
</shape>
</item>
<item android:top="0dp" android:bottom="-1dp" android:left="-1dp" android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/topline_btn" />
<solid android:color="#00000000" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:top="-1dp" android:bottom="0dp" android:left="-1dp" android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/bottomline_btn" />
<solid android:color="#00000000" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
<color name="topline_btn">#31ffffff</color>
<color name="bottomline_btn">#31000000</color>
<color name="blue">#449def</color>
<color name="blue_end">#2f6699</color>
Did you try offsetting it by something like this
http://android.amberfog.com/?p=9
My solution is to add 9-patch as the last layer item :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/tab_button_active_layer2" />
</shape>
</item>
<item android:bottom="#dimen/tab_button_active_bottom_bar_width">
<shape>
<solid android:color="#color/tab_button_active_layer1" />
</shape>
</item>
<!-- 9-patch drawable -->
<item android:drawable="#drawable/tab_button_border_top"/>
</layer-list>