ListView: Selector drawables drawn in different sizes - android

I'm using a custom ListView selector.
Everything works fine, except that the drawables for state_focused and state_pressed
are drawn bigger than the normal state.
Instead of the default implementation, which uses 9-patch bitmaps, I'm using ShapeDrawables. They all use the same padding values (see below)
It seems, that they're overwritten by some other values.
Probably a theme? Couldn't find it though.
ListView
<ListView
style="#style/dark_bg_style"
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="10dp"
android:layout_centerInParent="true"
android:drawSelectorOnTop="false"
android:cacheColorHint="#00000000"
android:layoutAnimation="#anim/list_layout_in"
android:scrollbars="none"
android:divider="#00000000"
android:dividerHeight="5dp"
android:listSelector="#drawable/list_sel"
/>
list_sel.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/transparent" android:state_window_focused="false"/>
<item android:drawable="#drawable/button_bg_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/button_bg_focused" android:state_focused="true" android:state_selected="true"/>
<item android:drawable="#drawable/button_bg_focused" android:state_focused="true"/>
</selector>
excerpt from list element layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/menu_sel"
>
...
menu_sel.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/transparent"
android:state_focused="true"
android:state_selected="true"/>
<item android:drawable="#android:color/transparent" android:state_selected="true"/>
<item android:drawable="#android:color/transparent" android:state_pressed="true"/>
<item android:drawable="#drawable/button_bg_normal"/>
</selector>
button_bg_normal.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#44C8C8C8" />
<corners
android:radius="5sp" />
<padding
android:left="10dip"
android:top="5dip"
android:right="10dip"
android:bottom="5dip" />
</shape>
button_bg_pressed.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#77C8C8C8" />
<corners
android:radius="5sp" />
<padding
android:left="10dip"
android:top="5dip"
android:right="10dip"
android:bottom="5dip" />
</shape>
button_bg_focused.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#44C8C8C8" />
<corners
android:radius="5sp" />
<stroke
android:color="#55FFFFFF"
android:width="1dip" />
<padding
android:left="10dip"
android:top="5dip"
android:right="10dip"
android:bottom="5dip" />
</shape>

When working with ListViews, it is better to set the background states as the android:listSelector. In your code, there is a contention between the states in android:listSelector and the android:background specified for the individual row.

Related

Unable to change border color of Edit Text on focus

I am trying to color my EditText border as blue when it is having focus. I tried all possible ways as suggested in many answers in Stack Overflow but it doesn't work. It is only changing color of cursor and not of whole border when focused. Below is what I tried, let me know if I am doing incorrectly
That grey border to blue color
styles.xml
<!--Edit Text-->
<style name="EditTextTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#FFFFFF</item>
<item name="colorControlActivated">#FF1792E5</item>
<item name="colorControlHighlight">#FF1792E5</item>
</style>
edit_text_border.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<stroke
android:width="1dp"
android:color="#FF1792E5"
/>
</shape>
</item>
</selector>
XML
<EditText
android:id="#+id/edtName"
android:background="#drawable/edit_text_border"
android:inputType="text|textCapWords"
android:maxLength="40"
android:textColor="#color/black"
android:singleLine="true" />
Manifest:
<activity
android:name=".ui.activity.MyActivity"
android:theme="#style/EditTextTheme"
android:screenOrientation="portrait" />
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="#android:drawable/edittext_pressed"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/edittext_focused_blue"
/> <!-- focused -->
<item
android:drawable="#android:drawable/edittext_normal"
/> <!-- default -->
</selector>
try this
Try this create a folder in res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#color/block" android:width="5dp"/>
<solid android:color="#ffffff"/>
</shape>
XML:
android:background="#drawable/yourborder"
Here is output.
Another Way:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_pressed="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:state_enabled="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:drawable="#drawable/twitter_im_edittext_normal" />
</selector>
I hop this may help you.
try this create a edittext_focused_blue in res/drawable folder like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#ff00" />
<corners android:radius="5dp" />
</shape>
this create a edittext_normal in res/drawable folder like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
</shape>
try this create a edittext_bg in res/drawable folder like this
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_focused="true"
android:drawable="#drawable/edittext_focused_blue"
/> <!-- focused -->
<item android:state_focused="false"
android:drawable="#android:drawable/edittext_normal"
/> <!-- default -->
</selector>
than apply to your editext using android:background="#drawable/edittext_bg" like this
<EditText
android:id="#+id/edtName"
android:background="#drawable/edittext_bg"
android:inputType="text|textCapWords"
android:maxLength="40"
android:textColor="#color/black"
android:singleLine="true" />
Please try below code to achieve your design:
Drawable Code:
et_border1.xml Drawable for unselected or unfocused edittext.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<stroke
android:width="1dp"
android:color="#ffffff" />
</shape>
</item>
</selector>
et_border2.xml Drawable for selected or focused edittext.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#FF1792E5" />
</shape>
</item>
</selector>
edit_text_border drawable to show selected or unselected edittext
<?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/et_border2" />
<item android:state_focused="true" android:drawable="#drawable/et_border2" />
<item android:drawable="#drawable/et_border1" />
</selector>
In 'layout file'
<EditText
android:id="#+id/edtName"
android:inputType="text|textCapWords"
android:maxLength="40"
android:textColor="#android:color/black"
android:singleLine="true"
android:layout_height="40dp"
android:background="#drawable/edit_text_border"
android:layout_width="match_parent"/>
Add or remove color according to requirement
I hope it work for you.
I have tested below code and it works very well.
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ediittext_selector"
android:hint="Demo"
/>
ediittext_selector.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/edit_text_border_selected" />
<item android:state_focused="true" android:drawable="#drawable/edit_text_border_selected" />
<item android:drawable="#drawable/edit_text_border" />
</selector>
edit_text_border_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#737373" />
<stroke
android:color="#FF4081"
android:width="1dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
edit_text_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#737373" />
<stroke
android:color="#F78C1F"
android:width="1dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>

Switch stops displaying after adding Thumb/Track drawables

I added switch, I wanted to change its color, so i added following in drawables.
Thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#color/black" />
<item android:state_pressed="true" android:drawable="#color/tabAccessoryButtonSelected" />
<item android:state_checked="true" android:drawable="#color/tabAccessoryButtonSelected" />
</selector>
Track.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/tabAccessoryButtonSelected" />
</selector>
Layout.xml
<Switch
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/switch1"
android:layout_centerHorizontal="true"
android:paddingTop="50dp"
android:text="#string/notification_settings"
android:textColor="#color/white"
android:thumb="#drawable/thumb"
android:track="#drawable/track"
/>
As soon as i added this, switch has stopped displaying in the layout, the text is still there, but the Switch tool is not there.
If i remove Thumb.xml and Track.xml it starts displaying switch.
Kindly guide me what i am doing wrong here.
Thanks
I have modify it now try my solution below.
Layout.xml
<Switch
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/switch1"
android:layout_centerHorizontal="true"
android:paddingTop="50dp"
android:text="#string/notification_settings"
android:textColor="#color/white"
android:thumb="#drawable/thumb"
android:track="#drawable/track"
/>
track.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/color_thumb" />
<item android:drawable="#drawable/gray_track" />
</selector>
thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/gray_track" />
<item android:state_pressed="true" android:drawable="#drawable/color_thumb" />
<item android:state_checked="true" android:drawable="#drawable/color_thumb" />
<item android:drawable="#drawable/gray_track" />
</selector>
color_thumb.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:height="40dp" />
<gradient android:height="40dp" android:startColor="#color/tabAccessoryButtonSelected"" android:endColor="#color/tabAccessoryButtonSelected""/>
</shape>
gray_track.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:height="40dp" />
<gradient android:height="40dp" android:startColor="#color/tabAccessoryButtonSelected" android:endColor="#color/tabAccessoryButtonSelected"/>
</shape>
I know this is an old question but I had the same problem today and the issue seemed to be that the thumb drawable needs a fixed size. The track size seems to adjust itself to the size of the thumb so a thumb with no indicated size won't display and because of this the track won't display either.
If you add an actual xml drawable as a thumb and not just a color you can add a size element to it:
switch_thumb.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorSwitchThumb" />
<corners android:radius="#dimen/switch_corner_radius"/>
<size android:height="10dp" android:width="10dp"/>
</shape>

Clickable effect for a white Button in android

I have make clickable effect on other color buttons But how to generate clickable effect for a white button
<Button
android:id="#+id/featured_listing_button_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-7dp"
android:background="#drawable/botton_account_middle_white"
android:text="Featured Listing" />
What i have tried :: I have made the button White, some other properties
But clickable effect is not present now !
botton_account_middle_white.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="3px"
android:color="#000000" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
How to give clickable effect for the button ! ... White button
You should use selector for Highlighting a Button.
button_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="false"
android:state_pressed="false"
android:color="#color/normal" />
<item android:state_pressed="true"
android:color="#color/pressed" />
<item android:state_selected="true"
android:state_pressed="false"
android:color="#color/pressed" />
</selector>
Use it like
<Button
android:id="#+id/featured_listing_button_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-7dp"
android:background="#drawable/button_selector"
android:text="Featured Listing" />
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/bgalt" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/bgalt" />
<item android:drawable="#drawable/bgnorm" />
</selector>
<Button
android:id="#+id/mybutton"
android:background="#drawable/selector" />

How to create custom spinner like border around the spinner with down triangle on the right side?

I want to develop custom spinner like line around spinner with triangle at right bottom corner.
like following image
For above fig I wrote my custom spinner like a
spinner.xml
<Spinner android:background="#drawable/spinner_background"/>
spinner_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<item android:state_pressed="true"
android:drawable="#drawable/spinner_ab_pressed_new_theme_bs">
<shape>
<solid
android:color="#color/White" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/skyblue" />
</shape>
</item>
<!-- spinner_ab_default_new_theme_bs -> this image for corner triangle -->
<item
android:drawable="#drawable/spinner_ab_default_new_theme_bs" >
<shape>
<solid
android:color="#color/White">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/gray"/>
</shape>
</item>
And I got output like following image
I tried lot but not achieve my goal please anybody have solution to develop spinner.
like above first one image.
Spinner
<Spinner
android:id="#+id/To_Units"
style="#style/spinner_style" />
style.xml
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/gradient_spinner</item>
<item name="android:layout_margin">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#DFFFFFFF</item>
</style>
gradient_spinner.xml (in drawable folder)
<?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:endColor="#B3BBCC" android:startColor="#E8EBEF" android:type="linear" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_arrow" />
</item>
</layer-list></item>
</selector>
#drawable/spinner_arrow is your bottom right corner image
This is a simple one.
your_layout.xml
<android.support.v7.widget.AppCompatSpinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_background"
/>
In the drawable folder, spinner_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item>
<shape>
<solid
android:color="#color/colorWhite">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/colorDarkGrey"/>
</shape>
</item>
<item >
<bitmap android:gravity="bottom|right"
android:src="#drawable/ic_arrow_drop_down_black_24dp" />
</item>
</layer-list></item>
</selector>
Preview:
You can achieve the following by using a single line in your spinner declaration in XML:
Just add this: style="#android:style/Widget.Holo.Light.Spinner"
This is a default generated style in android. It doesn't contain borders around it though. For that you'd better search something on google.
Hope this helps.
UPDATE:
AFter a lot of digging I got something which works well for introducing border around spinner.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:top="8dp">
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
<stroke
android:width="2dp"
android:color="#9E9E9E" />
<padding
android:bottom="16dp"
android:left="8dp"
android:right="16dp"
android:top="16dp" />
</shape>
</item>
</layer-list>
Place this in the drawable folder and use it as a background for spinner. Like this:
<RelativeLayout
android:id="#+id/speaker_relative_layout"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/spinner_style"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/select_speaker_spinner"
style="#style/Widget.AppCompat.DropDownItem.Spinner"
android:layout_width="match_parent"
android:layout_height="70dp"
android:entries="#array/select_speaker_spinner_array"
android:spinnerMode="dialog" />
</RelativeLayout>
If you don't prefer to create multiple XML files, try:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:strokeWidth="1dp"
app:strokeColor="#color/black"
app:cardCornerRadius="4dp">
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"/>
</com.google.android.material.card.MaterialCardView>
To change the border color:
app:strokeColor="YOUR_COLOR_HERE"
To change the border's width:
app:strokeWidth="YOUR_DP_WIDTH_HERE"
There are two ways to achieve this.
1- As already proposed u can set the background of your spinner as custom 9 patch Image with all the adjustments made into it .
android:background="#drawable/btn_dropdown"
android:clickable="true"
android:dropDownVerticalOffset="-10dip"
android:dropDownHorizontalOffset="0dip"
android:gravity="center"
If you want your Spinner to show With various different background colors i would recommend making the drop down image transparent, & loading that spinner in a relative layout with your color set in.
btn _dropdown is as:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/spinner_default" />
<item
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_focused="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:drawable="#drawable/spinner_default" />
</selector>
where the various states of pngwould define your various States of spinner seleti
To change only "background" (add corners, change color, ....) you can put it into FrameLayout with wanted background drawable, else you need to make nine patch background for to not lose spinner arrow. Spinner background is transparent.
You could design a simple nine-patch png image and use it as the background of spinner. Using GIMP you can put both border and right triangle in image.
It's super easy you can just add this to your Adapter -> getDropDownView
getDropDownView:
convertView.setBackground(getContext().getResources().getDrawable(R.drawable.bg_spinner_dropdown));
bg_spinner_dropdown:
<?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" />
<corners
android:bottomLeftRadius=enter code here"25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>

Change drawable of scrollbarThumbVertical when scrolling is active

i tried to change the drawable of the scrollbar with a selector (state_pressed, state_focus, ...) but i didn't work.
scrollview
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbarSize="5dp"
android:scrollbarThumbVertical="#drawable/custom_scrollbar" >
selector
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_pressed="true"
android:drawable="#drawable/scrollbar_pressed" />
<item
android:state_focused="true"
android:drawable="#drawable/scrollbar_pressed" />
<item android:drawable="#drawable/scrollbar" />
</selector>
one of the two drawables. the only difference is the color
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#color/grey"
android:endColor="#color/dark_grey"
android:angle="0" />
<stroke
android:width="1dp"
android:color="#color/white"/>
<corners android:radius="6dp" />
</shape>
any other solution for this?

Categories

Resources