Is it possible change a color of drawable from selector?
My selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/ic_plus_circle_grey600_48dp" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_plus_circle_black_48dp"/>
</selector>
I try use that way, (in this case I'm using a selector on tint) but I'm getting some error:
<ImageView
android:id="#+id/btAdd"
android:layout_width="wrap_content"
android:src="#drawable/ic_plus_circle_black_48dp"
android:tint="#color/blue_android_focused"
android:layout_height="wrap_content"/>
This is the selector of tint:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/blue_android_pressed" android:state_pressed="true" />
<item android:color="#color/green" />
</selector>
Using tint on bitmap (** API 21+**):
Selector: drawable/selector_add
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<bitmap android:src="#drawable/ic_plus_circle_grey600_48dp"
android:tint="#color/blue_android_pressed" />
</item>
<item>
<bitmap android:src="#drawable/ic_plus_circle_grey600_48dp"
android:tint="#color/colorAccent" />
</item>
</selector>
In the ImageView
<ImageView
android:id="#+id/btAdd"
android:layout_width="wrap_content"
android:src="#drawable/selector_add"
android:layout_height="wrap_content"
/>
You can have the same drawables with different colors, that´s work for me
Your should use tint like this :
<ImageView
android:id="#+id/activity_register_et_fullname"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/bg_page"
app:backgroundTint="#color/blue_android_focused"/>
Use ImageView in AppCompatActivity, it will be inflated with AppCompatImageView (see also android.support.v7.app.AppCompatViewInflater). You should look at the code in it.
Related
How can I change color of rounded corners textView or button with transparent background like this
I want when clicked again the button unselect , not only select
Add xml file in drawable folder bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<stroke
android:height="1.0dip"
android:width="1.0dip"
android:color="#ffee82ee" />
<solid android:color="#android:color/transparent"/>
<corners android:radius="7dp"/>
</shape>
and in layout
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:textColor="#ffee82ee"/>
It will work..
You can use a selector with multiple state as drawable for background and text color.
<Button
android:id="#+id/button1"
android:background="#drawable/selector_xml_name"
android:layout_width="200dp"
android:layout_height="126dp"
android:text="Hello" />
drawable xml file :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
</selector>
You have to create a background with a selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_pressed="true" android:drawable="#drawable/likeactivepressed" />
<item android:state_pressed="true" android:drawable="#drawable/likeinitialpressed"/>
<item android:state_checked="true" android:drawable="#drawable/likeon"/>
<item android:drawable="#drawable/likeinitial"/>
</selector>
then set your background to your button :
android:background="#drawable/like_button"
You have different options:
Just use the MaterialButton in the Material Components library with the Widget.MaterialComponents.Button.OutlinedButton style and the app:cornerRadius, app:strokeColor attributes.
Something like:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="BUTTON"
app:strokeColor="#color/myColor"
app:cornerRadius="16dp"
../>
To achieve the selection of the buttons you can use a MaterialButtonToggleGroup.
Something like:
<com.google.android.material.button.MaterialButtonToggleGroup
app:singleSelection="true"
...>
<com.google.android.material.button.MaterialButton
.../>
</com.google.android.material.button.MaterialButtonToggleGroup>
Use a Chip
Something like:
<com.google.android.material.chip.Chip
style="#style/Widget.MaterialComponents.Chip.Entry"
app:chipCornerRadius="16dp"
android:text="Chip"
.../>
This question already has answers here:
How to use selector to tint ImageView?
(6 answers)
Closed 4 years ago.
I have 2 images (normal,pressed), I want to set in selector of button
<?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/recent_pressed" />
<item
android:drawable="#drawable/recent" />
</selector>
now I want to apply tint color in #drawable/recent_pressed image.
can have any solution for this.
I don't want to create custom class for imageview, because this selector is use as a menu.
I searched about that but this link not working for me
Create a selector tint_tem.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_pressed="true" />
<item android:color="#color/white" android:state_activated="true" />
<item android:color="#color/green" />
Then in your xml, you can add tint attribute to ImageView:
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:tint="#color/tint_item"
android:src="#drawable/ic_menu_home" />
ou can also use this selector on a TextView using textColor attibute:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/tint_item" />
You can create a bitmap and apply tint on it .
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<bitmap android:src="#drawable/your_pressed_drawable" android:tint="#color/colorPrimary"/>
</item>
<item android:drawable="#drawable/your_second_drawable" />
</selector>
I am using a drawable to change the background and text of textViews inside of my navigation drawer. I would like to keep the background white for the text area, but by testing keeping the background white does not show the ripple effect on the background, instead it does it to the text making the text gray. In the picture below, the middle one is being pressed causing the ripple effect.
Here are my drawable files that are used to make the changes in colors
Background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/selected" android:state_activated="true" />
<item android:drawable="#color/white" />
</selector>
Text:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primary" android:state_activated="true" />
<item android:color="#color/primary_text" />
</selector>
textView layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25.0sp"
android:background="#drawable/activated_background"
android:textColor="#drawable/activated_text"
android:id="#id/text1"
android:layout_weight="0"
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip" />
</RelativeLayout>
you should use 2 drawable files and use it as your view background.
for pre-lolipop versions:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white_list_item_selected_background" android:state_pressed="true" />
<item android:drawable="#android:color/white" />
</selector>
for lolipop (v21):
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/white_list_item_selected_background" >
<item android:drawable="#android:color/white" />
</ripple>
If you use custom background, ripple effect will not be shown. You may have to use other ripple library such as Material Ripple.
In my case ripple effect is working after the first click, but for first click it didn't work for me. Have changed the background selector file with android:state_activated="true" and in main.xml android:clickable="true" then it's work fine for all time.
selector.xml (under res\drawable\selector.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="#drawable/card_bg_pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:state_activated="true" android:drawable="#drawable/card_bg_focused" android:state_enabled="true" android:state_focused="true"/>
<item android:state_activated="true" android:drawable="#drawable/card_bg_selected" android:state_enabled="false" android:state_selected="true"/>
</selector>
In activity_main.xml
<com.mysample.RecyclingImageView
android:id="#+id/imageview_overlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/selector"
android:clickable="true" />
My selector is:
<item android:state_pressed="true" android:color="#color/bg_grey"/>
<item android:state_focused="true" android:color="#color/bg_grey"/>
<item android:color="#color/white"/>
and i have my TextView as:
<TextView
android:id="#+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/textview_selector"
android:padding="5dp"
android:text="Some Text"
android:textColor="#color/text_grey"
android:textSize="16dp" />
This way i am getting:
android.view.InflateException: Binary xml file line #68: Error inflating class <unknown>
if i am using this selector as android:textColor="#drawable/textview_selector" its working fine
The problem here is that you cannot define the background color using a color selector, you need a drawable selector. So, the necessary changes would look like this:
<?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/selected_state" />
</selector>
You would also need to move that resource to the drawable directory where it would make more sense since it's not a color selector per se.
Then you would have to create the res/drawable/selected_state.xml file like this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/bg_grey" />
</shape>
and finally, you would use it like this:
android:background="#drawable/selector"
You are defining Color in place of a background Drawable in Selectors xml,try with backgrounds
drawable
you just need to ensure the colors are in colors.xml file and do not put the hex colors directly into the selector items.
my_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/category_item_selected_color" android:state_selected="true"/>
<item android:drawable="#color/category_item_selected_color" android:state_pressed="true"/>
<item android:drawable="#color/white" />
</selector>
and make your textview look like this:
<TextView
android:id="#+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:letterSpacing="0.05"
android:textColor="#000000"
android:gravity="center"
android:textSize="17sp"
tools:text="New In"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="#drawable/my_selector"
android:layout_gravity="center"
/>
I customized the Toggle button by using a drawable defined by using a selector. I use this drawable as background for the Toggle button.
<ToggleButton
android:id="#+id/mailbox:toggle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="#drawable/toggle_background"
android:gravity="center_horizontal|center_vertical" />
The toggle_background is defined here:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img1"
android:state_checked="true" />
<item
android:drawable="#drawable/img2"
android:state_checked="false" />
</selector>
The problem is that the image is always stretched. Is there a way to define an image for the two states that is not stretched?
What I need is a background that will be stretched and in the center of the button an icon that must not be stretched.
Is it possible?
This is my final solution.
In the layout:
<ToggleButton
android:id="#+id/mailbox:toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/toggle_drawable_layers"/>
in the toggle_drawable_layers.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/toggle_drawable_bkg"></item>
<item android:left="10dp" android:drawable="#drawable/toggle_drawable_left"
android:gravity="center_vertical|center_horizontal" />
</layer-list>
in the toggle_drawable_left.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<bitmap android:src="#drawable/bitmap_checked"
android:gravity="center_vertical|center_horizontal" />
</item>
<item android:state_checked="false">
<bitmap android:src="#drawable/bitmap_unchecked"
android:gravity="center_vertical|center_horizontal" />
</item>
</selector>
I did the same task this way, the button:
<ToggleButton android:id="#+id/mlAbout"
android:textOn="#string/about"
android:textOff="#string/about"
android:background="#drawable/ml_about" />
#drawable/ml_about:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/list_bg_top"></item>
<item android:left="10dp">
<bitmap android:src="#drawable/waiting_status_btn"
android:gravity="center_vertical|left" />
</item>
</layer-list>
#drawable/list_bg_top background image that will be stretched and #drawable/waiting_status_btn is the icon the will not be stretched with the widget
Just use bitmaps instead of drawables in your selector like so (no need to use layers):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img1"
android:state_checked="true" />
<item
android:drawable="#drawable/img2"
android:state_checked="false" />
</selector>
Also, don't forget to declare
android:textOff=""
android:textOn=""
in your ToggleButton declaration
There is another way to overcome the issue of stretching:
Just convert the image into a Nine-Patch image, where the stretchable areas are just on all sides of the image.
Then Android will stretch the image only in invisible areas, and keep the visible image unchanged.