I read the android manual to learn more about drawable and this is what I have came across. Stated in the android Developer:
item
Defines a drawable to use during certain states, as described by its attributes. Must be a child of a selector element.
1) I am confused about what a selector element is.
2) why do I have to include my item inside the selector?
Selector is the "container" element.
Take for example this playbutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="#drawable/pause" /> <!-- pressed -->
<item android:state_checked="true"
android:drawable="#drawable/play" /> <!-- focused -->
<item android:drawable="#drawable/pause" /> <!-- default -->
</selector>
(stolen from here)
It's a single button image that dynamically shows different images depending on whether it is currently pressed or not. The system can "select" the item from a list of items and so it was named selector, I guess.
Or "state list" like in the documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
Related
In a calculator app that I am creating, I want buttons to animate in a pop-up way (scaling-up) when the button is clicked. But that is not the issue. I want the button to stay scaled up (bigger size) as long as the user hold the button. It is supposed to go back to its original size (small size) only when the user releases the button. In the same way button colour has to change from white to blue as long as user hold the button(back to white when released). Is there any way to do that? I am not very good at animations in android studio. So please try to explain it in simple words.
I am also attaching a video that I made for prototyping to illustrate it.
Click link below
https://drive.google.com/file/d/13B8LAuNW1ymhmliw52BEIkMbJAJQRbfw/view?usp=sharing
You should create an xml file that have a selector as root element. This element selects the shape in base of the corrent state like pressed, focused or enabled.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/button_disabled" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/button_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/button_focused" />
<item
android:state_enabled="true"
android:drawable="#drawable/button_enabled" />
</selector>
If you want a different shape with different color and size you must create a new drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#00CCFF"
android:centerColor="#0000CC"
android:endColor="#00CCFF"
android:angle="90"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="2dip"
android:color="#FFFFFF" />
<corners android:radius= "8dp" />
</shape>
If you want to change the size you can use the attribute size.
Then you must implement the on click listener in the mainActivity onCreate file and set the pressed state of the button to true.
In a nutshell you must create one selector drawable for the button and two drawable one for the state pressed="true" and one for pressed="false".
Here I put an exaustive example: https://stackoverflow.com/a/29848987/13198061
I'd like to gain after onclick button efect similar to default in android, but with own colors
Default button is white or light gray
When i touch button color is changed for one moment (orange)
when release, button's color back to original color (white/light gray)
Which method's are using to this effect ?
I used onTouchListener() to set touched button color
and OnClickListener() to set back original color
But when i scroll group button(inner ScrollView) when i touch any button, color changed but when release button color ofc not change back. Which method should i use ? How can i fix that ?
///////////////////
I created colors in values and define 2 colors
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white">#ffffff</color>
<color name="blue">#004080</color>
</resources>
I create new folder color and button_state.xml inner this 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="false"
android:drawable="#color/blue" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/white" />
</selector>
to my button i assign code in xml file
android:background="#color/button_states"
Now my button have no background, but i don't know why
create xml file defining button states and button color depending on state, for example button_states.xml in res/color folder in your project:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/pressed_button_color"/>
<item android:state_selected="true"
android:drawable="#color/selected_button_color"/>
<item android:drawable="#color/default_button_color"/>
</selector>
define these colors in values/colors.xml
and use this in your layout xml file on the Button element as:
android:background="#color/button_states"
In the xml for your button set its background to the following
android:background="?android:attr/selectableItemBackground"
This will automatically handle the colour changes to be default changes in android
If you want to have you own colours you need to do a custom selector and set it as your background. Something like the following should work:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/list_selector_pressed" />
<item android:state_focused="true" android:drawable="#drawable/list_selector_focused" />
<item android:drawable="#color/selector_background" />
</selector>
Your drawable would be like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/selector_background_pressed"/>
</shape>
Not 100% sure but you might just be able to use #color/my_colour directly in the selector rather than referencing a drawable. But this way will definitely work
I recommend you use of this online tool. You just need to choose your desired color set and after download the resources put the in your project resource folder respectively and than apply theme to your you application in Manifest file with name name you set on this online tool("Theme Name" by default AppTheme)
<application android:debuggable="true" android:label="#string/app_name"android:theme="#style/AppTheme">
This question already has answers here:
Android: disabling highlight on listView click
(15 answers)
Closed 6 years ago.
I want to disable the highlight that appears when the user selects a row (listSelector) from code. I don't want to disable the onClick and enabled settings (I still want to listen to clicks, just want to remove the highlight).
Specify android:listSelector="#android:color/transparent" in your ListView XML.
Just create a drawable that has a transparent color in it, something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:drawable="#android:color/transparent"/>
<!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
<item android:state_focused="true" android:state_enabled="false" android:state_pressed="true" android:drawable="#drawable/list_selector_disabled_holo_light" />
<item android:state_focused="true" android:state_enabled="false" android:drawable="#drawable/list_selector_disabled_holo_light" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/transparent" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#color/transparent" />
<item android:state_focused="true" android:drawable="#drawable/list_focused_holo" />
</selector>
And then set by code or by XML:
listView.setSelector(R.drawable.my_transparent_selector);
The javadoc for this method says:
Set a Drawable that should be used to highlight the currently selected item.
and the XML attribute is:
android:listSelector
You can play with all the states, remember that you also have the focus state.
I have done this way:
By adding two properties of ListView.
android:cacheColorHint="#android:color/transparent"
android:listSelector="#android:color/transparent"
Your ListView should looks like below:
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#android:color/transparent"
android:listSelector="#android:color/transparent">
</ListView>
Done
try listview.setSelector(new ColorDrawable(Color.TRANSPARENT));
The highlight effect is a style on the listSelector. You can override the listSelector style.
This is a example with a listview : Android: disabling highlight on listView click
I want to have a ListView that have an image in every item (star) and that image is clickabe. In other word user can click on star of every row of ListView and I want to define click action for that. How I can do this?
Add an imageView.. make it clickable by adding this to your ImageView tag:
android:clickable="true"
android:focusable = "false"
you can make a ImageButton like
<ImageButton
android:id="#+id/sound_button"
android:layout_x="430px"
android:layout_y="219px"
android:layout_width="48px "
android:layout_height="48px"
android:scaleType="center"
android:src="#android:drawable/volumeicon"
android:background="#drawable/clearbuttonup"
/>
and make a new xml and name it selector
<?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/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
OR you make a Imageview and setproperty of that ImageView isClickable="true"
You can use an ImageButton,
http://developer.android.com/reference/android/widget/ImageButton.html
You can also simply make the image clickable, and set it's onClickListener(),
http://developer.android.com/reference/android/view/View.html#setOnClickListener(android.view.View.OnClickListener)
The problem with this however is that there will be no visual feedback to the user as the image is clicked. An image button looks and acts like a button, and if you are willing to provide normal, pressed, etc versions of the image, you can attach a state list drawable to the image button to make it look very professional.
http://developer.android.com/reference/android/graphics/drawable/StateListDrawable.html
I'm attempting to override the default ToggleButton appearance. Here's the XML that defines the ToggleButton:
<ToggleButton android:id="#+id/FollowAndCenterButton"
android:layout_width="30px"
android:layout_height="30px"
android:textOn="" android:textOff="" android:layout_alignParentLeft="true"
android:layout_marginLeft="5px"
android:layout_marginTop="5px" android:background="#drawable/locate_me"/>
Now, we have two 30 x 30 icons we want to use for the clicked/non-clicked states. Right now we have code that programmatically changes the background icon depending on the state:
centeredOnLocation.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
if (centeredOnLocation.isChecked()) {
centeredOnLocation.setBackgroundDrawable(getResources().getDrawable(R.drawable.locate_me_on));
} else {
centeredOnLocation.setBackgroundDrawable(getResources().getDrawable(R.drawable.locate_me));
}
}
});
Obviously I'm looking for a better way to do this. I've tried to make a selector for the background image, which would automatically switch between the states:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/locate_me" /> <!-- default -->
<item android:state_checked="true"
android:drawable="#drawable/locate_me_on" /> <!-- pressed -->
<item android:state_checked="false"
android:drawable="#drawable/locate_me" /> <!-- unchecked -->
But this does not work; reading the ToggleButton API (http://developer.android.com/reference/android/widget/ToggleButton.html), it appears that the only inherited xml attributes are
XML Attributes
Attribute Name Related Method Description
android:disabledAlpha The alpha to apply to the indicator when disabled.
android:textOff The text for the button when it is not checked.
android:textOn The text for the button when it is checked.
There does not seem to be the android:state_checked attribute, despite the class having the method isChecked() and setChecked().
So, is there a way to do what I want in XML, or am I stuck with my messy workaround?
Your code is fine. However, the toggle button will display the first item in your selector that it matches, so the default should come last. Arrange the items in the following manner to ensure they will all be utilized:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_pressed="true" /> //currently pressed turning the toggle on
<item android:state_pressed="true" /> //currently pressed turning the toggle off
<item android:state_checked="true" /> //not pressed default checked state
<item /> //default non-pressed non-checked
</selector>