I am trying to create an ImageButton able to change the icon color after pressing. I want to do that in my XML file. I have the following code:
...
<ImageButton
android:id="#+id/stop_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/stop_icon"
android:background="#drawable/stop_button"
android:tint="#color/ship_cove"
app:layout_constraintBottom_toTopOf="#id/bottom_icon_guideline"
app:layout_constraintLeft_toRightOf="#id/start_icon_guideline"
app:layout_constraintRight_toLeftOf="#id/end_icon_guideline"
app:layout_constraintTop_toBottomOf="#id/mediatop_icon_guideline" />
And here is my #drawable/stop_button.xml file content:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/cornflower_blue">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/oxford_blue" />
<corners android:radius="8dp" />
</shape>
</item>
</ripple>
As I stated before, my purpose is to change my stop_icon tint after pressing my stop_button, but I do not know how I can do that. Can anyone help me?
Note: if my button is not pressed, I want my stop_icon with the color #color/ship_cove. If it is, I want the color #color/mirage.
Instead of color create a color selector with a pressed state.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:color="pressed_color" android:state_pressed="true" />
<item android:color="default_color" />
</selector>
And use this selector for the color of the icon. The rest should be taken by the system.
Related
I have following spinner:
<Spinner
android:id="#+id/safe_network_time_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/spinner_selector"
android:entries="#array/schedule_edit_days_repeat"
android:popupBackground="#drawable/custom_dropdown_white_background"
android:spinnerMode="dropdown"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/divider4"
tool:listitem="#layout/custom_dropdown_spinner_button" />
The spinner_selector is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:gravity="right|center_vertical" android:src="#drawable/down_red_arrow" />
</item>
</selector>
The dropdown list appears like this:
When I select an item of the dropdown list, if it is too long it overlaps the arrov bitmap. how can I avoid this?
Try using a layer-list
bg_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!-- This is the actual spinner background -->
<selector >
<!-- Feel free to use your own drawable for these states -->
<item android:state_window_focused="false" android:drawable="#drawable/bg_border_accent_thin"/>
<item android:state_pressed="true" android:drawable="#drawable/bg_border_accent_thin"/>
<item android:state_window_focused="true" android:state_pressed="false" android:drawable="#drawable/bg_border_grey_thin"/>
</selector>
</item>
<!-- This is the spinner drawable, use your custom drawable aswell. android:right does the magin to separate this drawable from the spinner content-->
<item android:drawable="#drawable/ic_ripple_arrow"
android:gravity="center_vertical|right"
android:right="16dp"/>
</layer-list>
Edit 02/02/2020
My apologies for a weekend-long lunch.
If you are using the androidx dependencies (which I suggest you do) here's the code that I use to properly add spacing between the text and the selected item in the spinner.
On your layout.xml
<!-- The line I think you need is the one giving padding to the right -->
<androidx.appcompat.widget.AppCompatSpinner
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingRight="36dp"
android:background="#drawable/bg_spinner"
android:popupBackground="#drawable/bg_spinner_popup"/>
The bg_spinner.xml is the one provided a couple of lines above.
And the popup one doesn't really matter, since it gives some directives on how to paint a background, nothing important but here it is either way...
bg_spinner_popup.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android
android:shape="rectangle">
<corners android:radius="3dp"/>
<solid android:color ="#android:color/white"/>
<stroke android:width="5px" android:color="#color/primaryColor"/>
</shape>
When we click the Button,the background change color to some black transparent color. But, when I change the background of Button, the user can't see the visual reaction of Button when he click on them.
Thank you for your help.
For v21 and above you can use:
bg_button.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/button_normal" />
</ripple>
In your Button:
<Button
...
android:background="#drawable/bg_button" />
Important: if button has disable state ripple effect not shows.
More: https://guides.codepath.com/android/ripple-animation
Thank you !
This is my answer and i use it well.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/blackTrans"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/blackTrans" />
</shape>
</item>
</ripple>
#color/blackTrans is a black color with transparency
Does any one knows how can i skin an android button to look like this:
a busy cat http://www.11sheep.com/temp/picForSO.jpg
Thanks in advance,
Lior
The following layout files will product a button with 5px radius, of course u input your own color and change the solid color to gradient to match ur screenshots, then on the button change the text colour to white or something.. I dont have time for examples now.. good luck though.
and lastly you have to apply them as background to your button like this
<Button
android:id="#+id/btnLoveThisOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Love me love u too!"
android:background="#drawable/button_background" <!-- Yes look at me -->
/>
button_background_normal.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/button_background_normal_color"/> <!-- Change this to your own colour -->
<corners android:radius="5px"/>
<stroke android:width="1dp" android:color="#20ffffff"/>
</shape>
button_background_pressed.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/button_background_pressed_color"/> <!-- Change this to your own colour -->
<corners android:radius="5px"/>
</shape>
button_background.xml
<?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="false"
android:drawable="#drawable/button_background_normal" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:drawable="#drawable/button_background_normal" />
</selector>
I know two ways to make it:
a Button or TextView with an image having that engraving rectangle, for stretch, use 9.patch :)
a Button or TextView with transparent background and a selector drawing the shape border
However, I don't know exactly how they did as shown in your picture.
I tried to change the background color of the toggle button using XML file as white color, but the toggle button is totally damaged. It looks like all the button was covered with white.
There is no indication of ON or OFF on the toggle button when I have changed the color of the toggle button to white. Is there is another way to change the background which will not damage the indication of the toggle button?
<ToggleButton android:id="#+id/togglebutton"
android:layout_width="100px"
android:layout_height="46px"
android:background="#ffffff"
android:layout_above ="#+id/save"
android:textOn="DAY"
android:textOff="NIGHT" />
This is how my XML code look for the toggle button.
Yes, there is a way to change the background as you wish, but you have to use a selector like this as background:
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/some_image" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/some_other_image" />
<item
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/some_image1" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/other_image" />
</selector>
For #Drawable, etc. (you can use a color or make a gradient. Check this for more information about gradients.
Follow this way to make your ToogleButton have background color red when On and green when OFF
First, create tooglebutton_selector.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/togglebutton_on"
android:state_checked="true" />
<item android:drawable="#drawable/togglebutton_off"
android:state_checked="false"
/>
</selector>
Second, create togglebutton_on.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ff0000" /> // red color
</shape>
Third, create togglebutton_off.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#00FF00" /> // green color
</shape>
Finally, in your ToggleButton
<ToggleButton
android:id="#+id/btnMon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tooglebutton_selector" //set background of ToggleButton to tooglebutton_selector
/>
When you decompile your SystemUI.apk, you should go to the following file: SystemUI/res/values/colors.xml
Then change the following line:
#ff000000
#ffffffff
#80000000
#ffadc1d6
#ffffffff
#ffe6e6e6
I am using an ImageButton. But I don get the highlight when clicked. I googled and many suggested to use selector where another image is displayed. Is there any way around this. by using only one image and highlighting it or giving it a glow effect. so that the user knows that button has been clicked.
This is actually not very difficult to do. You don't even need to create 2 seperate .png files or anything like that. For instance, if you want to have a button which has a gradient, and then change it when the button is pressed:
Step 1:
Create default button gradient (drawable/default_button.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp" />
<gradient android:endColor="#8ba0bb" android:startColor="#43708f" android:angle="90" />
<stroke android:width="1dp" android:color="#33364252" />
</shape>
Step 2: Create default button pressed gradient (drawable/default_button_pressed.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp" />
<gradient android:endColor="#43708f" android:startColor="#8ba0bb" android:angle="90" />
<stroke android:width="1dp" android:color="#33364252" />
</shape>
Step 3: Create selector (drawable/default_button_selector.xml):
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="#drawable/default_button_pressed" />
<item android:drawable="#drawable/default_button" />
</selector>
Step 4 (optional): Create style for the button (values/style.xml):
<resources>
<style name="DefaultButton">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/default_button_selector</item>
</style>
</resources>
Step 5: use the button (layout/main.xml):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<button style="#style/DefaultButton" />
</RelativeLayout>
As you can see, it's not particularly difficult to do.
Without having to create multiple images (pressed, normal etc) and even don't have to create selector. Use setOnTouchListener rather than setOnClickListener. The below code will give you the grey overlay on the clicked item.
((ImageButton)findViewById(R.id.myImageBtn)).setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
ImageButton view = (ImageButton ) v;
view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);
v.invalidate();
break;
}
case MotionEvent.ACTION_UP:
// Your action here on button click
case MotionEvent.ACTION_CANCEL: {
ImageButton view = (ImageButton) v;
view.getBackground().clearColorFilter();
view.invalidate();
break;
}
}
return true;
}
});
You can simply use android:foreground for your View to achieve clickable effect:
android:foreground="?android:attr/selectableItemBackground"
For use with dark theme add also theme to your layout (to make clickable effect clear):
android:theme="#android:style/ThemeOverlay.Material.Dark"
In order not to have to set several drawable for each button I set the color filter attribute of the image button in an on touch listener.
See code here in another post:
https://stackoverflow.com/a/14278790/891479
I managed to do this!!
First you declare buttonStyle.xml in drawable folder.
<?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/button_pressed" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/button_pressed" />
<item android:drawable="#drawable/button_normal" />
</selector>
Then you create button_pressed.xml in drawable folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/semiTransparentGnfrBlueColor" />
<stroke android:width="10dp" android:color="#android:color/transparent" />
</shape>
After that, you create button_normal.xml in drawable folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="rectangle">
<solid android:color="#color/gnfrBlueColor"/>
<stroke android:width="10dp" android:color="#android:color/transparent" />
</shape>
You can use default colors but if you want to do it like me, you need to have a file named colors.xml in values folder and this values inside:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="gnfrBlueColor" type="color">#2A3748</item>
<item name="semiTransparentGnfrBlueColor" type="color">#602A3748</item>
<integer-array name="androidcolors">
<item>#color/gnfrBlueColor</item>
<item>#color/semiTransparentGnfrBlueColor</item>
</integer-array>
</resources>
Finally you set this to your button or whatever:
savedAccountLoginButton.SetBackgroundResource(Resource.Drawable.buttonStyle);
NOTICE THAT I set a stroke with color transparent because when you set backgroundresource your button becomes bigger and with this trick it remains original.
This is the only way I could archieve this programmatically.
If you want to do this by XML:
<Button
android:text="ENTRAR"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/buttonstyle"
android:textColor="#color/white"
android:textSize="18sp"
android:id="#+id/button1" />