How to make roll animation effect for popup window in android - android

I am developing android application and i am trying to apply some roll effect from top of screen for popup window but don't know how to achieve but currently i am adding some other animation effect
this is my popup window function code
private void loadingPopup() {
LayoutInflater inflater = getActivity().getLayoutInflater();
final View layout = inflater.inflate(R.layout.profile_popup, null);
final PopupWindow windows = new PopupWindow(layout , 450,650,true);
windows.setFocusable(false);
windows.setTouchable(true);
windows.setOutsideTouchable(true);
windows.setAnimationStyle(R.style.AnimationPopup);
layout.post(new Runnable() {
public void run() {
windows.showAtLocation(layout, Gravity.TOP, 0, 0);
}
});
name = (TextView)layout.findViewById(R.id.name);
profilepicture =(ImageView)layout.findViewById(R.id.profileimage);
String sname = profilelistdb.get(0).get("pname");
name.setText(sname);
String imagename = profilelistdb.get(0).get("pimage");
String totalurl = imageurl+imagename;
imageLoader1.DisplayImage(totalurl, profilepicture);
btnClosePopup = (Button) layout.findViewById(R.id.btn_close_popup);
btnClosePopup.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
windows.dismiss();
}
});
}
This is Style.xml
<style name="AnimationPopup">
<item name="#android:windowEnterAnimation">#anim/appear</item>
</style>
appear.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="50%p" android:toYDelta="0%p"
android:duration="#android:integer/config_longAnimTime"/>
</set>
My Requirement:-
My Popup window should come from top with roll kind of thing and whenever user click close button it should hide popup with reverse roll effect could you please help me how to achieve this.
If you don't understand about what i am trying to say about roll
just check this link and see 30 seconds
https://www.youtube.com/watch?v=KSHVSswMUng this is what exactly i need.

You could use this library. It's for View Animations in android, and works very well. And then use this:
YoYo.with(Techniques.RollIn)
.duration(700)
.playOn(findViewById(R.id.edit_area));
YoYo.with(Techniques.RollOut)
.duration(700)
.playOn(findViewById(R.id.edit_area));
Or experiment with it yourself, to see what looks the best.
Edit: Not sure how to achieve that particular roll-effect that you have in mind now that I see a video of it, but if you can't find it, I'm sure you'll find something in this library that will look good. Good luck.

Related

Detect a click on an animated button

i'm making a program on android : the user has to push on an animated button to make the button invisible and increase score. But, while testing, the animated button is disabled during animation : the animation is perfectly done but we can't use animated button during animation. I've searched answers but i haven't found.
MainActivity :
Public int score = 0;
Public Button button1 = (Button) findViewById(R.id.button1);
Public Animation anim1 = AnimationUtils.loadAnimation(this, R.anim.translate_up);
button1.startAnimation(anim1);
button1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
score++;
button1.setVisibility(View.INVISIBLE);
}});
Translate_up, XML animation :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:shareInterpolator="false">
<translate
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="#android:anim/decelerate_interpolator"
android:startOffset="0"
android:toXDelta="0"
android:toYDelta="-900"
/>
Sorry for my bad English, i hope you understand me.
Thanks !
The button itself is actually working on it's original position. So although it looks like your button is sliding to the top, you can still click on the empty space in it's original position and trigger the onClick event.
I am afraid an animation won't work here. If it is a game then you should create a gameloop and update the position of your views (e.g. your button) in the gameloop method.

Add Up-Navigation Properties in Custom ActionBar Button in Android

I want to create my own ActionBar Layout.
Like this (created in Paint for example)
Is it possible to give the second Button the Up-Navigation Properties? So if I press it, it finish this Activity and starts it's parent.
I want to have the burger Icon for the Navigation Drawer, the Up-Icon for Up-Navigation and the Title of the Activity.
Is it possible? Or is there a solution already?
Actually, it's fairly easy(though it's little hacky) to do.
First, create a drawable for back button(preferably - as a selector, to distinguish pressed/normal state:
<?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/back_button_pressed"/>
<item android:drawable="#drawable/back_button"/>
</selector>
Next, set this drawable to the logo of the toolbar toolbar.setLogo(R.drawable.back_button_selector);
Then the only thing left is to set click-listener.
View logoView = getToolbarLogoIcon(toolbar);
logoView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
...
private View getToolbarLogoIcon(Toolbar toolbar){
//check if contentDescription previously was set
boolean hadContentDescription = android.text.TextUtils.isEmpty(toolbar.getLogoDescription());
String contentDescription = String.valueOf(!hadContentDescription ? toolbar.getLogoDescription() : "logoContentDescription");
toolbar.setLogoDescription(contentDescription);
ArrayList<View> potentialViews = new ArrayList<>();
//find the view based on it's content description, set programatically or with android:contentDescription
toolbar.findViewsWithText(potentialViews,contentDescription, View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
//Nav icon is always instantiated at this point because calling setLogoDescription ensures its existence
View logoIcon = null;
if (potentialViews.size() > 0) {
logoIcon = potentialViews.get(0);
}
//Clear content description if not previously present
if (hadContentDescription) {
toolbar.setLogoDescription(null);
}
return logoIcon;
}
(Thanks Nicola's post here). Or if you are not scared of reflection, it can be easily done like this:
try {
Field declaredField = toolbar.getClass().getDeclaredField("mLogoView");
declaredField.setAccessible(true);
View logoView = (View) declaredField.get(toolbar);
logoView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
} catch (Exception ex) {
//error
}
Another possible solution would be to set custom layout to the ActionBar.
Though, I'm advocating to follow the UI/UX guidelines and double-check, if navigation drawer is essential in the secondary activity.

Glow button on and off

I have two images which I want to fade between causing a glowing on and off effect. This should run all the time like an animation, not just when the button is pressed.
Here are the two images:
This was working well before but after some hardware/android OS updates my animation is really jumpy. Here is the Animation XML I was using:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bottom_bar_add_dark"/>
<item android:drawable="#drawable/bottom_bar_add" android:duration="500" />
</animation-list>
I have looked high and low and cannot find an answer to this.
Edit
Here is the code that creates the image view and sets all its resources:
public ImageView findDevicesButton(){
bottomButton = new ImageView(this);
int id = bottomButton.generateViewId();
bottomButton.setId(id);
if(currentapiVersion >= 11){
bottomButton.setImageResource(R.drawable.animationxmladddevice);
//Background image
bottomButton.setBackgroundResource(R.drawable.bottom_bar);
saveButtonAnimation = (AnimationDrawable)bottomButton.getDrawable();
saveButtonAnimation.setEnterFadeDuration(1000);
saveButtonAnimation.setExitFadeDuration(1000);
bottomButton.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
findDevicesAlertBuilder();
}
});
}else{
bottomButton.setImageResource(R.drawable.bottom_bar_add);
bottomButton.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
bottomButton.setBackgroundResource(R.drawable.bottom_bar);
bottomButton.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
findDevicesAlertBuilder();
}
});
}
return bottomButton;
}
This is the back background image:
All together it should look like this with the center button glowing:

Android Dialog like WeChat

Has anyone know how to create a dialogbox like the picture showing above?
Rounded corner.
Transparent background.
No title, buttons, border.
Fade-in -- delay for 5 seconds -- fade out.
*I have seen toast, popup window, dialog, alert dialog, which of these best suit the above? :)
It would be nice if some code snippet could be provided, I'm fairly new to android :)
For custom dialog check http://www.c-sharpcorner.com/UploadFile/2fd686/androd-dialogs/
private void createCustomDialog(){
//Create a dialog object
final Dialog dialog = new Dialog(MainActivity.this);
//Set its layout
dialog.setContentView(R.layout.custom_dialog_layout);
//Set the title
dialog.setTitle("This is custom layout");
//Make it cancelable
dialog.setCancelable(true);
//We need to dismiss the dialog so we add a listener to the ok button
dialog.findViewById(R.id.okButton).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
dialog.dismiss();
}
});
dialog.show();
}
}
For the dark alpha background you can create a drawable. Below code will give you a semi transparent background with round corners.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#AA000000"
android:endColor="#AA000000"
android:angle="-90"
android:type="linear"
/>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
For the auto hide part you can use
Animation anim = new AlphaAnimation(1,0);
anim.setDuration(300);
anim.setStartOffset(5000);
anim.setInterpolator(new LinearInterpolator());
anim.setFillAfter(false);
myView.startAnimation(anim);
It is not a problem at all. Just create 9nth patch drawable with delays and fading and put it as bg for the dialog.
Try this
Create XML with with your desired Content and then set transparent image to that
I am providing you image, use this
and the
Declare field of type PopupWindow.
PopupWindow popup;
inflate your layout here
View v = inflatter.inflate(R.layout.yourlayout, null);
set your layout to the popup window
v1.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
int height1 = v1.getMeasuredHeight();
popup= new PopupWindow(v, (int) (width * 0.8), height1, true);
popup.showAtLocation(mainlayout, Gravity.CENTER, 0, 0);
mainlayout is your activity view group
this is the piece of code that I have used in my app.
Example I have used something like this in my app
Custom Toast would do everything for you, just prepare your xml and set it to Toast, here is a sample:
public class CustomToast {
public CustomToast(Context ctx, CharSequence text) {
LayoutInflater inflater = LayoutInflater.from(ctx);
View layout = inflater.inflate(R.layout.toast_layout, null);
TextView txt = (TextView) layout.findViewById(R.id.toastText);
txt.setText(text);
Toast myToast = new Toast(ctx.getApplicationContext());
myToast.setGravity(Gravity.CENTER_VERTICAL, 0, 100);
myToast.setDuration(Toast.LENGTH_SHORT);
myToast.setView(layout);
myToast.show();
}
}

Animating a TextView each time it is changed

I have a button which basically changes the TextView every time it is clicked. Is it possible to associate an animation with this? I have looked at things such as a 3D flip but they seem a little too advanced for me. Any simpler suggestions?
final Button button1 = (Button) findViewById(R.id.button1);
final TextView textView = (TextView) findViewById(R.id.text_random_text);
button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
textView.setText(getNextRandomCuisine());
}
});
I suggest you to take a look at the Android webPage. http://developer.android.com/reference/android/view/animation/AnimationUtils.html
the class AnimationUtils helps you to load and Animation Pattern from your xml folder, you can for example make a "fadein" animation, you should dafür create an xml datei, name it for example "fadein.xml" it should be like this
<?xml version="1.0" encoding="utf-8"?>
<alpha
android:duration="200"
android:fromAlpha="0.0"
android:toAlpha="1.0" >
</alpha>
with this you are just telling your android device, that this animation should variates the alpha value (also the transparence) of your view, from 0 to 1, making your view visible, the "duration" parameter is just how any milliseconds will take to execute this animation.

Categories

Resources