I'm trying to do an animation that goes like this:
The context:
I have two EditText's I need that when you click over one, the another one come out from behind the first one. Here you have some pictures to get a image of what I want.
To do this obviously I need a TranslateAnimation in order to move the second EditText from behind the first one.
My approach:
The first thing that I could thought was in use a FrameLayout put the EditText one over another, and then in the onTouch event of the first one do a TranslateAnimation on the second one. The problem with this is that if I have the FrameLayout height in wrap_content then the animation will be invisible to the user. And if I change on runtime the height of the FrameLayout I will leave a void below the first EditText as you can see in this picture:
The second solution that I thought was add one AnimationListener to the TranslateAnimation and in the onAnimationStart method change the height of the FrameLayout. But the problem with this is that the height of the FrameLayout changes too abruptly. I want keep the animation smooth.
My question:
How can I get a smooth animation of the second EditText from behind the first one, changing the height of the FrameLayout as the second EditText moves down?
Thanks!
Update:
I changed the FrameLayout by a RelativeLayout I searched and there's no difference for this case. I tried scale this RelativeLayout that contains both of the EditText with an AnimationScale in order to display the animation smoothly, but didn't work. Here is my code:
protected void expanse() {
Log.d("Accordion", "expandAccordion");
//Translate the top of the second EditText to its bottom
TranslateAnimation translateSecond = new TranslateAnimation(second.getLeft(), second.getLeft(),
second.getTop(), second.getBottom());
translateSecond.setDuration(1000);
//Scale the relative layout to show the both of them
ScaleAnimation scaleContainer = new ScaleAnimation(container.getLeft(), container.getLeft(),
container.getTop(), second.getBottom());
scaleContainer.setDuration(1000);
//At the end of the scaling, change the height of the relative layout
scaleContainer.setAnimationListener(new AnimationListenerAdapter() {
#Override
public void onAnimationEnd(Animation animation) {
RelativeLayout.LayoutParams params = (LayoutParams) container.getLayoutParams();
params.height = second.getBottom();
container.setLayoutParams(params);
super.onAnimationEnd(animation);
}
});
container.startAnimation(scaleContainer);
second.startAnimation(translateSecond);
}
BTW I can guarantee that if I hardcode some large height like 350dp, the animation is displayed correctly.
UPDATE:
I tried moving both, the second EditText and the layout below. This is the code. BTW for another reasons I changed the ListView by a custom ViewPager, this doesn't change anything.
public class MainActivity extends FragmentActivity {
private EditText first;
private EditText second;
private HoboViewPager pager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (HoboViewPager) findViewById(R.id.pager);
pager.setPageTransformer(true, new RotationPageTransformer());
pager.setAdapter(new SampleAdapter(this, getSupportFragmentManager()));
first = (EditText) findViewById(R.id.location_search_field);
second = (EditText) findViewById(R.id.term_search_field);
first.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
expanseSecondField();
return true;
}
});
}
protected void expanseSecondField() {
TranslateAnimation translateSecondField = new TranslateAnimation(second.getLeft(), second.getLeft(),
second.getTop(), second.getBottom());
translateSecondField.setFillAfter(true);
translateSecondField.setDuration(1000);
TranslateAnimation translateContainer = new TranslateAnimation(pager.getLeft(), pager.getLeft(),
pager.getTop(), pager.getTop() + second.getBottom());
translateContainer.setFillAfter(true);
translateContainer.setDuration(1000);
pager.startAnimation(translateContainer);
second.startAnimation(translateSecondField);
}
}
This didn't work because the TranslateAnimation of the container is executed immediately. The result is the same that when I was trying to change the size of the container at the end of the animation.
How use the 2nd option & try performing two translate animations in tandem: 1 on the EditText, then one on the FrameLayout? Give them both the same exact deltas and duration. This way, the FrameLayout will move down smoothly, then at the end of the animation, change the height of the FrameLayout.
Hope this helps :)
Related
Im having a bug that i cant understand the reason and how to resolve it. I belive that is a problem of layout/view/context refresh but i dont know.
I have a cell from a listView(I prefer recyclerView but the project has years) and in the corner of the cell i have a button to show more options. Programatically it just make an element View.GONE and another element View.VISIBLE.
I will attach code in a moment
To this button i setted too a listener that when i tap on it it do the opposite of below mentioned. It shows some elements and hide an entire LinearLayout from the cell. The elements are showed BUT the LinearLayout keeps on the screen like bugged. If i tap anywhere it disappears and if i try to tap on it it disappears too. Its like the view of that linear got bugged and keep in there like a ghost view. I will shop some pictures.
The cell normally at the beginning: https://imgur.com/1BjK0KP
The cell after i press the entire view to show the LinearLayout at the bottom of the cell: https://imgur.com/eONSptW
The cell after i press the arrow of the corner to hide the LinearLayout. Here it shows the view bugged https://imgur.com/jrT0qxV
The cell after i tap anywhere else https://imgur.com/XD1jN7U
public void expandView(View view){
final View cellView = view;
final LinearLayout editLinear = (LinearLayout) view.findViewById(R.id.cart_edit);
editLinear.setVisibility(View.VISIBLE);
final TextViewFont countText = (TextViewFont) view.findViewById(R.id.itemCount);
countText.setVisibility(View.GONE);
final TextViewFont total = (TextViewFont) view.findViewById(R.id.itemTotal);
final ImageView imageViewArrow = (ImageView) view.findViewById(R.id.cart_edit_image);
imageViewArrow.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_arrow_up));
//notifyDataSetChanged();
imageViewArrow.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
countText.setVisibility(View.VISIBLE);
editLinear.setVisibility(View.GONE);
imageViewArrow.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_arrow_down));
}
});
First of all, you don't need to store context because in View you have the method view.getContext().
I recommend this article:
https://possiblemobile.com/2013/06/context/
On the other hand, ensure that you don't have a ghost view that is overlapping your image view.
I referenced the other questions but couldn't find a solution, also I am fairly new to programming.
So I implemented a TranslateAnimation on my ImageView but once the animation ends it returns to its original position. I used Override onAnimationEnd but that doesn't seem to work. Can someone figure out what should I be doing?
public class PackAnimation extends AppCompatActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.pack_animation);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
String s = getIntent().getStringExtra("CHOICE");
final ImageView pandya = (ImageView) findViewById(R.id.pandya);
final int amountToMoveRight = 600;
final int amountToMoveDown = 0;
TranslateAnimation anim = new TranslateAnimation(0, amountToMoveRight, 0, amountToMoveDown);
anim.setDuration(100);
anim.setAnimationListener(new TranslateAnimation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) { }
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation)
{
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)pandya.getLayoutParams();
params.topMargin += amountToMoveDown;
params.leftMargin += amountToMoveRight;
pandya.setLayoutParams(params);
}
});
pandya.startAnimation(anim);
}
}
You can use anim.setFillAfter(true) to the TranslateAnimation and get the button stay at the new position, but the button clicks will not work at the new position.
So use ViewPropertyAnimator or ObjectAnimator. These are property animation and will change the position of the View, whereas the TranslateAnimation is View animation and will not change the actual property of the View.
For example, using ViewPropertyAnimator:
pandya.animate()
.translationX(amountToMoveRight)
.translationY(amountToMoveDown);
Refer the blog for more info:
Finally, the previous animations changed the visual appearance of the
target objects... but they didn't actually change the objects
themselves. You may have run into this problem. Let's say you want to
move a Button from one side of the screen to the other. You can use a
TranslateAnimation to do so, and the button will happily glide along
to the other side of the screen. And when the animation is done, it
will gladly snap back into its original location. So you find the
setFillAfter(true) method on Animation and try it again. This time the
button stays in place at the location to which it was animated. And
you can verify that by clicking on it - Hey! How come the button isn't
clicking? The problem is that the animation changes where the button
is drawn, but not where the button physically exists within the
container. If you want to click on the button, you'll have to click
the location that it used to live in. Or, as a more effective solution
(and one just a tad more useful to your users), you'll have to write
your code to actually change the location of the button in the layout
when the animation finishes.
Use anim.setFillAfter(true); and it will remain on the final position after the end of animation.
The title may sound confusing I know, I 'm adding a view everytime I click on a button, composed by a textview and a button. I'm setting every added view an ID with simply view.setID(++i) and every added button (inside the views) an ID simply with button.setID(++n), n starting at 1000, since I won't have more than 1000 added views.
Here's what I got:
public class MainActivity extends AppCompatActivity {
GridLayout gridLayout;
static int i;
static int n = 1000;
private Button theButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridLayout = (GridLayout)findViewById(R.id.gamehistory);
Button b = (Button)findViewById(R.id.Button01);
b.setOnClickListener(new View.OnClickListener(){
public void onClick(View v) {
theButton = new Button(MainActivity.this);
TextView theText = new TextView(MainActivity.this);
theText.setGravity(Gravity.CENTER_HORIZONTAL);
LinearLayout theLayout = new LinearLayout(MainActivity.this);
theLayout.setOrientation(LinearLayout.VERTICAL);
theLayout.setBackgroundColor(Color.parseColor("#8BAAC3"));
theLayout.setId(++i);
theButton.setId(++n);
theButton.setText(theButton.getId() + "");
theText.setText(theLayout.getId() + "");
theLayout.addView(theButton);
theLayout.addView(theText);
gridLayout.addView(theLayout);
GridLayout.LayoutParams lp = (GridLayout.LayoutParams) theLayout.getLayoutParams();
lp.setMargins(10, 10, 10, 10);
}
});
What I need is when I click on a button that was created, the correspondent view is destroyed, and the next views take one step back feeling the gap in the parent which is a GridLayout
Add this where you are adding views to GridLayout -
theLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
gridLayout.removeView(theLayout);
}
});
theButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
gridLayout.removeView(theLayout);
}
});
For this , you need to make theLayout final
final LinearLayout theLayout = new LinearLayout(LauncherActivity.this);
The simplest method would be.
View v = gridLayout.findViewById(<some id>);
gridLayout.removeView(v);
However it seems like you may want to consider using a RecyclerView. You can add/remove items from the Adapter and the views will be updated for you.
EDIT
When using A RecyclerView you have to specify two essential components.
RecyclerAdapter - This converts data into views (rows, cards, cells, ect.)
LayoutManger - Most common are LinearLayoutManger and GridLayoutManager which define how the views from the adapter are presented out in relation to one another, and handle scrolling.
There are a few more option additions you can can use if needed.
ItemDecoration - define backgrounds, or overlays for cells. (E.G. draw a gray background for every other view in a list)
ItemTouchHelper - does most of the heavy lifting for swipe (e.g. swipe to delete) and drag (e.g. drag to re-arrange) operations.
I would highly suggest getting familiar with the RecyclerView it should be your goto component when you need to display a list of items on the screen.
I want to make a drop down menu, like a status menu, that is hidden when the activity starts, and when it's pressed or slid it opens like the image below..
http://i.stack.imgur.com/jeq5z.png
My layout currently has a RelativeLayout for the top bar and a ScrollView for the text.. between those, i'd like to put the menu..
I'm not doing this app on phonegap or anything like that, just java and xml..
Thanks in advance
Edit:
Thank you all for your help! I end up doing a FrameLayout that was set off the screen with the translationY and then, when clicked, just slide up and down.. Here's the snipped.. I'll just leave it here in case someone else needs it.
on layout.xml
<FrameLayout
android:id="#+id/layout_FrameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ffffff" >
<!-- stuf -->
</FrameLayout>
on activity.java
private FrameLayout statusDrawer = null;
private int statusDrawerHeight; // height of the FrameLayout (generated automatically)
private int statusDrawerDragButtonHeight = 30 + 5; //height of the DragButton + height of the border
private boolean statusDrawerOpened = false;
private int statusDrawerDuration = 750; //time in milliseconds
private TimeInterpolator interpolator = null; //type of animation see#developer.android.com/reference/android/animation/TimeInterpolator.html
#Override
protected void onCreated(Bundle savedInstanceState){
statusDrawer = (FrameLayout) findViewById(R.id.layout_FrameLayout);
interpolator = new AccelerateDecelerateInterpolator();
statusDrawer.post(new Runnable() {
#Override
public void run() {
statusDrawerHeight = statusDrawer.getHeight();
statusDrawer.setTranslationY(-statusDrawerHeight+statusDrawerDragButtonHeight);
}
});
statusDrawer.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v){
if(statusDrawerOpened) {
statusDrawer.animate()
.translationY(-statusDrawerHeight+statusDrawerDragButtonHeight)
.setDuration(statusDrawerDuration)
.setInterpolator(interpolator)
.start();
} else {
statusDrawer.animate()
.translationY(0)
.setDuration(statusDrawerDuration)
.setInterpolator(interpolator)
.start();
}
statusDrawerOpened = !statusDrawerOpened;
}
});
}
Use a FrameLayout as the root layout. Add the drop menu layout as in the right side of your picture. Call
menuView.setTranslationY(-view.getHeight);
on this view to initially hide the drop down menu when the activity is started. Make sure menuView only refers to the drop down view part without the small tab button. When the user touches the tab animate translationY to 0 so that the layout will slide down
ObjectAnimator.ofFloat(dropDownView, "translationY", -view.getHeight, 0).setDuration(200).start();
whereby dropDownView refers to the complete drop down menu.
Using ObjectAnimator requires API level 11. If you need to support older API levels, use http://developer.android.com/reference/android/view/animation/TranslateAnimation.html (which has some down sides).
If you instead want add a sliding effect, e.g. the sliding menu is moving with together with the finger, install a OnTouchListener:
dropDownTab.setOnTouchListener(new OnTouchListener() {
public void onTouch(View v, MotionEvent e) {
// Make the drop down menu finger follow the finger position.
// Use again dropDownView.setTranslationY(...) to move the view.
// If the drop down menu has been dragged a certain distance, make it move out by itself using the animation as above.
}
});
I'm trying to get my textView to react to a user's tap.
I found out that I actually have to set android:clickable="true", so my function is actually called now.
But my problem is, that I'm using an animation to move my textView within my activity (from bottom to top). So now the onClick function is only called when you tap where my textView used to be, not where it actually is.
How do you fix this?
EDIT:
Unfortunately, I wasn't able to move the actual TextView programmatically (I'm using a RelativeLayout) like the first answer suggests.
However, I could overlay the position of my TextView with another TextView (transparent) that's clickable only when the animation comes to an end.
Works perfectly.
When you are doing animations the TextView is only visualy moved (the graphic rendering representation is only moved on the screen) but the real TextView object stays on the old position. You have to manually (programatically) move the TextView to the new position.
Take a look at this presentation from Romain Guy and Chet Haase.
Chet Haase is taking about this issue at the 42:00 min. Take a look at the whole presentation if you have time. They are talking about some really usefull things.
I recently had to do this. You didn't provide any code, so this will have to do. The key is setting bottomMargins to compensate.
Animation yourAnimation = AnimationUtils.loadAnimation(getActivity().getApplicationContext(), R.anim.your_anim_file);
slideOutBottom.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
animatedButton.clearAnimation();
Resources r = view.getResources();
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, -68, r.getDisplayMetrics());
lp = (LinearLayout.LayoutParams) animatedButton.getLayoutParams();
lp.bottomMargin = -50;
cartFunctionButtons.setLayoutParams(lp);
}
});
yourAnimation.setFillAfter(true);
animatedButton.startAnimation(yourAnimation);