Animate two Views together in Android - android

In my layout I have one button and an AddView on the top of the screen (Image below explain it better). I need the AddView to show only when it is loaded and for that I made an AdListener. But now I want my button to slide down when the AddView is shown. ¿How do I do that? Thank you in advance.
Here is my AdListener
adView.setAdListener(new AdListener() {
#Override
public void onAdLoaded(){
adView.bringToFront();
adView.startAnimation(slide_from_top);
}
});
Here is my XML animation slide_from_top:
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="-100%p"
android:toYDelta="0%p"
android:duration="1000"/>
EDIT
Here is my Layouts XML:
<?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">
<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adUnitId="MY_AD_UNIT_ID"
ads:adSize="BANNER"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/MY_BUTTON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="MY_BUTTON" />
</RelativeLayout>

You can control what happens when an animation starts/repeats/ends. So you can start the AdView animation then in the onAnimationEnd you can have the button go to View.GONE
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation arg0) {
}
});
Edit: Just saw that you want the button to slide down rather but still be in view. You can achieve it the same way. Just have button's animation start.

Related

ActionBar button to right of Home

I need to place a button (home) to the right of the back arrow on my action bar. Requirement is that the left arrow (typically the home button) be captured and perform an onBackPressed which I have working. Now how do I add a button to the right of the left arrow so that when I tap it I can capture it on the onOptionsItemSelected and have it perform the Home function. I tried to create a relative layout with a single image view in it as a test, and then after infating the view setting it with actionBar.setCustomView(v); however it does appear to show up.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal">
<ImageButton
android:id="#+id/bookmark_home_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/common_google_signin_btn_icon_dark" />
</RelativeLayout>
So ended up creating a custom actionbar as follows:
<?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="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/bookmark_actionbar_left_btn"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#null"
android:src="#drawable/navigation_back" />
<ImageButton
android:id="#+id/bookmark_actionbar_logo_btn"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#null"
android:paddingLeft="20dp"
android:src="#drawable/app_launcher" />
</LinearLayout>
and then in the onCreate
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.bookmark_actionbar);
ImageButton goBackBtn = (ImageButton) findViewById(R.id.bookmark_actionbar_left_btn);
goBackBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onBackPressed();
}
});
ImageButton goHomeBtn = (ImageButton) findViewById(R.id.bookmark_actionbar_subrosa_btn);
goHomeBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
NavUtils.navigateUpFromSameTask(BookmarkList.this);
}
});
So I ended up using a Custom ActionBar - See Update Above

Scale parentLayout without scaling its childView

I am scaling and translating my parent layout, but the problem is my child view is also scaling and but not translating according to its parent(I want my child view to be at the center of the screen, no matter where my parent layout is translating).
Below is my code
public class Splash extends AppCompatActivity {
Animation zoomIn,zoomOut;
ImageView icon;
LinearLayout relativeLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
zoomIn = AnimationUtils.loadAnimation(this,R.anim.zoom_in);
zoomOut = AnimationUtils.loadAnimation(this,R.anim.zoom_out);
relativeLayout = (LinearLayout) findViewById(R.id.activity_splash);
relativeLayout.setBackgroundResource(R.drawable.utt);
icon = (ImageView) findViewById(R.id.icon);
relativeLayout.setAnimation(zoomIn);
relativeLayout.setAnimation(zoomOut);
LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.height= 75;
layoutParams.width = 75;
layoutParams.gravity= Gravity.CENTER;
icon.setLayoutParams(layoutParams);
zoomIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
relativeLayout.startAnimation(zoomOut);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
zoomOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
icon.setAlpha(1.0f);
icon.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(),R.anim.translate_top_center));
}
#Override
public void onAnimationEnd(Animation animation) {
relativeLayout.startAnimation(zoomIn);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
It's Activity
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="store.shopnix.com.kenburns.Splash">
<ImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:alpha="0.0"
android:src="#drawable/icon"/>
anim.xml
zoom_in
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="20000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5"
android:repeatMode = "reverse"
android:translationX="100dp"
android:translationY = "100dp">
</scale>
zoom_out
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="20000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="70%"
android:pivotY="20%"
android:toXScale="1.5"
android:toYScale="1.5"
android:repeatCount="1"
android:repeatMode = "reverse"
android:translationX="20dp"
android:translationY = "20dp">
</scale>
Create two separate layouts, one that scales and other that doesn't.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout_to_scale">
<!--put stuff that scales here-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout_to_stay">
<!--put static stuff here-->
</LinearLayout>
</FrameLayout>
Now in your activity animate only layout with id = R.id.layout_to_scale
Instead of LinearLayout you can use RelativeLayout and place the childView inside it .
now you add property android:layout_centerInParent="true" for childView
now you can scale the RelativeLayout without scaling the childView it will definitely stay in centre of parentView(RelativeLayout).
Hope this solves your problem.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="store.shopnix.com.kenburns.Splash">
<ImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_centerInParent="true"
android:alpha="0.0"
android:src="#drawable/icon" />

Animate LinearLayout when keyboard goes up/down

I have a layout like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="25dp"
android:paddingRight="25dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/logo" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView ... />
<EditText ... />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView ... />
<EditText ... />
</LinearLayout>
</LinearLayout>
<Button ... />
</LinearLayout>
I want to fade out the ImageView and move the second (inner) LinearLayout up (near the top of the screen) when the keyboard comes up and then do the opposite when the keyboard goes back down.
How can I achieve this?
Use TranslateAnimation class to animate your view.
Animation slide = new TranslateAnimation(fromX,toX,fromY,toY);
slide.setDuration(300);//here you can set your own duration of animation in ms.
yourView.startAnimation(slide);
You can also override some callbacks.
slide.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
There is no direct way of finding out whether android softkey pad is opne or not . But you can do a work around and calculate the size diff between your activity's view root and the window size. There are many ways to do it, one way that i found was this:
final View activityRootView = findViewById(R.id.activityRoot);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int heightDiff = activityRootView.getRootView().getHeight() - activityRootView.getHeight();
if (heightDiff > 100) { // if more than 100 pixels, its probably a keyboard...
... do something here
}
}
});

Changing Text of EditText With a Little Animation in Android

I am making a simple calculator application for android. I've already made the code and everything works fine. However, I want to improve the design of its user interface by adding a little animation for the changing of text. So it's like this for example:
I will enter input via the buttons to the edittext, say for example, "2+3".
When I will press the enter button, "2+3" moves up and disappears then "5", from below, replaces the original position of "2+3".
How can I do this?
This should answer your question now that I understand it a little better. You just need a couple of animation files, one to slide the text out, and one to slide it in. You can adjust the animations however you would like:
Here is your click listener for the equals button:
Button btnEquals = (Button)findViewById(R.id.btnEquals);
btnEquals.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation slideOutBottom = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.out_bottom);
slideOutBottom.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
// Update the text here
Animation slideInTop = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.in_top);
llContainer.startAnimation(slideInTop);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
llContainer.startAnimation(slideOutBottom);
}
});
}
And here are the out_bottom.xml and in_top.xml files (respectively) that go in your anim folder:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%" android:toYDelta="100%" android:duration="600"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%" android:toYDelta="0%" android:duration="600"/>
</set>
And here is how I wrapped the layouts. Kind of quick and dirty, but it works:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:background="#fff">
<LinearLayout
android:id="#+id/llContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<EditText
android:id="#+id/edtInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:padding="5dp"
android:background="#null"/>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btnEquals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="/>
</LinearLayout>

how to add animated light around image border?

this is my code for animated image is work fine but i want to add green illuminated lighting border around image how i do this? like this image http://imgur.com/qg0JM0q ?
for fade in fade out on image rounded border???
public class MainActivity extends Activity {
Button btnAnimation, btnAnimation1, btnAnimation2;
Animation performAnimation, performAnimation1, performAnimation2;
ImageView androidImageView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
performAnimation1 = AnimationUtils.loadAnimation(this, R.layout.animation1);
performAnimation1.setRepeatCount(4);
androidImageView = (ImageView)findViewById(R.id.androidImageView);
btnAnimation1 = (Button)findViewById(R.id.btn_animation1);
btnAnimation1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
androidImageView.startAnimation(performAnimation1);
}
});
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/androidImageView"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="192dp"
android:adjustViewBounds="false"
android:src="#drawable/alertlogo" />
<Button
android:id="#+id/btn_animation1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/androidImageView"
android:layout_below="#+id/btn_animation"
android:text="perform animation 2" />
</RelativeLayout>
<!------------ animation1.xml---->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="8000" />
</set>

Categories

Resources