Avoiding highlight flash in Android - android

I have two drawables that are used as backgrounds to indicate state (pressed or selected) of my list items. The Pressed drawable is a selector, but with no state specified; it is wired up via XML to be the android:listSelector for the list.
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/my_actual_drawable" />
</selector>
The Selected drawable, however, is applied by code, because it's complicated and more than one simple background drawable change needs to happen when an item is selected.
If I click very quickly between two list items, one item can have (and keep) the Selected highlight while a different item has (and keeps) the Pressed highlight. I believe this is because the press happens so quickly that it is not interpreted by the underlying framework as a click, so no onItemClick reaches my list.
One solution is to use the selector with state (that's what selectors are for!):
<?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/my_actual_drawable" />
</selector>
but this has the unfortunate effect of turning off the Pressed highlight before my code can apply the Selected highlight, so there is a flash of unhighlightedness between the two states, no matter how early in the onItemClick handler I put the setBackgroundResource call.
Another solution would be to monitor not only onItemClick events, but also onTouch events, and handle everything in code; that appears to make things too slow.
What can I do to avoid both the flash and the double-selection state?

I see where you say that your situation is more complex than just simply changing the background drawable, so I'm sorry if I have over-simplified.
Why don't you let the xml selector handle all that it can? You should be able to setup the selector xml to handle both the pressed and selected states for changing the background resource to avoid the flash and double-selection that you're seeing. My assumption is that the other stuff that you're doing in java is fast enough to not be noticeable if the background isn't doing strange things.
I like to use the list_selector_background from the android framework and the drawable documentation for state list as my references for doing things like this although the list_selector_background is probably a little more complex that yours will need to be.

Related

Changing button styles programmatically

In my app the user views a document they have made. It includes various elements including Buttons and ToggleButtons.
The user can set a custom theme that changes the Typeface and Text color used in the TextViews/EditTexts as well as the background color of the layouts.
All these elements are generated at runtime.
What I would like is to make the Buttons/ToggleButtons respect the style the user chooses. I can determine the basic background color I want for the buttons at runtime, but if I use View.setBackGroundColor() it becomes a flat colored rectangle whereas I would like to retain the border/shadow effect, plus the color change when pressed. i.e. i would like it to look and behave like a Button, just shaded a different color.
Is it possible to get what I want, given that until the app is running the actual colors required remain unknown?
Rounded corners, shadow effects, etc are often accomplished in Android by using images. See this developer documentation for an explanation of how that works.
A widget can have either an image background, or a solid color background. So, by setting the background color you are override the background image. If you want to change the color without losing everything else, you need to edit the image files.
Generally you can't change styles programmatically; you can set the look of a screen, or part of a layout, or individual button in your XML layout using themes or styles. Themes can, however, be applied programmatically.
There is also such a thing as a StateListDrawable which lets you define different drawables for each state the your Button can be in, whether focused, selected, pressed, disabled and so on.
For example, to get your button to change colour when it's pressed, you could define an XML file called res/drawable/my_button.xml directory 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/btn_pressed" />
<item
android:state_pressed="false"
android:drawable="#drawable/btn_normal" />
You can then apply this selector to a Button by setting the property
btn.setBackground(drawable);

Android UI control like tag control

I want to know how to get a control that contains list of strings arranged as in an image bellow.
you can see the strings strings added in random way based on its width
I tried to use normal textview with inside a linear or relative layout with but it didnt work.
Can you pleae tell me the best practice to have a control that I pass to it a list of strings and it shows them like the image bellow ?
This can be done using a flow layout and toggle buttons inside it.
A good flow layout is available here.
And the toggle buttons will need a Selector drawable to give it the proper checked/unchecked appearance.
Here is a selector example:
<?xml version="1.0" encoding="utf-8"?>
<item android:drawable="#drawable/rect_tag_checked" android:state_checked="true"></item>
<item android:drawable="#drawable/rect_tag_normal" android:state_checked="false"></item>
<item android:drawable="#drawable/rect_tag_normal"></item>
Google Chips can be used to displays tags. For your use-case Input chips will do the job. Read about it here. The tags/chips are completely customize-able.
The library is available for both Android and iOS so you can provide a consistent user interface for your users on both the platforms.

Custom RadioButtons with different color

I am new to android and try to create a simple color picker.
The idea is to have a few filled circles showing a color and the selected one should have an circle around it.
That didn't sound too hard. I draw the circles with <shape>, create two resources, one with only a filled circle, one with the filled circle and an transparent circle with a solid stroke. Then I created a <selector> and set this as the background of my <RadioButton>.
This worked fine for one color, however now I'd like to have the same styles, but with a different color for each <RadioButton>.
The only solotution I could come up with is to create this triplet of xml-files for each color. This would certainly work, but it strikes me as extremely inelegant.
I tried to access the background of the buttons, but it seems I can only access the <selector>, not it's children.
I also tried to create a FrameLayout that would parent the RadioButton and an ImageView so the RadioButton only needs to display the border. This didn't fully work. I could select a RadioButton, but it wouldn't get deselected upon selecting another one.
I guess the best solution is to have a background that can change itself according to the state of the button, just like <selector> does, but with a more comprehensive way of determining which drawable to use, at least with access to the tag-Property of the RadioButton, but I cannot see how to do this.
check this github repo
https://github.com/VishalJogiya/CustomRadioAndShapes
xml layout code
<customradio.vj.com.library.CustomRadio
android:id="#+id/radio9"
android:layout_width="#dimen/thirty_two_dp"
android:layout_height="#dimen/thirty_two_dp"
android:layout_marginBottom="#dimen/eight_dp"
android:layout_marginLeft="#dimen/sixteen_dp"
android:layout_marginRight="#dimen/sixteen_dp"
android:layout_marginTop="#dimen/eight_dp"
custom:radioColor="#AA00FF"
custom:radioShape="simple_circle2" />

Disabled Android Button Dimmed

I am creating my first Android App that will be making profit, selling it to a company. I am not very advanced yet in Android App Development.
I have two buttons. I have been able to detect when the bottom of a ScrollView has been reached. Once that happens, one of the buttons becomes clickable, Button.setClickable(true);
When the button is not clickable, I would like it dimmed.
Here is an example from another application I wrote of what I mean. It is written in Java, but it is not an Android App.
Many buttons and other components there are disabled until the one with the diamond (turns on scanning) is toggled on. Those disabled components have a dim look to them. I would like to know how to accomplish the same for Android. I have searched Google but not found anything relevant yet.
P.S. If you would like to know more about the software in that picture I created. It is open source and you can check it out here.
https://github.com/BullShark/JSpeak
Similar answer to Anup Cowkur, but I believe it's cleaner and a better practice to define a single drawable with different states.
dimmable_button.xml (put in your res/drawables folder)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item state_enabled="true"
android:drawable="#drawable/clickable_image" />
<item state_enabled="false"
android:drawable="#drawable/dimmed_image" />
</selector>
Then, the layout file where your button is defined:
<button
....
android:background="#drawable/dimmable_button" />
Now, when you do button.setEnabled(bool) the button's background will change automatically to a dimmed one.
Simply make another image with whatever look you want and change the background of the image to it when it is not clickable.
When it is dimmed out:
button.setBackgroundResource(R.drawable.dim_image);
When it becomes clickable again:
button.setBackgroundResource(R.drawable.clickable_image);
Did you tried
myButton.setEnabled(false);?
or
android:clickable can be used via xml

Android: Animating Images?

I have a bar with several ImageViews, each of them is used as a button (by using the OnClickListener). Now what I want to achieve is when a user pressed the image, some kind of a glow effect will appear around the image (much like when you press barButton on the iphone).
Is this possible?
This is possible. The correct way to achieve this is to define a StateList Drawable.
The statelist defines a separate drawable for each state.
For example the following xml defines a drawable that shows the blue_button_pressed drawable if the button is pressed and the blue_button_active drawable in all other cases.
<?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/blue_button_pressed"/>
<item
android:drawable="#drawable/blue_button_active"/>
</selector>
You put this file in the drawable folder like any other image and also reference it in the layout files like any other drawable.
Most Views don't actually animate animatable Drawables though, for some reason. To do this, you have to manually start the animation by calling the start() method on the AnimationDrawable (or Animatable, for that matter).
You can't do this immediately after setting the Drawable to a View though, for some weird reason. Instead, you can try to post the start call to a Handler, so that there is some time between the initial setting of the Drawable and the start of its animation.
Didn't have time to find out why it behaves like this yet, but it is what I ended up having to do.
You could manually generate this glow effect as a background picture and make it appear as a parent view behind the actual images when clicked. But I don't think there is any native function for that.

Categories

Resources