Develop Reference

How to animate a radial gradient with a zoom-in animation?

I would like to animate a gradient to show this background style:
This at minute 0:36-0:41.
Or in This article(the animation, not plain image).
Or Something like this:
I need to suit for a loading screen and for a custom dialog animation in the background.
for now the reason I Want this is to show my user a new generated password(the process in generating and creating it and than showing the result generated password).
I've searched many many websites and YouTube links to it and most of them aren't using java or just explaining how to make a radial gradient as I have in a plain screen without the animation I desire.
I have the following gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="radial"
android:gradientRadius="100%p"
android:startColor="#F1F1F1"
android:endColor="#83a6aa" />
</shape>
The colors or the width and height does not matter to me, I need this animation, I would like to know how to do it so I can do it for as many colors or situation I desire.

The closest solution I found:
Github Library
-- Layout:
<com.skyfishjy.library.RippleBackground
android:id="#+id/ripple_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:rb_color="#20000000"
app:rb_duration="3000"
app:rb_radius="22dp"
app:rb_rippleAmount="12"
app:rb_scale="22"
app:rb_type="strokeRipple"
app:rb_strokeWidth="1dp">
<!-- like any layout, insert items here like a normal layout-->
</com.skyfishjy.library.RippleBackground>
In the java class in which you use this layout:
final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
// override the methods: onStart, onResume and insert to them the next line
rippleBackground.startRippleAnimation();
// if you wish to stop the animation use:
rippleBackground.stopRippleAnimation();
note that you can start and stop the animation also with click from any type of onClickListener

how to slowly fill background color of cardview in android

I am trying to figure out how to fill background color of a card from bottom to top based on the processing of a particular task. I want the background color of card to be filled slowly from bottom to top approach based on some timer or processing. How to achieve this scenario. Please help me here.

You can easily achieve this with Clipping. This is a modified code from Android Drawable Resources.
First specify the clipping view in XML file saved at res/drawable/clip.xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/android"
android:clipOrientation="vertical"
android:gravity="bottom" />
It basically means that whatever drawable you assign to this xml, it will be clipped vertically starting from the bottom. Then in your cardview XML set this drawable as a background.
<CardView
android:id="#+id/cardview"
android:background="#drawable/clip"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
Then in your activity do something like this
CardView cardview = (CardView) findViewById(R.id.cardview);
ClipDrawable drawable = (ClipDrawable) cardview.getBackground();
drawable.setLevel(/*your level*/);
Regarding the level:
Increasing the level reduces the amount of clipping and slowly reveals
the image.The default level is 0, which is fully clipped so the image
is not visible. When the level is 10,000, the image is not clipped and
completely visible.
Hope this helps.

Android App Background: using multiple images

I have a background image that's split into three separate images:
backgroundTop.png
backgroundMiddle.png
backgroundBottom.png
How would I go about implementing a background in an Android app in which the top image is displayed at the top of the application, and the bottom image at the bottom, and the middle image is tiled in between? This would of course depend on how much content is loaded on the screen - much like in web pages.
In other words, the total number of times the middle image is tiled will depend on what is on the screen.
I've seen a solution to implement a tiling background out of a single image here: How to make android app's background image repeat
This works fine if you are using a single picture, but not with multiple images.
Links to examples below so you know what I mean:
http://rockfreaks.net/images/reviewPageTop.png
http://rockfreaks.net/images/reviewPageMiddle.png
http://rockfreaks.net/images/reviewPageBottom.png

Think you can try combining layer list drawable (it's possible to set insets for layers) with a tiled bitmap drawable that is placed as a middle layer and positioned with appropriate insets.
Something like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/page_top" />
<item
android:insetTop="#dimen/page_top_height"
android:insetBottom="#dimen/page_bottom_height"
>
<bitmap
android:src="#drawable/page_middle_tile"
android:tileMode="repeat"
/>
</item>
<item android:drawable="#drawable/page_bottom" />
</layer-list>
But it all depends on your layout indeed.

Set the background as the middle image and tile it. (like in the example you show)
Create a header view that you insert at the top of each page.
Create a footer view that you insert at the bottom of each page.
And have your content in the middle.
I've made it a flat file here, but you can easily imagine refactoring it into includes, or whatever your application needs.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FF00" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dip"
android:layout_alignParentTop="true"
android:background="#FF0000" />
<!-- Your content -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dip"
android:layout_alignParentBottom="true"
android:background="#0000FF" />
</RelativeLayout>
Red = Header
Green = Tiles (which would be inherited from your Theme)
Blue = Footer

Try something like this :
Top and bottom in two layouts with android:gravity="TOP" and "BOTTOM". These two layouts are set up with android:background="#drawable/xxx.png"
For the center, either use your solution or maybe use a ScrollView.

Android ImageView not stretching vertically in ListView row

I have been struggling with this for several days now and I ran out of ideas.
In my listview, each row can have a vertical bar flushed left with a different color depending on status. That "bar" has no other purpose than visual representation of status and is not clickable.
I implemented the vertical bar using an ImageView with background set to a drawable which has the desired color. The problem is that the vertical bar doesn't stretch, it's only 1 pixel high even though I specified fill_parent.
The row layout is like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/id1"
android:scaleType="fitXY"
android:layout_width="5dp"
android:layout_height="fill_parent"
android:background="#drawable/d1" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/id1">
...
(leaving content of the second relative layout out on purpose for simplicity)
My drawable d1 looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/c1" />
<corners android:topRightRadius="5dip" android:bottomLeftRadius="5dip" />
</shape>
So,
Why isn't the ImageView stretching vertically?
Is there a better way to implement
this than using an ImageView? (I
tried a simple View with a
background color but it doesn't show
up at all)
Any help greatly appreciated. Thanks

First off, you may as well be using a horizontal LinearLayout here instead of a RelativeLayout (since you only have two children anyways, you're not really saving any layout complexity the way you're using it).
Changing to a LinearLayout may fix this, but I suspect you may be running into a specific issue when it comes to matching heights on inflated RelativeLayouts as rows; see the comments on the answer to this SO question and this SO question.

Centering a background image in Android

I have a background image about 100 x 100 that I want to center in an Android app. Is there a way to do this?
I'm thinking it would greatly help with orientation changes for simple apps.

You can use BitmapDrawable for the case. Create centered.xml in res/drawable folder:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_image"
android:gravity="center"/>
Then you can use centered drawable as background.

Or if you want to use your mipmap image, you should use item instead of bitmap:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/app_bg_color" />
<item android:drawable="#mipmap/ic_launcher_round"
android:gravity="center"/>
</layer-list>

Question is old and answer has one big weakness - we have no possibility to change image size, it means it fully depends from drawable we have.
While using newest Android design libraries the root of activity view will be CoordinatorLayout or DrawerLayout and those layouts has no default view showing hierarchy, it means that first child view will be overshadowed by any next one, and second by third and ... to last one. So to have centered background We need to add as first child LinearLayout with centered image inside it. Some code snippet:
<android.support.v4.widget.DrawerLayout>
<!-- first child -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="60dp"
android:src="#drawable/some_background"
/>
</LinearLayout>
... next view will be above
We can fully customize size of image which will be centered by LinearLayout gravity option. Important is also to have match_parent on width and height of LinearLayout, thanks that center will be center of parent view also.
The same thing can be done in RelativeLayout or any other layout which enable child views overlapping.

With a ConstraintLayout you can set the background tag directly. To be honest it took me a few hours to work this one out but it's a lot simpler than you might think ;)