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
Related
I am developing an android application I'd like to display alphabets in a single circular area and I also need the circular area to be white and the alphabet to have primaryColor of my application,
this is my textView:
<TextView
android:id="#+id/first"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="A"
android:background="#drawable/circle" />
This is the code for circle.xml in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<stroke android:width="1dp" android:color="#color/colorPrimaryDark" />
<gradient android:startColor="#color/white" android :endColor="#color/white"
android:angle="270"
/>
</shape>
This is the code of the filled_circle :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<stroke android:width="1dp" android:color="#color/colorPrimaryLight" />
<gradient android:startColor="#color/colorPrimaryLight"
android:endColor="#color/colorPrimaryLight"
android:angle="270"
/>
</shape>
and code in the java file:
#Override
public void onClick(View v) {
}
Question
when each textarea of alphabet is clicked the white color should be fading out and the primaryColor should be fading in, with animation.
can someone help , get this done with help of animation library in android 4 and above?
I am currently trying to replace the background of textview with another resource and applying animation to it, but I am completely open to any new suggestion and new way of performing this,
I also provide my current code above but let me know if I have to make a fundamental change or modification to get it working with animation library?
I'd recommend you to do the following:
Do not try to animate everything in a single background drawable. You need to have:
<FrameLayout>
<View/> //Just a view with your white circular background
<View/> //Another view with circular background, but this one is gonna display the color
<TextView/> //Centered, your alphabet letter
</FrameLayout>
So you want to put all this inside a custom view. The white circular background view is going to stay at it is. You can use the second circular view to set your alphabet's letter color. There's plenty of easy ways to change a color from a layer in a custom drawable list-layer (for example Programmatically change color of shape in layer list).
When you first inflate your custom view, you want to set the visibility of the colored circular view to invisible. The white circular view is going to stay visible. The TextView always on top.
Override the onClick method making your custom view to implement the View.OnClickListener and you should place there the code to run the animation. The only thing that you need to do is do an alpha animation of the colored circle view, and in the onAnimationEnd() hook you should set the visibility of the view to visible. You are going to need a boolean variable in your custom view to keep track of whether the colored circle is being shown or not. That way if the colored circle view is being displayed and the user clicks it, you can do the reverse animation to show only the white circle view.
Remember to do all this in a custom view to keep it nice and clean. Also remember to add a couple of custom attributes, so you can set the color of the colored circle view just from the xml.
I hope that this gives you an idea about how to implement it, IDK really have time for an example, but let me know if you get stuck somewhere or if you didn't get something of what I said.
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.
I have implemented slide out navigation using this.
The content should drop shadow near menu list's right edge; like
I'm trying to add shadow by adding a view to content left edge, but it wont show up.
Any clue on how to do this will be appreciated.
Guys I know I am late to the party but i had a hard time finding an answer to this issue that was satisfactory to me so i just wanted to share my solution to this. Fist, create a drawable navbar_shadow.xml and put it with the rest of your drawables. All it is, is a rectangle with a transparent gradient.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#111"
android:endColor="#00000000">
</gradient>
<size
android:height="#dimen/activity_vertical_margin"
android:width="5dp">
</size>
</shape>
Then, wherever you are instantiating your drawer, use your DrawerLayout variable to attach it to your drawer.
mDrawerLayout.setDrawerShadow(R.drawable.navbar_shadow, Gravity.LEFT);
Bam. No need to draw line by line or include any extra resources. You can use your own startColor to match your drawer color, but endColor should remain #00000000 as it is a transparent black.
I know this post is quite old but I had trouble finding a solution so I thought it might help somebody if I posted mine here.
I wanted to add a fade to black on the right had side of this simple ListView.
<ListView
android:id="#+id/sideMenuList"
android:layout_width="300dp"
android:layout_height="match_parent"/>
Created a PNG file with a gradient using GIMP. Add it to /res/drawable. Mine was named fade_from_right.png
Surrounded the ListView with a RelativeLayout. Give the RelativeLayout the background color you want your ListView to have.
Add another View to the right of your ListView. Set the new views background to be your 'fade_from_right.png'
Thats it.
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="300dp"
android:background="#color/solarized_base02">
<ListView
android:id="#+id/sideMenuList"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View
android:layout_alignRight="#id/sideMenuList"
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#drawable/fade_from_right"/>
</RelativeLayout>
what is the need to add another view with the listview, it will not be perfect i think.. You may try like this right?
sm = getSlidingMenu();
sm.setShadowDrawable(R.drawable.shadowbar);
since we may set some behindView width and offset. this option will give a good look i think.
I have a shape defined as a drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#0075b5"/>
<size android:height="2dp"/>
</shape>
and I use this shape in an ImageView as source:
<ImageView android:layout_height="2dp"
android:layout_width="fill_parent"
android:src="#drawable/shape_blue_line"
android:id="#+id/ptt_blueLineImageView"/>
The problem appears when I want to toggle my ImageView:
private void toggleAnimatedLogo() {
if (viewFlipper.getDisplayedChild() == 2) {
animatedLogo.setAlpha(ALHPA_TRANSPARENT);
blueLine.setAlpha(ALHPA_TRANSPARENT);
} else {
animatedLogo.setAlpha(ALHPA_VISIBLE);
blueLine.setAlpha(ALHPA_VISIBLE);
}
}
The result is that on first execution of this method both ImageViews disappears but only the animated one appears on the second. The line since disappearing don't want to show at all. I would like to have a working toggle method.
This might be better accomplished with View.setVisibility(), use View.INVISIBLE if you still want the ImageView layed-out or View.Gone if you want it to ignore layout.
So it was really weird behaviour of ImageView. After I made some layout changes in the layout file, which were for sure unrelated (I've checked) to this issue the code started to work. Anyone knows why this happened?
Anyway, I've discovered this after pasting this code above my blueLine in layout xml. The previous line started to work then. After cutting it up again it still works.
<View android:layout_height="2dp"
android:layout_width="fill_parent"
android:id="#+id/ptt_blueLineView"
android:background="#0075b5"/>
Eventually, I decided to stay with this new version of line, abandoning shapes...
Hi
in my app contain a Button ,currently i customized using xml for changing the background and it work fine in 2.1 but when am reach to 2.2 ,The button is hard to hit ,how can i solve the issue?
my button xml code given below
<Button
android:id ="#+id/Button_Continue1"
android:background="#drawable/continue_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
/>
If your button is small and hard to hit use an Inset Drawable. You set the drawable you want to have displayed and the inset on the left, top, right and bottom. The inset is like some kind of margin but clickable.
Here is an example.
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/your_drawable"
android:insetTop="10dp"
android:insetRight="10dp"
android:insetBottom="10dp"
android:insetLeft="10dp"/>
That will make your button to be 10dp taller on every side for touch events. The look of your button will not change.
Now in your layout you don't set your original drawable as the Button's background anymore but the new Inset Drawable.