I am trying to make something function exactly like the send comment button on the Google Plus app. Everything is easy enough to get working, but I can't figure out the proper way to have the submit icon/button change background color when clicked. What is the best way to handle that? I assume I could do something on click on on hold to change the color manually, but I'm not sure that's the proper way to do it.
Here's a screenshot of what I am talking about (below). In the bottom right-hand corner there is a small arrow send icon. When clicked (or held), the background of the image changes to show that it has been clicked. I would like to do the same thing.
You can use an ImageButton:
In your layout you create the ImageButton, with the arrow image as src, and a selector as background.
<ImageButton android:id="#+id/someID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/the_arrow_image"
android:background="#drawable/background_selector"/>
The selector can look something 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/background_color_when_pressed" />
<item android:drawable="#drawable/background_color_when_not_pressed" />
</selector>
The arrow image has to be transparent for the background to be visible ;)
Related
I have a AppCompatButton defined in a XML layout, and I have set a theme for it like this:
android:theme="#style/CustomAccentOverlay"
And I have set:
android:stateListAnimator="#null"
to remove the shadow. I have two problems with this.
The height of the button is deducted the height of the shadow, even though the shadow is not shown. Should I remove the shadow in some other way, or how do I fix this?
The button has rounded corners, and I want the corners to be sharp. I can not set a background on the button, because I want to keep the standard ripple effect and that goes away if I set a background (at least I don't know how to keep it if I set a background). I have tried setting
<item name="android:bottomLeftRadius">0dp</item>
and all the other corners to the CustomAccentOverlay theme and also its corresponding style, but it does not work. How can I set the corner radius to zero on my button?
Thank you
Søren
Use the following code for the Button.
<android.support.v7.widget.AppCompatButton
android:layout_width="200dp"
android:layout_height="200dp"
android:text="Button"
android:stateListAnimator="#null"
android:elevation="0dp"
android:background="#android:color/darker_gray"
android:foreground="?attr/selectableItemBackground"
/>
I will explain the attributes.
android:elevation="0dp" and android:stateListAnimator="#null". No shadow for the button.
android:background . Set the desired color as background. It removes the rounded corners.
android:foreground="?attr/selectableItemBackground" . It gives the ripple effect when the button is pressed.
Update 1:
It seems like android:foreground attribute for View works from API 23. For below APIs, create a drawable with ripple in drawable-v21 folder and set it as background to the button,
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="NewApi"
android:color="#color/ripple_color">
<item android:drawable="#color/normal_state_button_background_color"/>
</ripple>
For pre Lollipop versions, create a drawable with selector in drawable folder with the same name.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_color"
android:state_pressed="true" />
<item android:drawable="#drawable/focused_color"
android:state_focused="true" />
<item android:drawable="#drawable/normal_color" />
</selector>
First question:How to remove shadow of a button?
Here is the answer:
Just add this attribute to your button
android:stateListAnimator="#null"
Second question: How to make the corner of button sharp without losing the standard ripple effect.
Here is the answer: But first you have to make two drawble file with same name but one for below api 21 and one for api > 21 because the ripple is only available only api > 21.So now I am showing how to create that.Read the following text carefully
Right click on the drawble folder and choose new and "Drawble resource file" and hit next then name the drawble whatever you like and press ok.Then again right click on the drawble folder and choose new and "Drawble resource file" and hit next and name the drawble exactly what you named the previous drawble folder but this time at the bottom you can see a section called "available qualifiers".Go to this section and at the very bottom you can see "Version",click it and then you can see a arrow icon at the right,click it then in the "Platform api level" add 21 and then press ok.And now if you expand drawble folder you can see two file of your created drawble file.Once for api that is below 21 and once for upper 21.Open drawble file that you have created and make sure you open that have "(v21)" at the last.Now delete everything from there and add the following code
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="?attr/colorControlHighlight" xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="0dp"/>
<solid android:color="#D6D7D7"/>
</shape>
</item>
</ripple>
And add this attribute to your button
android:background="#drawable/youdrawblefilethatyouhavecreated"
And now if you run your application you can see that there is no shadow and your button has sharp corner and if you click the ripple shows up.
Lastly,your button look something like this
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button 1"
android:background="#drawable/yourcreatddrawblefile"
android:stateListAnimator="#null"/>
Hope this help!
It really sounds like you want to use a clickable TextView rather than a Button. TextView by default will not have shadow and has sharp corners and you can attach a click listener to it. Remember, Button is just a fancy TextView with a lot of visual add-ons to it, and it sounds like you want to remove a lot of it.
If you want to keep the ripple on the TextView and define your own background, set android:foreground="?attr/selectableItemBackground"
EDIT: Even though the other answer was marked accepted, I would still argue that the OP should use a TextView with a click listener and applying the ripple effects to that than using a Button. Clickable TextViews in this manner are exactly how the Google I/O app implements all of their flat buttons that meet Material Design spec.
Use this code
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorAccent"
android:text="#string/button" />
How would I add a click effect similar to the below image for a button click event?
The button in my activity already has it's background set to an image so I'm not sure how I would add a background of a state also as in this tutorial:
Android Button color changing on onClick?
You need two image, one for normal state and another for pressed state. At first create a selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_image" android:state_pressed="true"/>
<item android:drawable="#drawable/normal_image"/>
</selector>
Add this selector in your button as a background.
Here's something similar. I am not sure though, if this fits your solution.
EDIT: It uses selector, just like #Raghunandan suggested above.
I have two images, image 1 and image 2, and I have image_button which has image 1 as a button background. Now what I want to do is, if I press on this image_button, I want the image background to change to image 2, and if I take my finger off the image_button, I want the image 1 to be back again like it used to be.
How can I make this?
You can achieve this programatically when a click occurs :
ImageView imageIcon = (ImageView) findViewById(R.id.icon);
imageIcon.setImageResource(R.drawable.other_icon);
You want something called a selector. In your drawable folder, create a xml file with these contents:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed -->
<item android:drawable="#drawable/image1" android:state_pressed="true"/>
<!-- default -->
<item android:drawable="#drawable/image2"/>
</selector>
Selectors are really useful for this kind of stuff, you should read the documentation
Basically, give this thing a name, like yourSelector.xml
You can use this the same as any other drawable, like #drawable/yourSelector or R.id.yourSelector (make sure not to write '.xml' though)
I am trying to change the appearance of an Android Button, but I can't get it to work. I use this code in "custom_button.xml" to handle the drawing of the button:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/btn_normal"
/>
<item android:drawable="#drawable/btn_over"
android:state_pressed="true"/>
In my layout file I set the button's background to the custom_button drawable. The normal state works (the one that first appears), but when the button is pressed the image doesn't change. I double checked to make sure I am using different images and I am. Does anyone know why this isn't working?
Thanks!
Switch the order of the items (so pressed first, then neutral). Pressed or not, the top item is always true.
I want to use a Button in my android app but I want to customize how it looks. However, I want the highlight and selected colors of the button to be the same as the default colors (i.e. the dark and light orange gradients, or whatever the theme color supplies).
Is there anyway to get the default highlight/selected drawables and to use that as the fill for my buttons on the selected and highlighted states?
Thanks!
You are asking for two different things, do you want the drawables or the colorcode?
Anyway, you can find the name of the drawables here: http://androiddrawableexplorer.appspot.com/
I don't know if you can use them directly from your app or if you have to save them to your drawables folder first, but you can find them in your sdk. If you want the colorcodes, use gimp to extract them from the pictures.
It seems that you can use a selector as drawable inside a selector!
(You can or should not use #android:drawable/btn_default_selected, because it is private)
This meens that you can write your own selecter and use the whole default android selector for the items you want the default behavior for.
I used this selector
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#android:drawable/btn_default" android:state_pressed="true"/>
</selector>
And added it to as background to a linear layout.
I don't know why, but this messed up the padding/margin as well, thats why i set them to 0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_linear_layout_button"
android:padding="0dp"
android:layout_margin="0dp"
android:orientation="vertical" >
<!-- YOUR LAYOUT THAT ACTS LIKE A BUTTON -->
</LinearLayout>
The Result is that you have the parent background color in the unpressed state and the android background color for the pressed state.
Selectors are what you're looking for. Google around for tutorials. Here's one.
I Suppose you can find the Default Selector in the Android Source Code.