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.
Related
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.
I want to create a customize button that have the shape of a round image I have created with CS6.
To customize a button first it is needed to define a drawable element.
If I want to use 2 diferent images depending on the state of the button, I can define an .xml (customize_button.xml) like follow:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="#drawable/btn1" />
<item android:drawable="#drawable/btn2" />
</selector>
Where btn1 and btn2 will be 2 .png images placed in the drawable folder.
If I want to make a button with an oval shape, the xml file I should write would be something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:startColor="#6586F0"
android:centerColor="#D6D6D6"
android:endColor="#4B6CD6"
android:angle="90"/>
</shape>
Finally, if I would like to add this customized button to my applications I just would need to add in the layout:
<Button
android:id="#+id/BtnPrueba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customize_button"
/>
My problem:
By default a button will be squared, so if I want to add a image in the background that is oval, there will be a white gap around it. Do anyone knows how could I combine both .xml files in one?
The problem is that the background of your image is white so what you need to do is
Solution:
You could use photoShop and
Use the lasso to cut of the background so it will be transparent
hi i have to realize this layout . it has this layout.
I could try to use the icons as imagebuttons but the active state of a button is somewhat like this one !
How should i proceed with this ?
You should use selector as follows:
Prepare 2 images for button states, and put it into res/drawable folder.
button_normal_green.png – Default image button.
button_pressed_yellow.png – Display when button is pressed.
Now, create a new XML file in “res/drawable/” folder, in whatever name you want, in this case, we just give a name as “new_button.xml“. This file defined which button state is belong to which image.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_pressed_yellow" android:state_pressed="true" />
<item android:drawable="#drawable/button_normal_green" />
</selector>
3.set background to button
<ImageButton
android:id="#+id/imageButtonSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/new_button" />
Have a look at Complete Example
(Now I have come across related questions on StackOverflow but unfortunately none of the solutions worked for me which is why I had to ask this separately)
I am a Novice to Android. The problem: I need to have an image that acts as a button. Now I understand that this can be achieved by either using an image on a standard button or by using something called as "ImageButton" (which I guess is highly recommended although I have no idea why).
Requirements: I need detailed guidance for going about this problem. Specifically, I thought the "putting-image-on-standard-button" was easier until I faced two major issues: I was unable to set the image in the center (thanks drawable-top,bottom,left6,right) and once I changed the background color to match that of the Activity screen's back-color, the button effect disappeared. Simply put, I need a moderately easy way of having an image act as a button or a button with an image which has all three effects: focussed, pressed and default. I used ImageButton but then I did not know how to make custom shapes or 9patch images to give it all the desired effects, I am pretty satisfied with the default button that android provided. All I simply need is something like a background hover over the image or something of that sort which indicates the user that the image is being pressed and the event has been generated!
Can someone please help me out with this? I need the UI to look decent and therefore, need the corresponding effects on my image/button. Thanks in Advance :)
This is my icon-image:
I wish to have some sort of hover effect around this that indicates that the image has been pressed just like any normal button.
Use ImageButton and StateList Drawable. You need selector for different button's states. You can assign different drawable for different state to imitate the onFocus or onPressed effect on normal button.
This is selector.xml in drawable folder under res:
<?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/cyan"/> <!-- pressed state -->
<item android:state_focused="true"
android:drawable="#color/cyan"/> <!-- focused state -->
<item android:drawable="#android:color/transparent"/> <!-- default state -->
</selector>
And this is color.xml in values folder under res:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="cyan">#33B5E5</color>
</resources>
Set the ImageButton's src to your image and set the background to selector.xml.
This is the final result:
There is a good tutorial here: Android ImageButton Selector Example
If someone also still has an issue with this.
I've created the selector but referred the drawable to two different image files, and used the XML in the imagebutton as a source. It worked like a charm.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_add"
android:state_focused="true" />
<item android:drawable="#drawable/btn_add" />
</selector>
And the image button looks like this:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add_button_selector"
android:background="#null"/>
create xml view
<ImageView
android:id="#+id/imageview1"
android:background="#drawable/selector_xml_name"
android:layout_width="200dp"
android:layout_height="126dp"/>
create inside draw able folder selector_xml_name.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected"android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
create inside draw able folder numpad_button_bg_selected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="90dp">
<solid android:color="#color/selected"/>
<padding />
<stroke android:color="#000" android:width="1dp"/>
<corners android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/>
WARNING: The XML in this question is wrong, read the answer before you confuse yourself!
I have been banging my head on the wall for a while now. The following posts have shed light on the subject, but failed to solve my issue: Android ListView State List not showing default item background and ListView item background via custom selector
The proper nine-patch background shows perfectly when I select the list item, but I can not get the default nine-patch background to show initially. It seems to me that I need to set the default item background somehow, but I can't figure out how to do so.
List View:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/shopListHeader"
/>
<ListView
android:id="#+id/shopList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="0px"
android:divider="#FFFFFFFF"
android:listSelector="#drawable/shop_list_selector"
/>
</LinearLayout>
Selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:visible="true">
<!-- the list items are enabled and being pressed -->
<item
android:state_pressed="true"
android:drawable="#drawable/shop_list_item_pressed" />
<item
android:state_selected="true"
android:textColor="#FFFFFFFF" />
</selector>
Background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:visible="true">
<item
android:state_selected="true"
android:drawable="#android:color/transparent" />
<item
android:drawable="#drawable/shop_list_item" />
</selector>
As you can see, I have dumbed down the examples from the references.
You may also notice that the Background selector isn't being referenced anywhere. I started tossing it in random places (if the app compiled the addition either had no effect or cause a forced close)
I have also made an attempt to stop the color of the text from changing to black and grey when an item is selected but not pressed (can be done by scrolling through the list). Since my background will be black in the center, the text becomes partially invisible when selected. That addition (the last item node in the Selector) does nothing, as far as I can tell.
Does anyone have any thoughts on getting this ridiculously time consuming functionality working?
I was gonna delete this thread, but I can't so I'll see if I can't use this as an example of what not to do :)
First, in the ListView XML: android:listSelector="#drawable/shop_list_selector"
Don't do that!
What I was trying to do here was set the background of the list items and the android:background property didn't work. You may have noticed that the item XML is missing, and that is because it was missing from my head! (I never touched it over the countless hours I was hammering away at this 'issue') So the line android:background="#drawable/shop_list_selector" goes in the item's properties and everything is groovy. (Remember the XML above is very wrong so don't use it!)
...Well except that it doesn't look as good in real life as it did in my head :(
Back to the drawing board!!!
You havent defined a "normal" state, see this example
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/blue"
android:state_pressed="true" />
<item android:color="#color/red"
android:state_selected="true" />
<item android:color="#color/white" />
</selector>
in here white is the "normal" state, in here you can find some documentation about it.
I hope this helps