I would like to define a button in Android, through XML, which, below the standard Button graphics (change color when clicked, slightly rounded edges,...), shows an image of my choice. I would like the final product to be somewhat like this:
I have tried change the src and background of an ImageButton, but it does not provide the intended effect. Could you please point me some way of achieving this?
Maybe that's not exactly what you mean by standard, but when you set a background, you end up having to recreate the behavior when the button is clicked. The best way to do it in Android is by using a selector as your button's background. Create a XML drawable with the selector in it.
Example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_bg_pressed" />
<item android:drawable="#drawable/button_bg_default" />
</selector>
That way, when your button is clicked, it will change the background to other image that does what you want.
EDIT:
There are other modifiers such as focused, if you need.
If you want Lollipop's ripple effects, I think you can create a Layout and put your button inside it. Change the Layout background and set the button background to transparent. If that doesn't work, try adding android:background="?android:attr/selectableItemBackground" to your button.
As Paulo said, you can achieve the click effect with a selector.
See this answer (https://stackoverflow.com/a/30192562) it gives the code for a very nice and customizable ripple effect.
Related
I currently have icons in a GridView on my app. When they are clicked, an orange square appears around them briefly as a highlight. The only problem is that I think this looks amateurish and would like to change the shape so that it clips the icon in the GridView instead of a large square. If you are unsure as to what I mean, it is carried out successfully in the Catch Notes app, on their dashboard/home screen. I was just wondering whether anybody knew a way to tackle this or if it is simply a small layout attribute.
https://play.google.com/store/apps/details?id=com.threebanana.notes&hl=en
Thanks in advance, all help would be appreciated!
It looks effectively like this EditText in the image below. The way that it borders the EditText in orange is exactly how it borders the icons in the home screen when clicked.
First, in your layout file, specify a drawable background:
android:background="#drawable/bg_your_view"
Then edit the bg_your_view file which is in drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg_your_view_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/bg_your_view_normal" android:state_focused="false"></item>
</selector>
At last, create corresponding drawable files for pressed and normal states:
bg_your_view_pressed.xml contains the shape, the color you want for highlight.
bg_your_view_normal.xml is similar, just without highlight effect.
I've decided that the easiest way to solve this problem is to simply reference another image when the image on the GridView has been clicked. This means that the second image can just be edited in Photoshop in order to have a glow around it.
I having an issue where the ImageButton background is being drawn with a different drawable from one of my resources. I'm setting the background to be transparent but on some cases it's picking up one of my drawables called bottom_shadow.9.png. Why why!? It's freaking weird...
I've seen this issue before... Some of my app users have complained seeing this issue and now I'm determined to figure this out! Take a look below what I currently have. Any tips or ideas would help.
The color value I created under values/colors.xml:
<color name="transparent">#00000000</color>
My ImageButton under my one xml layout under layout/:
<ImageButton
android:id="#+id/ibHelp"
android:layout_width="wrap_content"
android:layout_height="#dimen/settings_list_item_height"
android:background="#color/transparent"
android:contentDescription="#string/content_desc_more_information"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:scaleType="centerInside"
android:src="#drawable/btn_help" />
This is what I'm seeing on the generated R.java file:
public static final class drawable {
public static final int bottom_shadow=0x7f020000;
}
public static final class color {
public static final int transparent=0x7f080009;
}
This is what it should look like:
This is what I'm seeing:
Could it be related to this issue?
http://code.google.com/p/android/issues/detail?id=20283
I think you are facing the same issue as I on another project : When using the transparent color #00000000 on a background, Android will not actually make it transparent but instead use the background drawable of the element directly under it.
Not sure what I've just said is clear but to check if this is it, I found a quick and easy solutions : Don't use #00000000 as your background transparent but any other completely transparent color : #00FF0000 or even #00F00000 should do it.
See the issue I raised in Google tracker : http://code.google.com/p/android/issues/detail?id=24653
Why are you creating your own color when it's built into Android.R.color? I would try using:
android:background="#android:color/transparent"
Whether or not it fixes your problem, it's simpler and cleaner.
I think you wanna your button's background to be some kind of color, but you have assigned both a src and a color of the button(in the layout xml), which means that the button may use the src picture as the background, not a pure color. I don't know if I made the point.
Just to add to this, I was seeing really strange periodic display corruption in my transparent ImageButton background because I was specifying the items in my background selector as follows:
<item android:drawable="#android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
This might seem to work occasionally, but I definitely had cases where the ImageButtons would render with a ghastly all-white background instead of the nice transparent background.
Note that I was mixing up the android:drawable syntax with a color resource. The correct way to specify a color resource seems to be either an android:color="#FF00FF" attribute or as a child element of item using a element. I searched long and hard, and eventually found this post.
I have like 10+ textview embedded in a scrollview to give a ListView effect(I don't want to use a ListView here for some particular reasons).
Some details about the textview is that it has a background which is an image.
So my question is when I click on a particular textview among the 10+ views taht I have, I want to animate the background like the ones in a native ListView. If this is possible can someone provide some pointers please?
If not animating the background can we atleast animate the borders of the clicked textview?
Thanks,
Sana.
Set your TextView's background to state list selector drawable such as:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/your_pressed_background" />
<item android:drawable="#drawable/your_normal_background" />
</selector>
You save the above XML in the res/drawable directory and reference it in your TextView like an other resource.
Based on the state of your TextView, android will select the background drawable. When your TextView is pressed, the pressed background will be drawn. When it is not, your normal background will be drawn.
I know that I can trigger the OnClickListener.onClick of a Button manually in code by calling performClick, but that doesn't seem to make it visually appear as it's been clicked. I'm looking for a way to manually make a button appear as if it's been clicked. Do I need to manually change the background drawable and invalidate (and then change it back again on a Handler.postDelayed call), or is there a more framework-y way of doing this?
EDIT
I know how to make the button have different drawables to appear pressed when the user initiates the press. The question is this:
Is there a simple way to make a button appear pressed programmatically when not physically pressed by the user?
SOLUTION
I just subclassed Button and made the button aware of it's normal background as a StateListDrawable and the Drawable that is used as the pressed state. I expose a method that manually sets the background to the "pressed" drawable, and I use Handler.postAtTime to have it return to it's normal background so it can be used as a regular button again when I'm done.
Although this question is very old, I figured I'll still answer it. You don't need to subclass the View. First call performClick(), visual cue won't last long, but then you can set the button's pressed state via view.setPressed(true); and then reset it a couple of milliseconds later like this.
handler.postDelayed(new Runnable() {
#Override
public void run() {
view.setPressed(false);
}
}, 100);
Ya, you have to create 2 drawables. One for pressed state and other for normal state.
Then you will have to create an xml like:
<?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/focused_drawable" />
<item
android:state_pressed="false"
android:drawable="#drawable/unfocused_drawable" />
</selector>
Place this xml inside your drawable folder. You can also add focused state as
android:state_focused="true"
Then inside your layout which is used by your activity, give inside your button tag:
android:background="#drawable/your xml file name"
I have a linear layout in which each row is inflated programatically and I want the rows to behave like the ListView when clicked on. That is, I want the row to highlight in the exact same way/colour that the default ListView does. How would I go about doing this?
Ok I have finally figured out how to do this...basically it is done using a selector like the color selector linked by style except instead of 'color' use a drawable for the states and you can refer to the default list drawable that is used in ListView by this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#android:drawable/list_selector_background" />
</selector>
and using this xml as the background for my View.
All the public default drawables can be found here: http://developer.android.com/reference/android/R.drawable.html
I was able to do the same with a text view that I wanted to behave like a list item by using:
<Textview
....
android:background="#android:drawable/list_selector_background"
/>
This might be a good place to start looking.
Although, i would advise you to use the ListView itself, rather than implementing it again.
if you still have a problem with that then please remember that some of UI elements are not clickable (RelativeLayout), so you have to add one more line:
<RelativeLayout
....
android:clickable="true"
...
To your listview set property
android:listSelector="#color/test"
and this test color set any transparent color you like. you can create any transparent color by using hex transparent color