I am trying to style a button with different colors for different states. The coloring (and border radius) works for normal state, but not for state_pressed="true". What can be wrong with my code?
This is the button element:
<Button
android:text="#string/login_button_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="220dp"
android:textColor="#FFF"
android:background="#drawable/loginbtn"
android:clickable="true"/>
And this one is loginbtn.xml in drawable folder:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#27ae60"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#2ecc71"/>
</shape>
</item>
</selector>
Thank you.
You need to swap the order of your definition as Android picks up the first one that matches, in this case the one without a state defined. Move it to be last:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#2ecc71"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#27ae60"/>
</shape>
</item>
</selector>
Related
I am trying to create Monzo (Android) style switch in my android app. I managed to create it very close by custom drawable for Thumb and Track, but still not same.
Things still missing:
I gave top and bottom padding, but still not padding showing. There is no option of Margin in Thumb and Track drawable.
In Monzo app, both names are showing, but in my case name only showing based on switch on/off
I am attaching both screenshots - from Monzo App and from mine test app. I am also attaching my Thumb & Track drawables code.
Could someone please advise, how can I achieve same design. If Switch is not right component then which other component I can use.
Monzo:
My App:
Thumb Drawable code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
</shape>
</item>
</selector>
Track Drawable code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<size android:height="40dp"/>
<corners android:radius="20dp"/>
<padding android:top="10dp"
android:right="10dp"
android:bottom="10dp"
android:left="10dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<size android:height="40dp"/>
<corners android:radius="20dp"/>
<padding android:top="10dp"
android:right="10dp"
android:bottom="10dp"
android:left="10dp"/>
</shape>
</item>
</selector>
Try below code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:orientation="horizontal"
android:background="#drawable/bg_track">
<LinearLayout
android:id="#+id/llFeed"
android:layout_weight=".5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/bg_thumb"
android:orientation="horizontal"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/tvFeed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Feed"
android:textSize="14sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/llManage"
android:layout_weight=".5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/tvManage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manage"
android:textSize="14sp"
android:textColor="#color/white"/>
</LinearLayout>
</LinearLayout>
Output for above :
Actually, I was able to solve this via setting Stroke for "Thumb" of the same color as "Track". Next issue was that it not displaying text on the track side...means when switch is off there was not text on other side.
The way I resolve that was by create 2 lables and constraint them to be on top of Switch, and i kept Switch On Off text as empty "".
Thumb Code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
<stroke android:color="#color/lightGray"
android:width="5dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
<stroke android:color="#color/lightGray"
android:width="5dp"/>
</shape>
</item>
</selector>
I have a custom switch element which looks great on Android 5 and 6. But there is a problem with Android 4.
The question is how to keep shape of the toggle circular?
Android 5,6. Picture 1
Android 4. Picture 2
Here is my code:
<Switch
android:id="#+id/row_device_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textOn="ON"
android:thumb="#drawable/customswitchselector"
android:track="#drawable/custom_track"
android:textOff="OFF"
android:layout_marginRight="14dp"
android:switchMinWidth="#dimen/custom_switcher_track_width"
/>
custom_track.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:visible="true"
android:dither="true"
android:useLevel="false"
>
<corners
android:radius="#dimen/cutsom_switcher_track_radius"/>
<size
android:width="#dimen/custom_switcher_track_width"
android:height="#dimen/custom_switcher_track_height" />
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"
/>
</shape>
</item>
<item
android:left="#dimen/custom_switcher_track_line_horizontal_margin"
android:right="#dimen/custom_switcher_track_line_horizontal_margin"
>
<shape
android:shape="line"
>
<stroke
android:width="#dimen/custom_switcher_екфсл_thickness"
android:color="#android:color/white"
/>
</shape>
</item>
</layer-list>
customswitchselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true">
<layer-list>
<item>
<shape
android:shape="oval"
android:visible="true"
android:dither="true"
android:useLevel="false"
>
<solid
android:color="#color/colorListEnd"
/>
<size
android:width="#dimen/custom_switcher_circle_size"
android:height="#dimen/custom_switcher_circle_size" />
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"/>
</shape>
</item>
<item
android:left="#dimen/custom_switcher_between_circles_margin"
android:right="#dimen/custom_switcher_between_circles_margin"
android:top="#dimen/custom_switcher_between_circles_margin"
android:bottom="#dimen/custom_switcher_between_circles_margin"
>
<shape
android:shape="oval"
>
<size
android:width="#dimen/custom_switcher_inner_circle_size"
android:height="#dimen/custom_switcher_inner_circle_size" />
<solid
android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="false">
<layer-list>
<item>
<shape
android:shape="oval"
android:visible="true"
android:dither="true"
android:useLevel="false">
<solid
android:color="#color/colorListEnd"
/>
<size
android:width="#dimen/custom_switcher_circle_size"
android:height="#dimen/custom_switcher_circle_size" />
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"/>
</shape>
</item>
<item
android:left="#dimen/custom_switcher_between_circles_margin"
android:right="#dimen/custom_switcher_between_circles_margin"
android:top="#dimen/custom_switcher_between_circles_margin"
android:bottom="#dimen/custom_switcher_between_circles_margin"
>
<shape
android:shape="oval">
<size
android:width="#dimen/custom_switcher_inner_circle_size"
android:height="#dimen/custom_switcher_inner_circle_size"
/>
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"
/>
</shape>
</item>
</layer-list>
</item>
</selector>
There are several small issues with Switch making it not work uniformly. In your case you need to use android:textOff and android:textOn with value "". Otherwise the width of the track and of the thumbs will be adjusted to hold the text. Also you need to define android:thumbTextPadding to assure the size of the thumb. The drawable is just a background and doesn't effect it directly.
<Switch
android:id="#+id/row_device_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:switchMinWidth="#dimen/custom_switcher_circle_radius"
android:textOff=""
android:textOn=""
android:thumb="#drawable/customswitchselector"
android:thumbTextPadding="#dimen/switch_thumb_radius"
android:track="#drawable/custom_track" />
The #dimen/custom_switcher_circle_radius should have a value of half of the #dimen/custom_switcher_circle_size dimension.
I need to make my EditText look like its got depth like in the image below.
I have this shape I don't know what to add to it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>
you can accomplish that with a drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--background to compensate the transparency under shadow and glow (for bigger depth values)-->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>
</item>
<!--top, dark, inner shadow-->
<item
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1A000000" />
</shape>
</item>
<!--bottom, light, outer glow-->
<item
android:top="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#4DFFFFFF" />
</shape>
</item>
<!--your color-->
<item
android:top="#dimen/depth"
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark />
</shape>
</item>
</layer-list>
and define a dimen in dimens.xml
<dimen name="depth">2dp</dimen>
by changing of the dimen you can change the depth of the drawable
This might also make your field look close to the effect but with a little more depth (see below). It might be worth adding the background to a outer view to wrap the edit text too so you can indent the text if you haven't already done this.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- outer shine -->
<item
android:top="4dp"
android:left="4dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1597FB" />
</shape>
</item>
<!-- inner shadow -->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#004173" />
</shape>
</item>
<!-- inner background -->
<item
android:top="2dp"
android:left="2dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#006EC3" />
</shape>
</item>
</layer-list>
And then you EditText as below;
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:background="#drawable/rounded_rect_layered_combined">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:textColor="#ffffff"/>
</FrameLayout>
I'm trying to create a drawable shape with different states for my button. So I wrote this:
<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="#color/NEGATIVE_pressed" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:state_focused="true" android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_focused" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE" />
<stroke
android:width="1dp"
android:color="#color/NEGATIVE" />
<corners android:radius="4dp" />
</shape>
</item>
</selector>
Then in my button I use it as android:background="#drawable/btn_negative_selector"
However, I want to draw a bottom border to that shape, to be, something like 3 dp and of different color, but I can't figure out how to do it. I tried searching, but didn't find anything suitable for selector. Any suggestions, please?
First I'm separating the shapes to make them easier to manage.
This is your btn_negative_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#xml/rectangle_button_pressed" android:state_pressed="true"></item>
<item android:drawable="#xml/rectangle_button_focused" android:state_focused="true"></item>
<item android:drawable="#xml/rectangle_button" ></item>
</selector>
create folder called 'xml' in your res and save these shapes into it:
1) rectangle_button_pressed:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_pressed" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
2) rectangle_button_focused:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_focused" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
3) This one rectangle_button.xml will have a border at the bottom of it by defining a shape using <layer-list>. first <item> is bottom layer and last <item> is the top layer.
<?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="#color/gray"/>
<corners android:radius="4dp"/>
</shape>
</item>
<item android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
<corners android:radius="4dp"/>
</shape>
</item>
</layer-list>
i am trying to change the padding from a Button in a custom drawable ressource, and reuse this in a selector.
Changing the drawable seems not the Problem, but the App always use the highest padding aviable from the different drawables:
button_inactive.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="#FF4d681f" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFFFF" />
<padding
android:bottom="5dp"
android:top="5dp" />
</shape>
</item>
button_active.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="#FF4D681F" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="#FF8da32d" />
<padding
android:bottom="10dp"
android:top="10dp" />
</shape>
</item>
button_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="#drawable/button_active"/>
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/button_active"/>
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/button_active"/>
<item android:drawable="#drawable/button_inactive"/>
The Problem is that my Button uses the 10dp padding in all states, including the "inactive" state.
Is there a Solution to get it working only with XML or it is better to make a custom Button programaticly?
try this
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#android:color/black" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:topLeftRadius="6dp"
android:topRightRadius="6dp" />
Add android:variablePadding="true" attribute to your selector.
I'm not sure how (and if) is this working when you are using layer-list, however I decided to share it anyway for anyone looking for the answer (as I was).