TransitionAnimation shows both on top of each other - android

I am trying to use a TransitionAnimation to switch between two background images.
Here's the main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity"
tools:deviceIds="wear_round"
android:background="#drawable/background">
</RelativeLayout>
As You can see, the background is called "background". It's code is following:
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/start_background"/>
<item
android:drawable="#drawable/pause_background"/>
</transition>
start_background and pause_background are two different images, one representing something like a "play" button and the other one a "pause" button.
Now I call the transition like that:
private TransitionAnimation transition;
private RelativeLayout screen;
screen = (RelativeLayout)findViewById(R.id.screen);
transition = (TransitionDrawable)screen.getBackground();
Now when pressing the screen, following method gets called:
transition.startTransition(100);
Or
transition.reverseTransition(100);
Now the problem is, when pressing the screen, the background image switches between
And
As You can see, the first image contains the play and the pause button on top of each other, probably there are two play images on top of each other on the second image as well.
I don't know how that comes, any suggestions?
Here are the two background files:
pause_background.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/pause_background_pressed"/>
<item
android:drawable="#drawable/pause_background_default"/>
</selector>
start_background.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/start_background_pressed"/>
<item
android:drawable="#drawable/start_background_default"/>
</selector>

Perhaps just setting the background to start_background_pressed at the start in background.xml at the start is what you need. By just setting it as a transition in the layout file it probably isn't smart enough to handle it. Both probably get drawn.
Then you can set the transition in the code when it is first interacted with. I would assume it would work as expected from that point on.

Related

How to have a android:background color and still retain the gray focus highlight for lists in Android?

I'm porting my app to Chrome OS and there are a few places in the app where arrow key navigation works, but the current focused element is not highlighted in any way. I've found that whenever I set a background color for an element like
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
...
android:background="#color/white" >
...
</LinearLayout>
then the default highlighting of the focused element will not show. Removing this will show the default background (which is not always the same as what I want).
Also, in cases where I use a selector in a ListView, the background is in front of the intended highlighting drawable (which can be seen if the color is somewhat transparent).
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="false" android:state_focused="true" android:drawable="#drawable/list_focused" />
<item android:state_pressed="true" android:drawable="#drawable/list_pressed" />
<item android:drawable="#color/white" />
</selector>
This is even more strange since I was under the (possibly incorrect) impression that selectors will only pick one of the items.
I can't post too much code since this is work code, but this is happening throughout the app wherever there's a list.
If you have a selector defined for the views in your ListView, set the drawSelectorOnTop property to true on your ListView, as per the docs.

Image Button change size onClick

On Android Studio I made an image perform like a button. Though what I can't find anywhere is how do I make it so when I click on the image aka the button it becomes a bit smaller and when you release it comes back to original size. Ik that onClick you can perform functions and activities and what not but how do I change the actual button image so as I'm holding down the click button it gets smaller and when i release it comes back to its original size.
You can use selectors to achieve that. For example define this in your drawable folder:
selector_state_xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/button_bg_normal"></item>
</selector>
And use this as your View drawable:
<Button
android:id="#+id/your_button"
android:background="#drawable/selector_state_xml"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
An alternative could be using ScaleAnimation

Why does a Button loses its original behaviour after changing its color?

I am writing an Android app and now I am styling it. I am using a custom theme which is a child of Theme.Holo.Light. I really like Theme.Holo.Light because its buttons have a special effect when you click and hold it. Like the lower button in the picture below:
Not click:
click:
The upper button has been changed color. Now when I click on that button, it doesn't have that effect. I really don't understand why. Can anyone tell me why this happens and how can I get the same effect with a colored button?
And also, the colored button seems fatter.
This is because the button uses a selector to display different colors/effects/drawables based on the state of the click. You can check out the link on Color State List Resource.
To create your own you have to create a slecetor cml file and put it in your drawables folder.
For example.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_btn_default_normal_gray" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#drawable/shape_btn_default_pressed_gray" android:state_pressed="true"/>
<item android:drawable="#drawable/shape_btn_default_disabled_gray"/>
</selector>
or with colors
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/dark_green" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#color/light_green" android:state_pressed="true"/>
<item android:drawable="#color/gray"/>
</selector>
To apply this you have to set the background drawable in your layout xml like this.
<Button
android:id="#+id/my_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Some text"
android:background="#drawable/selector_btn_default_gray"/>
That is the "ripple effect" of material design.You have define you own style for that effect.Link below may help you or you may search for many other answers on StackOverflow. Material effect on button with background color
It does not loses its behavior you can see after click (in your second image) the button show same scale as the above have...so by default the background is set as to show that it is button (like with padding or so) and can changes to show oncklick effect...
So when you set your desire background to button...It takes complete change on what is on presently on it and then you have to manually set onclick effect..

Android Custom Button Pressed State

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.

how to animate one item of layer-list

I have a layer list object, it contain two images, one is background,
and the other is a rotation disk image which will be raotated at the
top of the background image. i.e. I use this layer-list as a linearlayout background,
and I only want to animate "disk_bg" item of the layer-list;
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/
android">
<item android:drawable="#drawable/player_bg" />
<item android:top="166dp" >
<bitmap android:id="#+id/disk_bg" android:src="#drawable/cd"
android:gravity="center" />
</item>
I use this layer-list as a layout background, do you know how can I animate the disk_bg layer in my application?
can you help me, many thanks to you~
don't you get my question? or there is no way to do that?
First create 2(or more) layer-list resources ie *layer_frame1.xml* and *layer_frame2.xml* , where you set your frames. In your case let's say changing the android:top of the disk item.
Then create an animation-list resource where you set the timing and order of the frames :
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item
android:drawable="#drawable/layer_frame1"
android:duration="100"/>
<item
android:drawable="#drawable/layer_frame2"
android:duration="100"/>
</animation-list>
Save it in a file ie *drawable/player_animation.xml* and set it as background on a View
<View
android:id="#+id/animation_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/player_animation" />
Finally in your code just say when you want the animation start.
((AnimationDrawable)findViewById(R.id.animation_test).getBackground()).start();
Watch out do not start the animation inside onCreate() method.

Categories

Resources