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
Related
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.
I've set up a button in my activity. Current code:
<Button
android:id="#+id/buttonSkills"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toEndOf="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2"
android:onClick="buttonSkillsOnClick"
android:text="#string/skills"
android:textColor="#32c87d"
android:textSize="22sp" />
It currently has a white background to it. I would like the background to be transparent so that the user can only see the text.
When the user clicks the button, I just want a green border to appear around the button with no background.
I was wondering if this can be done with xml only?
You will need to make a drawable for when the item is selected, then apply that as the background. So in short, yes it is possible to do it with only xml, but you will need to make an additional file.
Something similar to this
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_selected" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focus" /> <!-- focused -->
<item android:drawable="#drawable/button_nothing" /> <!-- default -->
</selector>
button_selected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ractangle">
<solid android:color="#00FF00"/>
</shape>
Yes you can. All you need to do is assign a State List drawable as a background to the button. The state list drawable inturn contains references to Shape Drawable.
Read all about it here (Shape Drawable and State List topic): http://developer.android.com/guide/topics/resources/drawable-resource.html
Make an xml file in drawable folder and paste this
<?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" >
<corners android:radius="10dip" />
<stroke android:width="1dip" android:color="#fff" />
<gradient android:angle="-90" android:startColor="#color/primary" android:endColor="#color/primary_dark" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="10dip" />
<stroke android:width="1dip" android:color="#fff" />
<solid android:color="#FF7300"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="10dip" />
<stroke android:width="1dip" android:color="#fff" />
<gradient android:angle="-90" android:startColor="#color/primary" android:endColor="#color/primary" />
</shape>
</item>
</selector>
now set the background of a button like
android:background="#drawable/yourxml"
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 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! =]