I am using an XML drawable as splash screen which is a layer-list element. Inside it, I am using an animation.xml file, which contains a loading animation.
While showing the splash screen, I can see the loading animation drawable, but without any animation. I am probably doing something wrong.
Can anyone please point me out the correct way?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/purple_700" />
<item
android:drawable="#drawable/ic_launcher_foreground"
android:gravity="center" />
<item
android:width="300dp"
android:height="300dp"
android:drawable="#drawable/loading_animation"
android:gravity="bottom" />
</layer-list>
Thanks for your help!
Try to place the last item with this:
<item
android:width="300dp"
android:height="300dp">
<animated-rotate
android:drawable="#drawable/loading_image"
android:pivotX="50%"
android:pivotY="50%" />
</item>
Related
I am trying to get something like this:
I need to continuously change the color of each arc sequentially to give a 'wave' like feel to it.
I don't know whether I should use Canvas to draw the entire animation or use drawable resource files.
Can anyone please suggest which would be better and why? Also , if you can link a similar looking animation which can be used as reference for this then that would be great too! Thanks
Define the drawable file. The root node element can be animation-list
<?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/ic_volume_s1"
android:duration="400" />
<item
android:drawable="#drawable/ic_volume_s2"
android:duration="400" />
<item
android:drawable="#drawable/ic_volume_s3"
android:duration="400" />
<item
android:drawable="#drawable/ic_volume_s4"
android:duration="400" />
<item
android:drawable="#drawable/ic_volume_s5"
android:duration="400" />
</animation-list>
I want to create a progress bar which should show moving images effect. for that I have created an animation list and have saved in my drawables folder in res. Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/p_one" android:duration="150" />
<item android:drawable="#drawable/p_two" android:duration="150" />
<item android:drawable="#drawable/p_three" android:duration="150" />
<item android:drawable="#drawable/p_threesix" android:duration="150" />
</animation-list>
After that I have used this drawable like this: for my ProressBar Drawable
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminate="true"
android:indeterminateOnly="true"
android:indeterminateDrawable="#drawable/progress_bar_anim"
android:visibility="visible" />
Problem: Nothing is displaying when I run this code. Why ?
When I use any single image instead of the animation-list drawable, then it is displayed correctly. Is there any other to do this ?
Try to add android:oneshot="false" like below in <animation-list ..> attribute
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
...
</animation-list>
android:oneshot="false" is
Boolean. "true" if you want to perform the animation once; "false" to loop the animation.
Android developer link for Frame animation
Similar strange problems here, I tried two different device, A worked very well, B showed two images in horizontal, I add <clip> in <item> , A became not working, B worked very well, so...better not to use <animation-list> in progressBar...
Here is a picture of what I want to accomplish, where there is no progress color (transparent), with a solid grey background bar:
I tried
android:progressTint="#00000000"
But that sets the whole bar (progress bar AND the back bar) to transparent.
I also tried:
android:progressDrawable="#drawable/customseekbar"
where customseekbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:drawable="#drawable/seekbar_background" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/seekbar_background" />
</item>
and seekbar_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#FF555555" />
</shape>
but then I get this fat and ugly:
What am I doing wrong here? Thanks
How to Style a Seekbar in Android
Here you go, you need to do the following
Step 1:
In drawable, put "progress_bg.png" (find attached)
Step 2:
In drawable, create "myprogessbar_style.xml", and insert the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/progress_bg" />
<item
android:id="#android:id/secondaryProgress"
>
<scale
android:drawable="#drawable/progress_bg"
android:scaleWidth="100%"/>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/progress_bg"/>
</layer-list>
Step 3:
Your seekbar
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:indeterminate="false"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:progressDrawable="#drawable/myprogessbar_style"/>
Result
Attachment
P.S. Yes, it's not a transparency but the expected result
This seems to work:
<SeekBar
...
android:progressTint="#android:color/transparent"
... />
seekbar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:height="1px" android:color="#FF555555" />
</shape>
1px line shape
android:maxHeight="3dp" add this to your layout xml where you have mentioned the seekbar. You can change the dp if you wish to decrease the height
That's much easier to solve. In your seekbar_background.xml:
Instead of:
android:color="FF555555"
Try:
android:color="#android:color/transparent"
If you want to do it programatically:
seekBar.progressTintList = ColorStateList.valueOf(Color.TRANSPARENT)
android:background="#android:color/transparent"
This set my SeekBar in Android Studio background to transparent. Pretty straight forward.
Those icons you can find in the sdk/platforms/data/res/drawable-hdpi... such as ic_delete. How would you go about overlaying one of those icons on a .png, using drawables?
you can place different shapes in one single layer list. In this example below, your custom drawable will be drawn on top of the android drawable ic_custom.png
example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/layer_delete">
<bitmap android:src="#android:drawable/ic_delete" android:gravity="center" />
</item>
<item android:id="#+id/layer_custom">
<bitmap android:src="#drawable/ic_custom" android:gravity="center" />
</item>
</layer-list>
I am creating an app, with resources that can be reused (because buttons are always the same, but mirrored or rotated). I do want to use the same resource so I don't have to add 3 more resources that are exactly like the original but rotated. But I also don't want to mix the code with things that can be declared in the XML or make transformations with a matrix that will cost processing time.
I've got a two state button declared in an XML.
<?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/and_card_details_button_down_left_onclick" /> <!-- pressed -->
<item android:drawable="#drawable/and_card_details_button_down_left" /> <!-- default -->
</selector>
and I want to reuse the drawable because it will be the same but rotated 90º and 45º and I assign to the button as a drawable.
<Button android:id="#+id/Details_Buttons_Top_Left_Button"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/details_menu_large_button" />
I know that I can rotate it with a RotateDrawable or with a Matrix but as I already explained I don't like that approach.
Is it possible to achieve that directly on the XML or what do you think that will be the best way to do it? Put all resources but rotated, rotate them in the code?
--- EDIT ---
The answer of #dmaxi works great, this is how to combine it with an item list :)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<rotate
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:drawable="#drawable/and_card_details_button_up_onclick"/>
</item>
<item>
<rotate
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:drawable="#drawable/and_card_details_button_up_onclick"/>
</item>
</selector>
I could rotate in XML:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:drawable="#drawable/mainmenu_background">
</rotate>
The fromDegrees is important.
Basically this is a rotate animation defined in XML. With fromDegrees you define the initial rotated state. The toDegrees is the final rotated state of the drawable in the animation sequence but can be anything if you don't want to use animation.
I don't think it allocates resources for animation as it doesn't have to be loaded as animation. As a drawable it is rendered as it's initial state and should be put in the drawable resource folder.
To use it as an animation you should put it in anim resource folder and can start the animation like this (just an example):
Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotation);
rotation.setRepeatCount(Animation.INFINITE);
myView.startAnimation(rotation);
I could rotate left arrow right in XML as:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="180"
android:toDegrees="0"
android:drawable="#drawable/left">
</rotate>
Attached image for reference.
If vector based drawables are used, in conjunction with an ImageView, style, and color state list, your button can be refactored as follows:
Note: Vector drawables are significantly smaller than images, so extra, explicit definitions don't incur much overhead, and makes for clear, explicit code (although I've read that hand modifying vector assets should be avoided, I'd rather deal with the overhead of updating a couple of files than having transformations on one):
Note: Android Studio is a great source for vector assets.
res\values\styles.xml
<!--ImageView-->
<style name="Details_Buttons_Top_Left_Button">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:tint">#color/button_csl</item>
</style>
res\color\button_csl.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#color/grey_disabled"/>
<item android:state_pressed="true" android:color="#color/orange_hilite"/>
<item android:color="#color/black"/>
</selector>
details_menu_large_button.xml
<?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/and_card_details_button_down_left_onclick" /> <!-- pressed -->
<item android:drawable="#drawable/and_card_details_button_down_left" /> <!-- default -->
</selector>
Details_Buttons_Top_Left_Button
<ImageView android:id="#+id/Details_Buttons_Top_Left_Button"
style="#style/Details_Buttons_Top_Left_Button"
android:src="#drawable/details_menu_large_button" />
and_card_details_button_down_left.xml (ic_play_arrow_black_24dp.xml)
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M8,5v14l11,-7z"/>
</vector>
and_card_details_button_down_left_onclick.xml (ic_play_arrow_black_24dp.xml modified)
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group android:name="rotationGroup"
android:pivotX="12"
android:pivotY="12"
android:rotation="90" >
<path
android:fillColor="#FF000000"
android:pathData="M8,5v14l11,-7z"/>
</group>
</vector>
If you want to rotation drawable in xml file then simple add android:rotation="180" in ImageView
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dropdown"
android:rotation="180"/>
Programatically
val image = findViewById(R.id.imageview)
image.rotation = 180f