I am using Holo.Light theme and I am trying to make buttons not be transparent. I accomplished that, but now I want to add margin to the buttons and I have not been able to do that. Here is the button xml I have:
<?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="#ffffff" />
<stroke
android:width="1dp"
android:color="#E3E3E3" />
<corners android:radius="4dip" />
<margin
android:left="15dp"
android:right="15dp" />
</shape>
</item>
<item>
<shape>
<solid android:color="#edeff1" />
<stroke
android:width="1dp"
android:color="#E3E3E3" />
<corners android:radius="4dip" />
<margin
android:left="15dp"
android:right="15dp" />
</shape>
</item>
</selector>
How can I add margin? My current setting doesn't render.
Thanks!
Why not add it to your button in XML?
<Button android:id="#+id/mybutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="xyz"
android:background="#drawable/custom_button"
android:layout_marginleft="15dp"
android:layout_marginleft="15dp" />
Related
I want to change spinner look in android and I want it to be same for all the devices. I tried to do the same but failed to do so. If I use Tag, I am not able to customize it. I am adding screenshot of image of how I want.
http://prntscr.com/gb3oh9
Try something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<stroke android:width="2px" android:color="#color/darkgray_7" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right" android:src="#drawable/arrow" />
</item>
</layer-list>
</item>
</selector>
Try following code for custom Spinner
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:startColor="#color/white" android:endColor="#color/appblue" />
<stroke android:width="1dp" android:color="#color/block" />
<corners android:radius="4dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="right|center" android:src="#drawable/drop_arrow" android:tint="#color/red" />
</item>
</layer-list></item>
</selector>
You can change background color and drop down icon like doing this way
Step1: In drawable folder make background.xml for border of spinner.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/transparent" />
<corners android:radius="5dp" />
<stroke
android:width="1dp"
android:color="#color/darkGray" />
</shape> //edited
Step 2: For layout design
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_weight=".28"
android:background="#drawable/spinner_border"
android:orientation="horizontal">
<Spinner
android:id="#+id/spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:gravity="center"
android:layout_marginLeft="5dp"
android:spinnerMode="dropdown" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:src="#mipmap/drop" />
</RelativeLayout>
Step ex:And for dropdown arrow(styling) of the spinner you can try applying following style to your spinner using:
style="#style/SpinnerTheme"
//Spinner Style:
<style name="SpinnerTheme" parent="android:Widget.Spinner">
<item name="android:background">#drawable/backgroundg_spinner</item>
</style>
//backgorundg_spinner.xml Replace the arrow_down_gray with your arrow
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="0.33dp" android:color="#0fb1fa" />
<corners android:radius="0dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/arrow_down_gray" />
</item>
</layer-list>
</item>
Finally just find your particular ColorCode and append it.Here
Hope it helps...
This is how I did it (RTL Spinner):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:drawable="#drawable/ic_down_white" android:gravity="left|center" />
<item>
<shape>
<corners android:radius="4dp" />
<solid android:color="#19FFFFFF" />
</shape>
</item>
</layer-list>
</item>
</select
My problem is there isn't any rounded corner at the left bottom region of the rectangular, even though I defined it as 10dp.
Is there a better way to put a Drawable next to the EditText, rather than using my silly approach ?
Or how can my approach be redefined ?
Excerpt from the layout:
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#drawable/email_bordered"
android:ems="10"
android:inputType="textEmailAddress"
android:paddingLeft="34dp"
android:textSize="30sp"
android:layout_marginBottom="20dp"
/><EditText
The email_bordered.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- This controls the white background-->
<item
android:width="32dp"
android:height="90dp"
android:left="1.9dp"
android:bottom="1.9dp"
>
<shape android:shape="rectangle" >
<corners
android:topLeftRadius="10dp"
android:bottomLeftRadius="10dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
/>
<solid android:color="#fff" />
</shape>
</item>
<!-- This adds the vector image -->
<item
android:bottom="50dp"
android:top="10dp"
android:width="24dp"
android:height="24dp"
android:left="5dp"
android:drawable="#drawable/ic_if_mail_461377"
android:gravity="left">
</item>
<!-- This draws the border around everything -->
<item>
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#ffffff"/>
<corners
android:radius="10dp"
/>
</shape>
</item>
</layer-list>
And this is the preview:
You can use the drawableLeft tag within the EditText to get the desired design.
<EditText
...
android:drawableLeft="#drawable/ic_if_mail_461377"
android:drawablePadding="10dp"/>
EDIT
With a few changes in the layer-list, the final outcome is something like this.
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="45dp"
android:drawableLeft="#drawable/pic"
android:drawablePadding="10dp"
android:background="#drawable/email_bordered"
android:ems="10"
android:inputType="textEmailAddress"
android:paddingLeft="4dp"
android:textSize="30sp"
/>
email_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- This controls the white background-->
<item
android:width="62dp"
android:height="45dp"
android:left="1.9dp"
android:bottom="1.9dp"
>
<shape android:shape="rectangle" >
<corners
android:topLeftRadius="10dp"
android:bottomLeftRadius="10dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
/>
<solid android:color="#fff" />
</shape>
</item>
<!-- This adds the vector image -->
<!-- This draws the border around everything -->
<item>
<shape android:shape="rectangle">
<stroke
android:width="1.9dp"
android:color="#ffffff"/>
<corners
android:radius="10dp"
/>
</shape>
</item>
</layer-list>
I have two different set of buttons, one in the activity and one inside a listview. They have very similar code, but display two different styles.
The header set of buttons code :
<Button
android:id="#+id/invoices_1year"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0.2"
android:onClick="refresh"
android:text="#string/Invoices_1_year" />
while the Listview's buttons code is :
<Button
android:id="#+id/invoiceButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0.25"
android:text="View Pdf" />
The Xml for Listview for #ir2pid :
<ListView
android:id="#+id/InvoiceList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/searchArea" />
The output I get on my device :
My expected results is that both the button sets look the same.
In drawable folder create round.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" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#e4d46f" android:endColor="#e4d079" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#c7cf2d" />
<solid android:color="#e9da67"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#e7d851" />
<gradient android:angle="-90" android:startColor="#e4d079" android:endColor="#87cf8d" />
</shape>
</item>
</selector>
And in button add
android:background="#drawable/round"
Following Bala Raja answer , I found the generic material design button xml and modified it to only use my specified color.
This is my round.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<shape android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material" />
<solid android:color="#color/ButtonGray" /> // My CUSTOM COLOR
<padding android:left="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:bottom="#dimen/abc_button_padding_vertical_material" />
</shape>
and in the buttom xml change the backgorund toandroid:background="#drawable/round"
I'm trying to create a custom switch button that would have its thumb about 75% of its track (in width).
I don't want to use images, just drawable shapes, styles etc.
So far I've done the following:
activity_main.xml
<Switch
android:id="#+id/onOffSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:track="#drawable/switch_custom_track"
android:thumb="#drawable/switch_custom_thumb"
android:showText="true"
android:textOff="Off"
android:textOn="On"/>
switch_custom_track.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/switch_custom_track_on" />
<item android:state_checked="false" android:drawable="#drawable/switch_custom_track_off" />
</selector>
switch_custom_track_on.xml
<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp" />
<solid android:color="#00b800" />
<size android:width="90dp" android:height="40dp" />
</shape>
switch_custom_track_off.xml
<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp" />
<solid android:color="#fd491d" />
<size android:width="90dp" android:height="40dp" />
</shape>
switch_custom_thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/switch_custom_thumb_on" />
<item android:state_checked="false" android:drawable="#drawable/switch_custom_thumb_off" />
</selector>
switch_custom_thumb_on.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#ffffff" />
<size android:width="70dp" android:height="40dp" />
<stroke android:width="2dp" android:color="#00b800" />
</shape>
switch_custom_thumb_off.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#ffffff" />
<size android:width="70dp" android:height="40dp" />
<stroke android:width="2dp" android:color="#fd491d" />
</shape>
With the above code I'm getting this:
https://d1ro8r1rbfn3jf.cloudfront.net/ms_28780/buq3SAmnkEvOTUgRwZsQ7ZKGn5V7U8/switch.png?Expires=1423585499&Signature=GtuSi6G1WwUefvgsDfgPOWEmoe3I93Jm0R-Cyxkm~pgoQkJlf53UCxKJX~m7rs1KahuP9PMdr9N2ht0KjVL0P~rIzvbieEO0~2bjaITq2z2SnNu9TAlGaTJEy~InuS1EcCH~OAkoJPSuZ0IYjq0LwOQBxC9awdgypL~IKGF4GILUfknk~n0ZjC2TzW2ovdbyR8JjX48Pg7Xey82I8oBpwvlRfxGigiGfNDEw36Dqk~Q1dzK5k9IO0ERk~c2m7K~ZdZ78oXvGx8-EGruYCxfJIe5b0PeHqG~bV1fK9sv1cqRebXWIOJbZS6EZf6BUPIuZ0OO9xQbUXTLrARV55cD6nQ__&Key-Pair-Id=APKAJHEJJBIZWFB73RSA
So the thumb in width is 50% of the track. Please note the width of "90dp" in size element in "switch_custom_track_off.xml" and the width of "70dp" in the size element in "switch_custom_thumb_off.xml". I've expected that the relative size of the thumb (to the track) should be 70dp/90dp=77%. However it is clearly visible that the track expands to twice the size of the thumb.
So is it possible to make the thumb and the track of a "completely custom" size? If yes, could you please help me achieve the desired result?
Hi i have Button in app and i set button style from shape but when i use images
android:src="#drawable/button_background" />
i have problem with radius
http://i39.tinypic.com/33vm3gh.png
my shep file
<item android:state_pressed="false">
<layer-list>
<item>
<bitmap
android:src="#drawable/button_background" />
</item>
<item>
<shape>
<gradien
android:angle="90"
/>
<solid
android:color="#eeeeee"
/>
<corners
android:topRightRadius="0dip"
android:topLeftRadius="0dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
<stroke
android:width="1px"
android:color="#b7b7b7"
/>
</shape>
</item>
</layer-list>
</shape>
set the button's background to transparent or null
android:background="#null"
or
android:background="#00FFFFFF"
Try using this:
android:background="#null"