Hello I'm adding animation left to right and right to left when opening and finishing activities but when I put the overridePendingIntent it shows a black screen...
This is my left_to_right.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="500"
android:fromXDelta="-100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>
This is the right_to_left.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="500"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="100%"
android:toYDelta="0%" />
</set>
I'm starting the Activity like this :
startActivity(Intent(this, SignInActivity::class.java))
overridePendingTransition(R.anim.left_to_right, R.anim.right_to_left)
and finishing it like this :
finish()
overridePendingTransition(R.anim.right_to_left, R.anim.left_to_right)
But when doing it is showing black screen...
This is my theme
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="android:windowDisablePreview">true</item>
</style>
</resources>
And on my Activities I'm using
android:theme="#style/Theme.MaterialComponents.Light.NoActionBar"
What I'm missing?
FIRST ACTIVITY:
I rebuild the situation with a MainActivity that inflates the TargetActivity (second Activity) using a Button:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button_in = findViewById(R.id.button_in);
button_in.setOnClickListener(v -> {
Intent intent = new Intent(this, TargetActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
});
}
}
The activity_main.xml contains the first Button:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="MainActivity">
<Button
android:id="#+id/button_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="20sp"
android:backgroundTint="#2962FF"
android:text="To TargetActivity" />
</RelativeLayout>
SECOND ACTIVITY:
The second Activity is the TargetActivity that finish() with an animation like this:
public class TargetActivity extends Activity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_target);
Button button_out = findViewById(R.id.button_out);
button_out.setOnClickListener(v -> {
this.finish();
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);
});
}
}
And also another Layout with the 2nd Button called activity_target.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"
android:background="#FFAB00"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".TargetActivity">
<Button
android:id="#+id/button_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="20sp"
android:textColor="#ffffff"
android:backgroundTint="#2962FF"
android:text="To MainActivity" />
</RelativeLayout>
4 ANIMATIONS:
All you need is 4 animations in your anim folder. 2 for left to right and also vice versa.
1.) slide_in_left.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="-100%p"
android:toXDelta="0" />
</set>
2.) slide_out_left.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="0"
android:toXDelta="-100%p" />
</set>
3.) slide_in_right.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="100%p"
android:toXDelta="0" />
</set>
4.) slide_out:right.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="0"
android:toXDelta="100%p" />
</set>
Finally don't forget to add the TargetActivity in your AndroidManifest.xml:
<activity android:name=".TargetActivity"/>
Related
I have created an animation using XML for fade in and out and attached it to the fragment using the drop down in navigation drop for enter and exit but the fragments are not being animated.
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/navigation_graph"
app:startDestination="#id/mainFragment">
<fragment
android:id="#+id/mainFragment"
android:name="com.cheapapps.randomquotesmachine.MainFragment"
android:label="fragment_main"
tools:layout="#layout/fragment_main">
<action
android:id="#+id/action_mainFragment_to_quoteDetailFragment"
app:destination="#id/quoteDetailFragment"
app:enterAnim="#anim/fade_in"
app:exitAnim="#anim/fade_out" />
</fragment>
<fragment
android:id="#+id/quoteDetailFragment"
android:name="com.cheapapps.randomquotesmachine.QuoteDetailFragment"
android:label="fragment_quote_detail"
tools:layout="#layout/fragment_quote_detail">
<argument
android:name="position"
android:defaultValue="0"
app:argType="integer" />
</fragment>
</navigation>
I'm not sure how your fade_in and fade_out files look like so I'll provide you an example below:
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="500" />
And:
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0.0"
android:fillAfter="true"
android:duration="500" />
To apply this fade transition to your fragments, you should set enterAnim and exitAnim as you already did but together with popEnterAnim and popExitAnim as in the following example:
<action android:id="#+id/action_mainFragment_to_quoteDetailFragment"
app:destination="#id/quoteDetailFragment"
app:popEnterAnim="#anim/fade_in"
app:popExitAnim="#anim/fade_out"
app:enterAnim="#anim/fade_in"
app:exitAnim="#anim/fade_out"/>
So I have the following configuration:
A MenuItem with a selector drawable attached which I want to change based on user click.
However for some reason I cannot make it work because I cannot find a way to compare the icons(drawables).
My configuration is attached below:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_grid_id"
android:icon="#drawable/grid_option"
android:title="#string/layout_type"
app:showAsAction="ifRoom" />
</menu>
Selector is attached bellow:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_grid_on_32"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_grid_off_32" /> <!-- default -->
</selector>
Also the onOptionsItemSelected:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_grid_id: {
//I tried to use getContentState but does not seem to be reliable.
}
default:
return true;
}
}
I end up answering my own question. Maybe it will help others that have the same problem.
The idea is relatively simple(if you know it), and it is to use a switch or a toggle button.
Options menu looks like below:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_grid_id"
android:title="#string/layout_type"
// that was the difference
app:actionLayout="#layout/grid_option_layout"
app:showAsAction="ifRoom" />
</menu>
Now, one can use ToggleButton or Switch. I ended up using ToggleButton. Below one can se the configuration:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ToggleButton
android:id="#+id/switch_grid"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerVertical="true"
android:background="#drawable/grid_option"
android:focusable="false"
android:focusableInTouchMode="false"
android:textOff=""
android:textOn="" />
</RelativeLayout>
Now, the drawable selector looks like below(grid_option):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_grid_on_32" android:state_checked="true" />
<item android:drawable="#drawable/ic_grid_off_32" /> <!-- default -->
</selector>
Of course, ic_grid_on and off are some images.
I am trying to slide a fragment from let to right to get a sliding menu effect. But the fragment slides from bottom to up.
The ylocation is a button in center top of my activity.
newAddressFragment = new AddressFagment(AddressActivity.this,
ylocation);
AddressActivity.this
.getFragmentManager()
.beginTransaction()
.setCustomAnimations(R.anim.enter_from_left, R.anim.exit_from_bottom)
.addToBackStack(newAddressFragment.toString())
.replace(R.id.address_frame, newAddressFragment,
newAddressFragment.toString())
.commit();
enter_from_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate android:duration="5000" android:fromXDelta="-100%" android:toXDelta="0%"/>
<alpha android:duration="5000" android:fromAlpha="0.0" android:toAlpha="1.0" />
</set>
exit_to_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate android:duration="5000" android:fromXDelta="0%" android:toXDelta="-100%"/>
<alpha android:duration="5000" android:fromAlpha="1.0" android:toAlpha="0.0" />
</set>
After some workaround , the code that worked was :
getSupportFragmentManager()
.beginTransaction()
.setCustomAnimations(R.anim.enter_from_left, 0, 0,
R.anim.exit_to_left)
.add(R.id.dummy, new SliderMenuActivity())
.addToBackStack("animation").commit();
enter_from_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_mediumAnimTime">
<translate
android:fromXDelta="-100%p"
android:startOffset="25"
android:toXDelta="0" />
</set>
exit_to_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_mediumAnimTime">
<translate
android:fromXDelta="0"
android:startOffset="25"
android:toXDelta="-100%p"/>
</set>
Hope this helps !!
I'm trying to do a scale in/out animation for activity/framgent transition
here are the two animations :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:interpolator="#android:anim/accelerate_decelerate_interpolator" >
<scale
android:fromXScale="80%"
android:fromYScale="80%"
android:toXScale="80%"
android:toYScale="80%" />
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.5" />
</set>
-
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:interpolator="#android:anim/accelerate_decelerate_interpolator" >
<translate
android:fromXDelta="100%"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="0" />
</set>
Use it like that :
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_to_behind);
The problem is that the activity doesn't scale down in the center of the screen, it stick to the top/left of the screen
Any idea what wm i missing ? Or doing wrong ?
Add a pivot to your scale animation. Add this on your xml:
android:pivotX="50%"
android:pivotY="50%"
Your scale should look like:
<scale
android:fromXScale="100%"
android:fromYScale="100%"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="80%"
android:toYScale="80%" />
I want to do a multiple animations on my image (appear -> rotate -> disappear). I've got this code:
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="false" >
<alpha
android:duration="1"
android:fromAlpha="0"
android:toAlpha="100" />
</set>
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="false" >
<alpha
android:duration="1"
android:fromAlpha="100"
android:toAlpha="0" />
</set>
image_rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="false" >
<rotate
android:duration="2500"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="120" />
</set>
Also in my java code:
animRotate= AnimationUtils.loadAnimation(context, R.anim.image_rotate);
animRotate.setDuration((long) duration);
fade_in = AnimationUtils.loadAnimation(context, R.anim.fade_in);
fade_out = AnimationUtils.loadAnimation(context, R.anim.fade_out);
AnimationSet s = new AnimationSet(false);
s.addAnimation(fade_in);
s.addAnimation(animRotate);
s.addAnimation(fade_out);
image.startAnimation(s);
but unfortunately it doesn't work correctly...
you have severals errors in your animation xml files:
the duration property is in milliseconds, so 1ms is way too short for a noticeable fade in/fade out animation
the alpha property is a float between 0 et 1, 100 is way too much.
you don't need a set in your xml files if there is only one animation : just add the alpha or rotate tag as a root
So, you should have now these files:
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1" />
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromAlpha="1"
android:toAlpha="0" />
image_rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2500"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="120" />
Then, in your code, you need a add an offset between each animation. Otherwise, all the animations will be triggered at the same time. Moreover, the fillAfter flag must be set on the root animation object (here, your AnimationSet)
Animation animRotate= AnimationUtils.loadAnimation(context, R.anim.image_rotate);
Animation fade_in = AnimationUtils.loadAnimation(context, R.anim.fade_in);
Animation fade_out = AnimationUtils.loadAnimation(context, R.anim.fade_out);
AnimationSet s = new AnimationSet(false);
s.addAnimation(fade_in);
animRotate.setDuration((long) duration);
animRotate.setStartOffset(fade_in.getDuration());
s.addAnimation(animRotate);
fade_out.setStartOffset(fade_in.getDuration() + animRotate.getDuration());
s.addAnimation(fade_out);
s.setFillAfter(true);
image.startAnimation(s);