I'd like to animate in a new fragment from the bottom up, over top of the previous fragment.
Unfortunately, my current implementation pushes the previous fragment up, as the new fragment is animating in, like this:
https://i.imgur.com/IgMUamp.png
What I would like it to do is have the new fragment animate over top the previous fragment, like so:
https://i.imgur.com/DTrEfcm.png
Here is what my code looks like now:
private void pushFragment(String fragmentTag, Fragment fragment) {
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.setCustomAnimations(R.anim.anim_in_test, R.anim.anim_out_test);
fragmentTransaction.replace(
R.id.fragment_container,
fragment,
fragmentTag);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commitAllowingStateLoss();
}
Here is anim_in_test.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_longAnimTime"
android:fromYDelta="100%p"
android:toYDelta="0" />
</set>
And here is anim_out_test.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_longAnimTime"
android:fromYDelta="0%p"
android:toYDelta="-100%p"
/>
</set>
What do I need to change to get this working right?
setCustomAnimations(int enter, int exit)
Exit animation should be empty (because you need old fragment stay on screen while new one appears), but if you pass 0 to second param view dissapear without animation. Thats why I add empty alpha animation which changes alpha from 1 to 1.
fragmentTransaction.setCustomAnimations(R.anim.anim_in_test, R.anim.anim_out_test);
anim_out_test.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="#android:integer/config_longAnimTime"
android:fromAlpha="1"
android:toAlpha="1" />
</set>
But at that point it doesnt' work because android draw and animate new fragment BELOW old fragment. You can see it if you make fragment backgrounds transparent.
To resolve this issue I use setZ(z), setElevation(z) or setTranslationZ(z) methods on root view of fragment. It looks like all of them are working. Z value of new fragment should be more than old fragment Z.
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.view, container, false);
view.setZ(value);
Here is result:
It works but I dont know side effects of this solution. On android 4 I think it can be done via custom ViewGroup as fragment container, which draws children in reverse order.
Related
I have an activity LoginActivity and a fragment GoogleSignInFragment. The login logic for the app works perfectly okay but the only thing bugging me is the fact that the GoogleSignInFragment didn't show up in the XML preview for activity_login.xml. Without it showing up, it'll be very difficult for me to move my code to Fragments, since I can't style the activity as well anymore
Here's all the relevant code...
LoginActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.sign_in_google, new GoogleSignInFragment())
.commit();
}
activity_login.xml
<FrameLayout
android:id="#+id/sign_in_google"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_sign_in_google_button"/>
GoogleSignInFragment.java
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View v = inflater.inflate(R.layout.fragment_google_sign_in_button, container, false);
return v;
}
fragment_google_sign_in_button.xml
<?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="wrap_content"
android:layout_marginTop="16dp"
tools:context=".GoogleSignInFragment">
<com.google.android.gms.common.SignInButton
android:id="#+id/sign_in_google_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
</FrameLayout>
Sometimes Android Studio fails to load preview so you can try Invalidate Cache / Restart option in File option.
For this, Go to File > Click on Invalidate Cache / Restart
https://developer.android.com/studio/write/tool-attributes#toolslayout
Says it's meant for intended for: <fragment> but you are using a FrameLayout
I think they're no problem with your code ad your fragment activity_login.xml does not contain anything and fragment_google_sign_in_button.xml contains com.google.android.gms.common.SignInButton is used with help of an external library so sometimes preview not shows.
I have a generic FadeOut animation that is used on a lot of other things. I took out a button and switched it to a new button leaving the onClick the same. The only difference is position and src:Image. What I mean by not working is that it just goes to view gone and doesn't fadeout. it worked as intended with the other button but not this one
MainActivity
public void onPreferenceClose(View view){
FadeOut = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_out);
FadeIn = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_in);
if(preferences.getVisibility() == View.VISIBLE){
preferences.startAnimation(FadeOut);
preferences.setVisibility(View.GONE);
preferences.clearAnimation();
w_Toolbar.startAnimation(FadeIn);
w_Toolbar.setVisibility(View.VISIBLE);
p_Web.setClickable(false);
}
}
xml
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:fillBefore="true"
android:fillAfter="true"
android:duration="350">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
/>
your Fadeout animation is working but as you are setting the visibility (preferences) to gone it doesnt show animation ..because it makes it Gone first.. dont use setVisibility to Gone it isnt required for fadeout anim.. it will automatically do that for you ...or you can use listeners for your animation and at the end of animation make the view Gone
`
<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
`
use this code for anim..
done forget to use android:fillAfter="true" > in set ...
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
remove this line.
preferences.clearAnimation();
your animation started and was cleared, that's why you cant see it
How can I do this animation in my activity?
when you click a button in the layout, it will slide like this(can't post too many links and picture yet
I already tried doing tabbed but its not the one i'm looking for.
its my first time doing, I only know how to have slide animation between activity
Thanks in Advance
EDIT*
I want to know how to get this effect
http://i.stack.imgur.com/nJtFw.jpg
You can use a fragment for the central layout and then use Fragment animations like this
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right);
DetailsFragment newFragment = DetailsFragment.newInstance();
ft.replace(R.id.details_fragment_container, newFragment, "detailFragment");
ft.commit();
Where the xml file for animation could look like.
<?xml version="1.0" encoding="utf-8"?>
<set>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="-1280"
android:valueTo="0"
android:duration="500"/>
</set>
There are many other animations you can apply, you can find more resources here
I have a main.xml layout file and in my Java code, I am doing some calculation taken from the main layout and wanting to display in result.xml layout file. I know I can use the anim folder to hold the animation to slidei n the result layout like the following:
left to right:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="700"/>
</set>
right to left:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="700" />
</set>
I was wondering how to implement the above so when the button is clicked on the main layout file, the result layout file slides in from the right. And also if I wanted to go back to the main layout I can press a button (added on result layout) to slide right the main layout file
You can also use this function : overridePendingTransition which can define an animation for the upcoming activity and an other animation for the activity which exit.
Use it like this, in your second Activity :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
overridePendingTransition(android.R.anim.slide_out_right, 0);
setContentView(R.layout.myLayout);
first argument is for the animation enter, and 0 is for no animation.
And for an animation when you leave your second activity :
#Override
public void finish() {
super.finish();
overridePendingTransition(R.anim.enterAnim, R.anim.leaveAnim);
}
You can always use default stock animations supplied by Android framework.
Heres an example code:
boolean isFirstXml=evaluatingConditionFunction();
LayoutInflater inflator=getLayoutInflater();
View view=inflator.inflate(isFirstXml?R.layout.myfirstxml:R.layout.myseconxml, null, false);
view.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));
setContentView(view);
Call this from any of your activity which holds your Parent View.
For custom animations you can visit developer docs. Heres the documentation link.
I'm setting a background color in main.xml.
When I preview the layout in Eclipse, the background color shows up correctly, but when the app runs on my device, the background color is default black. It seems none of my changes in main.xml are reflected when the app runs.
Here is my main.xml file
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lst"
android:layout_width="match_parent"
android:background="#color/listViewBG"
android:divider="#drawable/divider"
/>
Here is the OnCreate in the main activity
public class AleWorldActivity extends ListActivity
{
String classes[] = { "Movies", "Pictures" };
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setListAdapter(new ArrayAdapter<String>(AleWorldActivity.this, android.R.layout.simple_list_item_1, classes));
}
Any ideas?
Thanks
Here is my strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, AleWorldActivity!</string>
<string name="app_name">Ale World</string>
<color name="listViewBG">#e101f5</color>
</resources>
Kevin
You should declare your color on colors.xml. Create that file in the same folder that strings.xml is.
Besides that you have some errors:
You are missing the setContentView(R.layout.main) on your
AleWorldActivity.
The id of your ListView is wrong. Change it to : android:id="#android:id/list
Add android:layout_height="wrap_content" in your ListView xml.
Change #color/listViewBG to #FFFFFF see if the screen changes colors that means that there is a problem with you declaring it in your strings.xml.
http://developer.android.com/resources/samples/SoftKeyboard/res/values/colors.html