Build an iOS like Transition on an Activity Change - java

So, I'm trying to build a transition between two Activities in my Android App, that looks similar to the transitions in iOS Apps. And my "Going in Transition" works perfectly fine, the way I want it to work, the new layout slides over the old one, while the old one moves just a bit to the left. But now I'm stuck with the reverse transition, going back to my first layout, cause I want it to look exactly like the first transition, but just reversed, which I'm not able to achieve, cause Android automatically layers the moving in transition on top of the moving out transition, as you can see in the attached gif.
So I would have two ideas, to work around that problem. Is there either a possibility to change the layers of the transition? If not, it would be also possible to animate a moving mask ok my moving in transition. But for neither of these possibilities, I know how to implement them.
My current code:
I just call the animations on the OnCreate of my two activities:
OnCreate of my Main Menu:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
overridePendingTransition(R.anim.slide_in_left,R.anim.slide_out_left);
setContentView(R.layout.activity_main);
}
On Create of my Settings:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
overridePendingTransition(R.anim.slide_in_right,R.anim.slide_out_right);
setContentView(R.layout.activity_settings);
}
And my xml files:
slide_in_left.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="-30%p"
android:toXDelta="0"
android:duration="#android:integer/config_longAnimTime" />
slide-out-left.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="#android:integer/config_longAnimTime" />
slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="#android:integer/config_longAnimTime" />
slide_out_right.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="-30%p"
android:duration="#android:integer/config_longAnimTime" />

In your MainActivity
private boolean isReverseAnimation = false;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
isReverseAnimation = false;
overridePendingTransition(R.anim.anim_slide_in_left,R.anim.anim_slide_out_left);
//your other code
}
#Override
protected void onStart() {
super.onStart();
if (isReverseAnimation) {
this.overridePendingTransition(R.anim.anim_slide_in_right,
R.anim.anim_slide_out_right);
}else{
isReverseAnimation = true;
}
}
And Setting activity as it is.
Try and let me know if have any issue.
Happy Coding :)

Related

Android Studio - Animations between activities

I'm doing a "University Chat App". The first activity of the app is just the logo and the second activity is the sign in. I want to add a small fade from the first activity to the second activity.
This is the code for the fade in:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.5"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="9000" />
</set>e
This is the code for the fade out:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0"
android:toAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:fillAfter="true"
android:duration="1000" />
</set>
MainActivity code:
public class MainActivity extends AppCompatActivity {
private static int WELCOME_TIMEOUT = 1500; // Sets time of the transition
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide(); // Hide Action Bar
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); // Hide the Status Bar
setContentView(R.layout.activity_main);
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
Intent welcome = new Intent(MainActivity.this, MainActivity2.class);
startActivity(welcome);
overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
finish();
}
}, WELCOME_TIMEOUT);
}
}
Everything works fine, but the fade out is quite slow and it creates this transparent gray screen before changing to the second activity. I'm assuming the gray screen comes from this line of the fade out android:toAlpha="0.0"
Is there a way to create a better fade between activities, without the transparent gray screen? Also, can different animations be done in between activities?

How Can I make a windows to pop up from the bottom of the screen?

I have a Map, with markers on the Gas Stations around my location. When I click on them, I want a window to raise from the bottom of the screen (and go only half through the Map Screen) where I want to display info about that gas station. How do I do this window coming from the bottom of the screen? Animation?
Declarations :
Animation slideup, slidedown;
LinearLayout bottomLay;
Initializations:
slideup = AnimationUtils.loadAnimation(this, R.anim.slide_up);
slidedown = AnimationUtils.loadAnimation(this, R.anim.slide_down);
bottomLay = findViewById(R.id.bottomLay); //your bottom view
start the animation :
public void startSlideDown() {
bottomLay.startAnimation(slidedown); // down
}
or
public void startSlideUp() {
bottomLay.startAnimation(slideup); // up
}
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromYDelta="0"
android:toYDelta="100%p" />
</set>
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_mediumAnimTime"
android:fromYDelta="100%p"
android:toYDelta="0%p" />

Transition animation within the same activity after button press

I have an activity in which after I press a Button I change the visibility of Group A from visible to gone, and the visibility of Group B from gone to visible.
I would like to simulate the same default animation you get when you go from one activity to another after pressing my button (while I remain in the same activity).
I have been looking online, but I have only been able to find examples of overridePendingTransition, which doesn't apply to my situation.
Try this
final LinearLayout layout = (LinearLayout)findViewById(R.id.groupA);
button.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View arg0) {
Animation slideUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slideup);
Animation slideDown = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slidedown);
if(layout.getVisibility()==View.INVISIBLE){
layout.startAnimation(slideUp);
layout.setVisibility(View.VISIBLE);
}
});
slideup.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0"
android:fromYDelta="500"
android:duration="500"/>
</set>
slidedown.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0"
android:fromYDelta="0"
android:toYDelta="500"
android:duration="500"/>
</set>

Android animation not working on isShown method

i have a animation not working which should be triggered on a button click, the click checks if the image is shown and runs a animation if so, then in the else runs a different animation. problem is only the animation in the else statement is working. the if statement is still carried out if conditions are metm tested with logcat, the animation just does not happen. any help appreciated.
following being called on a click event
if (smsArea.isShown()) {
Animation backDoww = AnimationUtils.loadAnimation(getContext(),
R.anim.slide_out_right);
smsArea.startAnimation(slide_out_right);
smsArea.setVisibility(View.GONE);
}else{
Animation slide_in_right= AnimationUtils.loadAnimation(getContext(),
R.anim.slide_in_right);
smsArea.startAnimation(slide_in_right);
smsArea.setVisibility(View.VISIBLE);
}
The animation in my else statement is the only one that works, the first animation that should be triggered with the if(smsArea.isShown()) never occurs.
i'm setting the smsArea to Gone initially, i'm doing this in the onCreate not in the xml, its left as its default viable in xml. i know the error is not in my animation file as even if i use the xml file in the else which i know works the animation does not happen.
XML
<LinearLayout
android:id="#+id/smsArea"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="12dp"> ..... </LinearLayout>
Animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate android:duration="300" android:fromXDelta="0%" android:toXDelta="100%"/>
<alpha android:duration="300" android:fromAlpha="1.0" android:toAlpha="0.0" />
Add animation listener:
backDoww.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
smsArea.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
in onAnimationEnd hide your view.

layer-list and ClipDrawable

I have a problem with a simple piece, and I can't understand what is going wrong. What is the problem here? It should be simple.
I'm trying to do a 2-layer layer-list with one layer as a clip. Here is clip_source.xml which I made by instructions:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img_spare"/>
<item android:id="#+id/clip">
<clip
android:clipOrientation="horizontal"
android:drawable="#drawable/img_filled"
android:gravity="left" />
</item>
</layer-list>
The Activity is simple :
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView img = (ImageView) findViewById(R.id.imageView1);
LayerDrawable ld= (LayerDrawable) getResources().getDrawable(R.drawable.clip_source);
ClipDrawable cd=(ClipDrawable) ld.findDrawableByLayerId(R.id.clip);
cd.setLevel(4000);
//((ClipDrawable) ld.findDrawableByLayerId(R.id.clip)).setLevel(4000);
img.setImageDrawable(ld);
}
}
cd.setLevel(4000) (or if I try getLevel()) crashes everything with an unknown Exception. Is there a simple way to fix this?

Categories