When i click first time this animation collapse and expand itself suddenly, afterwards when click then it goes fine. problem is why this animation expand itself first time. Any expert here?
this is my xml code
<TextView
android:drawableRight="#drawable/ic_arrow_down"
android:background="#FFF12222"
android:textColor="#060606"
android:textSize="20sp"
android:text="Required Field"
android:id="#+id/section_required_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:orientation="vertical"
android:id="#+id/layout_required_fields"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginTop="10dp"
android:id="#+id/tile_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="16sp"
android:textColor="#060606"/>
<EditText
android:id="#+id/title"
android:layout_width="270sp"
android:layout_height="wrap_content"
android:text="abcd"
android:layout_marginTop="2dp"
android:background="#drawable/rounded_edittext"
android:textSize="15sp"/>
<TextView
android:id="#+id/description_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:text="Description"
android:textSize="15sp"
android:textColor="#060606"/>
<EditText
android:id="#+id/video_description"
android:layout_width="270sp"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:text="abcd"
android:background="#drawable/rounded_edittext"
android:textSize="15sp"/>
<TextView
android:id="#+id/category_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:text="Category"
android:textSize="15sp"
android:textColor="#060606"/>
<TextView
android:id="#+id/video_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:text="abcd"
android:textSize="15sp"
android:textColor="#060606"/>
<TextView
android:id="#+id/tags_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20sp"
android:text="Tags"
android:textSize="15sp"
android:textColor="#060606"/>
<EditText
android:id="#+id/tags"
android:layout_width="270sp"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:text="abcd"
android:textSize="15sp"
android:background="#drawable/rounded_edittext"
android:textColor="#060606"/>
</LinearLayout>
this is my java class for animation
public class AnimationUtils {
public static void expand(final View v) {
v.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
final int targetHeight = v.getMeasuredHeight();
// Older versions of android (pre API 21) cancel animations for views with a height of 0.
v.getLayoutParams().height = 1;
v.setVisibility(View.VISIBLE);
Animation a = new Animation()
{
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1
? ViewGroup.LayoutParams.WRAP_CONTENT
: (int)(targetHeight * interpolatedTime);
v.requestLayout();
}
#Override
public boolean willChangeBounds() {
return true;
}
};
// 1dp/ms
a.setDuration((int)(targetHeight / v.getContext().getResources().getDisplayMetrics().density));
v.startAnimation(a);
}
public static void collapse(final View v) {
final int initialHeight = v.getMeasuredHeight();
Animation a = new Animation()
{
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
if(interpolatedTime == 1){
v.setVisibility(View.GONE);
}else{
v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
v.requestLayout();
}
}
#Override
public boolean willChangeBounds() {
return true;
}
};
// 1dp/ms
a.setDuration((int)(initialHeight / v.getContext().getResources().getDisplayMetrics().density));
v.startAnimation(a);
}
}
and this is my java class code
tvRequiredField = (TextView) findViewById(R.id.section_required_field);
requiredFieldsLayout = (LinearLayout) findViewById(R.id.layout_required_fields);
tvRequiredField.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (v.isSelected()) {
AnimationUtils.collapse(requiredFieldsLayout);
v.setSelected(false);
}
else {
AnimationUtils.expand(requiredFieldsLayout);
v.setSelected(true);
}
}
});
i got my mistake
tvRequiredField = (TextView) findViewById(R.id.section_required_field);
requiredFieldsLayout = (LinearLayout) findViewById(R.id.layout_required_fields);
tvRequiredField.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (v.isSelected()) {//this should be expand instead of collapse
AnimationUtils.collapse(requiredFieldsLayout);
v.setSelected(false);
}
else {//this should be collapse instead of expand
AnimationUtils.expand(requiredFieldsLayout);
v.setSelected(true);
}
}
});
Related
I am running a sample of android expend animation. It is using value animation. I have two devices , one is samsang note 3 with 4.4.2 and other is galaxy s5 with 5.0 .The animation working fine on note 3 mobile but not working on galaxy s5 mobile. Is this an Os depended issue or something else. Any idea would be a great help. Here is my code
public class MainActivity extends Activity {
LinearLayout mLinearLayout;
LinearLayout mLinearLayoutHeader;
ValueAnimator mAnimator;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLinearLayout = (LinearLayout) findViewById(R.id.expandable);
//mLinearLayout.setVisibility(View.GONE);
mLinearLayoutHeader = (LinearLayout) findViewById(R.id.header);
//Add onPreDrawListener
mLinearLayout.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
#Override
public boolean onPreDraw() {
mLinearLayout.getViewTreeObserver().removeOnPreDrawListener(this);
mLinearLayout.setVisibility(View.GONE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
mLinearLayout.measure(widthSpec, heightSpec);
// mAnimator.setDuration(1000);
mAnimator = slideAnimator(0, mLinearLayout.getMeasuredHeight());
return true;
}
});
mLinearLayoutHeader.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (mLinearLayout.getVisibility()==View.GONE){
expand();
}else{
collapse();
}
}
});
}
private void expand() {
//set Visible
mLinearLayout.setVisibility(View.VISIBLE);
/* Remove and used in preDrawListener
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
mLinearLayout.measure(widthSpec, heightSpec);
mAnimator = slideAnimator(0, mLinearLayout.getMeasuredHeight());
*/
mAnimator.setDuration(1000);
mAnimator.start();
}
private void collapse() {
int finalHeight = mLinearLayout.getHeight();
ValueAnimator mAnimator = slideAnimator(finalHeight, 0);
mAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationEnd(Animator animator) {
//Height=0, but it set visibility to GONE
mLinearLayout.setVisibility(View.GONE);
}
#Override
public void onAnimationStart(Animator animator) {
}
#Override
public void onAnimationCancel(Animator animator) {
}
#Override
public void onAnimationRepeat(Animator animator) {
}
});
mAnimator.start();
}
private ValueAnimator slideAnimator(int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//Update Height
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = mLinearLayout.getLayoutParams();
layoutParams.height = value;
mLinearLayout.setLayoutParams(layoutParams);
}
});
return animator;
}
}
Here is my sdk version in both gradle and manifest.
<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="21" />
Here is my xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="64dp"
android:layout_marginTop="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:background="#FFF"
android:orientation="horizontal" >
<TextView
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/color"
android:layout_width="#dimen/color_width"
android:layout_height="#dimen/color_height"
android:background="#drawable/rectangle"
android:gravity="center_vertical"
android:text=""
android:textAlignment="center"
android:textStyle="bold"
android:fontFamily="sans-serif-light"
/>
<TextView
android:id="#+id/clickme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:textStyle="bold"
android:gravity="center_vertical"
android:fontFamily="sans-serif-light"
android:text="#string/clickme" />
</LinearLayout>
<LinearLayout
android:id="#+id/expandable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:background="#FFF"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/hello_world" />
</LinearLayout>
</LinearLayout>
What i need to make an animated button like this, that contains other buttons when clicked.
it begins
Begin
And transform
Clicked
We use the fabAction Library:
compile 'com.github.shell-software:fab:1.0.5'
https://github.com/shell-software/fab
Our XML is like this:
<RelativeLayout
android:id="#+id/news_item_actions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="#dimen/fab_margin"
android:layout_marginBottom="#dimen/fab_margin"
android:orientation="vertical"
android:visibility="visible"
>
<com.software.shell.fab.ActionButton
android:id="#+id/news_item_share_sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="0dp"
app:button_color="#color/share_sms"
app:image="#drawable/share_button_sms"
/>
<com.software.shell.fab.ActionButton
android:id="#+id/news_item_share_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="70dp"
app:button_color="#color/share_email"
app:image="#drawable/share_button_mail"
/>
<com.software.shell.fab.ActionButton
android:id="#+id/news_item_share_twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="140dp"
app:button_color="#color/share_twitter"
app:image="#drawable/share_button_twitter"
/>
<com.software.shell.fab.ActionButton
android:id="#+id/news_item_share_facebook"
android:layout_width="36dp"
android:layout_height="36dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="210dp"
app:button_color="#color/share_facebook"
app:image="#drawable/share_button_facebook"
/>
<com.software.shell.fab.ActionButton
android:id="#+id/news_item_share_dummy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="280dp"
app:button_color="#color/share_cancel"
app:image="#drawable/share_button_cancel"
/>
</RelativeLayout>
Our java code is like this:
final ActionButton actionButton = (ActionButton) findViewById(R.id.news_item_action_button);
final ActionButton actionCancelButton = (ActionButton) findViewById(R.id.news_item_action_cancel_button);
actionButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
expand(findViewById(R.id.news_item_share_facebook), 1);
expand(findViewById(R.id.news_item_share_twitter), 2);
expand(findViewById(R.id.news_item_share_email), 3);
expand(findViewById(R.id.news_item_share_sms), 4);
actionCancelButton.setVisibility(View.VISIBLE);
actionButton.setVisibility(View.GONE);
}
});
actionCancelButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
collapse(findViewById(R.id.news_item_share_facebook), 1);
collapse(findViewById(R.id.news_item_share_twitter), 2);
collapse(findViewById(R.id.news_item_share_email), 3);
collapse(findViewById(R.id.news_item_share_sms), 4);
actionCancelButton.setVisibility(View.GONE);
actionButton.setVisibility(View.VISIBLE);
}
});
public void expand(final View v, int pos) {
v.setVisibility(View.VISIBLE);
RelativeLayout.LayoutParams paramsTemp = (RelativeLayout.LayoutParams)v.getLayoutParams();
float d = getResources().getDisplayMetrics().density;
final int expectedMove = paramsTemp.topMargin - mMargins[pos-1];//(int)((ACTION_SIZE*pos) * d);
final int[] topMargin = {paramsTemp.topMargin,mMargins[pos-1]};
Animation a = new Animation()
{
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)v.getLayoutParams();
if(interpolatedTime == 1){
params.setMargins(params.leftMargin, topMargin[1],params.rightMargin,params.bottomMargin);
v.setLayoutParams(params);
}else{
int addedMargin = (int)(expectedMove * interpolatedTime);
int marginTop = topMargin[0] - addedMargin;
params.setMargins(params.leftMargin, marginTop,params.rightMargin,params.bottomMargin);
v.setLayoutParams(params);
}
}
#Override
public boolean willChangeBounds() {
return true;
}
};
// 1dp/ms
a.setInterpolator(new DecelerateInterpolator(1.0f));
a.setDuration(750);
v.startAnimation(a);
}
/*
* This method is use to animate the collapse of share actions in this activity.
* #param (final View v) The view which will be expanded.
*/
public void collapse(final View v, int pos) {
RelativeLayout.LayoutParams paramsTemp = (RelativeLayout.LayoutParams)v.getLayoutParams();
final int[] topMargin = {paramsTemp.topMargin};
float d = getResources().getDisplayMetrics().density;
final int expectedMove = (int)((ACTION_SIZE*pos) * d);
Animation a = new Animation()
{
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
if(interpolatedTime == 1){
v.setVisibility(View.GONE);
}else{
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)v.getLayoutParams();
int addedMargin = (int)(expectedMove * interpolatedTime);
int marginTop = topMargin[0] + addedMargin;
params.setMargins(params.leftMargin, marginTop,params.rightMargin,params.bottomMargin);
v.setLayoutParams(params);
}
}
#Override
public boolean willChangeBounds() {
return true;
}
};
// 1dp/ms
a.setInterpolator(new AccelerateInterpolator(1.0f));
a.setDuration(750);
v.startAnimation(a);
}
That is how we make the animation work. Hope it works.
I have a normal Relative Layout with text view and progress bar.
Now, since i have a fixed width and height of the layout the text is properly placed in the center and looks good, onclick of layout we are changing the visibility of progress bar to "Visible", but since i have a fixed width the progress bar is on top of the text.
What i am trying to achieve is , onclick increase the right end width of the layout along with animation.
Here is my code :
<RelativeLayout
android:id="#+id/rellyt"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_margin="5dp"
android:background="#B7E4FF"
android:clickable="true" >
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:text="click on this button"
android:textColor="#000000"
android:textSize="14sp" />
<ProgressBar
android:id="#+id/prgbar"
style="#android:style/Widget.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="8dp"
android:visibility="visible" />
</RelativeLayout>
Screen shot of the layout :
Animation
public class ResizeWidthAnimation extends Animation
{
private int mWidth;
private int mStartWidth;
private View mView;
public ResizeWidthAnimation(View view, int width)
{
mView = view;
mWidth = width;
mStartWidth = view.getWidth();
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t)
{
int newWidth = mStartWidth + (int) ((mWidth - mStartWidth) * interpolatedTime);
mView.getLayoutParams().width = newWidth;
mView.requestLayout();
}
#Override
public void initialize(int width, int height, int parentWidth, int parentHeight)
{
super.initialize(width, height, parentWidth, parentHeight);
}
#Override
public boolean willChangeBounds()
{
return true;
}
}
Usage
if(animate)
{
ResizeWidthAnimation anim = new ResizeWidthAnimation(leftFrame, leftFragmentWidthPx);
anim.setDuration(500);
leftFrame.startAnimation(anim);
}
else
{
this.leftFragmentWidthPx = leftFragmentWidthPx;
LayoutParams lp = (LayoutParams) leftFrame.getLayoutParams();
lp.width = leftFragmentWidthPx;
leftFrame.setLayoutParams(lp);
}
Try this way,hope this will help you to solve your problem.
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout
android:id="#+id/customLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#B7E4FF"
android:gravity="center"
android:padding="5dp">
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click on this button"
android:textColor="#000000"
android:textSize="14sp" />
<ProgressBar
android:id="#+id/prgbar"
style="#android:style/Widget.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:visibility="invisible" />
</LinearLayout>
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {
private LinearLayout customLayout;
private ProgressBar prgbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
customLayout = (LinearLayout) findViewById(R.id.customLayout);
prgbar = (ProgressBar) findViewById(R.id.prgbar);
customLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(prgbar.getVisibility() == View.INVISIBLE){
prgbar.setVisibility(View.VISIBLE);
}else{
prgbar.setVisibility(View.INVISIBLE);
}
}
});
}
}
I have done the layout expand animation with the following code. It works fine when we invoke the animation by clicking a text view, but the same is not happening when I try to do that by clicking a layout. Can anyone help me in solving this?
LinearLayout hello= (LinearLayout)findViewById(R.id.lin_hello);
final RelativeLayout rel=(RelativeLayout)findViewById(R.id.rel_nah_hide);
hello.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
expand=!expand;
Animation a=expand(rel, expand);
rel.setAnimation(a);
a.start();
}
});
public static Animation expand(final View v, final boolean expand) {
try {
Method m = v.getClass().getDeclaredMethod("onMeasure", int.class, int.class);
m.setAccessible(true);
m.invoke(v,
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
MeasureSpec.makeMeasureSpec(((View)v.getParent()).getMeasuredWidth(), MeasureSpec.AT_MOST)
);
} catch (Exception e) {
e.printStackTrace();
}
final int initialHeight = v.getMeasuredHeight();
if (expand) {
v.getLayoutParams().height = 0;
} else {
v.getLayoutParams().height = initialHeight;
}
v.setVisibility(View.VISIBLE);
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newHeight = 0;
if (expand) {
newHeight = (int) (initialHeight * interpolatedTime);
} else {
newHeight = (int) (initialHeight * (1 - interpolatedTime));
}
v.getLayoutParams().height = newHeight;
v.requestLayout();
if (interpolatedTime == 1 && !expand)
v.setVisibility(View.GONE);
}
#Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration(SPEED_ANIMATION_TRANSITION);
a.setAnimationListener(new AnimationListener(){
#Override
public void onAnimationEnd(Animation arg0) {
animWorkingFlag=false;
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationStart(Animation animation) {
animWorkingFlag=true;
}
});
return a;
}
and following is the xml layout,
<?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="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/lin_hello"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/hello"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Nah"
android:gravity="center"
android:background="#F03535"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/rel_nah_hide"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:id="#+id/txt_nah_hide1"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Incorrect Name/Address"
android:gravity="center"
android:textColor="#color/white"/>
<TextView
android:id="#+id/txt_nah_hide2"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Venue is closed"
android:gravity="center"
android:textColor="#color/white"
android:layout_below="#id/txt_nah_hide1"/>
<TextView
android:id="#+id/txt_nah_hide3"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Venue is duplicate"
android:gravity="center"
android:textColor="#color/white"
android:layout_below="#id/txt_nah_hide2"/>
</RelativeLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="28dp"
android:text="heelo2222"/>
</LinearLayout>
Use next part code: ->
View hello= findViewById(R.id.lin_hello);
final RelativeLayout rel=(RelativeLayout)findViewById(R.id.rel_nah_hide);
hello.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
expand=!expand;
Animation a=expand(rel, expand);
rel.setAnimation(a);
a.start();
}
});
I have used FrameLayout within a Gallery as the Gallery Item. There are 2 RelativeLayouts inside the FrameLayout each holding some TextView and an ImageView. There is a button outside the Gallery called 'Flip'. Clicking the button 'Flip' hides one relative layout and shows the another with flip animation. And there is also a TextView outside the Gallery in which I update some text. When the user scrolls the Gallery to select another item, then I update the TextView from Gallery's setOnItemSelected method.
The problem is if I don't update the TextView from the setOnItemSelected method, the flipping animation works correctly. But, if I update the TextView then the animation doesn't work. Even it doesn't switch the RelativeLayout inside the FrameLayout.
If anybody has any idea where the problem please help me.
Here is the XML layout for the main screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|center" android:background="#0000">
<RelativeLayout android:id="#+id/RelativeLayout04" android:layout_height="fill_parent" android:layout_width="fill_parent"><RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/top_bar" android:layout_alignParentTop="true" android:id="#+id/headerRelativeLayout"><Button android:id="#+id/homeButton" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:background="#drawable/home_button_open" android:layout_marginLeft="5dip" android:layout_width="wrap_content" android:layout_alignParentLeft="true"></Button>
<Button android:id="#+id/backButton" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:background="#drawable/back_button" android:layout_toRightOf="#+id/homeButton" android:layout_width="wrap_content"></Button>
<TextView android:layout_height="wrap_content" android:textSize="22sp" android:layout_toLeftOf="#+id/LinearLayout02" android:gravity="center" android:layout_toRightOf="#+id/backButton" android:id="#+id/TextView02" android:layout_width="fill_parent" android:textStyle="bold" android:layout_centerInParent="true"></TextView>
<LinearLayout android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerVertical="true" android:layout_marginRight="10dip" android:id="#+id/LinearLayout02">
<com.vocabAhead.SATVocab.LoginButton android:layout_marginRight="5dip" android:id="#+id/facebookButton" android:layout_width="wrap_content" android:background="#drawable/facebook_button" android:layout_height="wrap_content"></com.vocabAhead.SATVocab.LoginButton>
<Button android:id="#+id/settingsButton" android:layout_width="wrap_content" android:background="#drawable/settings_button" android:layout_height="wrap_content" android:layout_gravity="center_vertical"></Button>
</LinearLayout>
</RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="35dip" android:background="#FF212121" android:layout_alignParentBottom="true" android:id="#+id/footerRelativeLayout">
<Button android:id="#+id/playButton" android:layout_height="wrap_content" android:background="#drawable/play_button" android:layout_marginLeft="10dip" android:layout_width="wrap_content" android:layout_centerVertical="true" android:layout_alignParentLeft="true"></Button>
<Button android:layout_alignParentRight="true" android:id="#+id/showScriptButton" android:layout_height="wrap_content" android:background="#drawable/infobutton" android:layout_marginRight="10dip" android:layout_width="wrap_content" android:layout_centerVertical="true"></Button>
<TextView android:layout_height="wrap_content" android:textColor="#FFFF" android:id="#+id/itemSerialTextView" android:layout_width="wrap_content" android:layout_centerInParent="true"></TextView>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="5dip" android:layout_toRightOf="#+id/playButton" android:id="#+id/durationTextView" android:textColor="#FFFF"></TextView>
</RelativeLayout>
<Gallery android:id="#+id/wordsGallery" android:layout_above="#+id/footerRelativeLayout" android:layout_below="#+id/headerRelativeLayout" android:layout_height="fill_parent" android:layout_width="fill_parent" android:scrollbars="none" android:scrollbarSize="0dip" android:layout_margin="0dip" android:gravity="fill" android:padding="0dip" android:background="#0000"></Gallery>
</RelativeLayout>
</LinearLayout>
And here is the XML layout for the Gallery items:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_margin="0dip" android:padding="0dip">
<RelativeLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="#+id/wordDetailsRelativeLayout" android:background="#FFFF">
<TextView android:gravity="center" android:textSize="18sp" android:layout_alignParentTop="true" android:layout_width="fill_parent" android:text="Apathy" android:textStyle="bold" android:layout_height="wrap_content" android:layout_marginBottom="5dip" android:layout_marginTop="5dip" android:id="#+id/wordTextView" android:textColor="#FF1a3f6e"></TextView>
<TextView android:gravity="center" android:layout_width="fill_parent" android:text="verb" android:layout_height="wrap_content" android:id="#+id/partsOfSpeechTextView" android:layout_below="#+id/wordTextView" android:layout_marginBottom="5dip"></TextView>
<LinearLayout android:paddingBottom="5dip" android:layout_width="fill_parent" android:gravity="center" android:background="#FFFF" android:id="#+id/LinearLayout01" android:layout_height="wrap_content" android:layout_alignParentBottom="true"><ImageView android:src="#drawable/iphone_vocabulary_logo_15" android:id="#+id/logoImageView" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
</LinearLayout>
<LinearLayout android:layout_height="fill_parent" android:layout_marginBottom="5dip" android:layout_width="fill_parent" android:layout_below="#+id/partsOfSpeechTextView" android:orientation="vertical" android:id="#+id/imageAndMeaningLinearLayout" android:gravity="top|center_horizontal" android:layout_above="#+id/LinearLayout01"><ImageView android:id="#+id/wordImageView" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
<TextView android:layout_height="wrap_content" android:id="#+id/wordMeaningTextView" android:layout_width="wrap_content" android:textColor="#F000" android:textSize="15sp" android:layout_marginLeft="10dip" android:layout_marginTop="10dip" android:layout_marginRight="10dip" android:gravity="center"></TextView>
</LinearLayout>
</RelativeLayout>
<RelativeLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="#FFFF" android:id="#+id/wordScriptRelativeLayout" android:visibility="gone">
<TextView android:gravity="center" android:textSize="18sp" android:layout_alignParentTop="true" android:layout_width="fill_parent" android:text="Apathy" android:textStyle="bold" android:layout_height="wrap_content" android:layout_marginBottom="5dip" android:layout_marginTop="5dip" android:textColor="#FF1a3f6e" android:id="#+id/wordTextView2"></TextView>
<TextView android:gravity="center" android:layout_width="fill_parent" android:text="verb" android:layout_height="wrap_content" android:id="#+id/partsOfSpeechTextView2" android:layout_below="#+id/wordTextView2" android:layout_marginBottom="5dip"></TextView>
<LinearLayout android:paddingBottom="5dip" android:layout_width="fill_parent" android:gravity="center" android:background="#FFFF" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:id="#+id/LinearLayout02"><ImageView android:src="#drawable/iphone_vocabulary_logo_15" android:id="#+id/logoImageView" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
</LinearLayout>
<LinearLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="#+id/wordScriptLinearLayout" android:gravity="top|center_horizontal" android:layout_below="#+id/partsOfSpeechTextView2" android:layout_above="#+id/LinearLayout02"><TextView android:layout_height="wrap_content" android:layout_margin="10dip" android:id="#+id/wordScriptTextView" android:layout_width="fill_parent" android:textColor="#F000" android:textSize="15sp"></TextView>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
In the main screen when the user clicks the showScriptButton (right button of the footer), then framelayout's one relative layout switches with the another. The switching of the relative layout is shown with a flip animation.
Now, there is a text view in the middle of the footer. If we change the text of that text view from code then the flip animation doesn't work even though the frame layout doesn't change the relative layouts.
This is the setOnItemSelectedListener method for the Gallery:
wordsGallery.setOnItemSelectedListener(new OnItemSelectedListener() {
#Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int position, long arg3) {
durationTextView.setText("");
}
#Override
public void onNothingSelected(AdapterView<?> arg0) {
}
});
Here is the method for playButton:
private void playAudio() {
if(isPaused) {
myRefreshThread = new Thread(new secondCountDownRunner());
myRefreshThread.start();
audioPlayer.start();
} else {
audioPlayer = MediaPlayer.create(this, ApplicationCache.wordAudioList.get(word.wordText));
audioPlayer.setOnCompletionListener(this);
int totalDuration = audioPlayer.getDuration()/1000;
String durationText = "";
int min = totalDuration/60;
int seconds = totalDuration % 60;
if(min < 10)
durationText = "0";
durationText += min+":";
if(seconds < 10)
durationText += "0";
durationText += seconds;
System.out.println("Duration of audio:"+durationText);
durationTextView.setText(durationText);
myRefreshThread = new Thread(new secondCountDownRunner());
myRefreshThread.start();
audioPlayer.start();
}
isPaused = false;
isPlaying = true;
playButton.setBackgroundResource(R.drawable.pause_button);
}
And here is the secondCountDownRunner thread:
class secondCountDownRunner implements Runnable{
// #Override
public void run() {
while(!Thread.currentThread().isInterrupted()){
Message m = new Message();
m.what = 2;
audioPlayerHandler.sendMessage(m);
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
Thread.currentThread().interrupt();
}
}
}
}
and here is the audioPlayerHandler:
audioPlayerHandler = new Handler() {
#Override
public void handleMessage( Message msg )
{
if(msg.what == 1) {
if(isPlaying) {
if(wordsGallery.getSelectedItemPosition() < (ApplicationCache.dontKnowWords.size() - 1)) {
//currentPosition++;
//currentGalleryPosition++;
//isWordScriptShowing = false;
//updateWordDetails();
word = wordsList.get(wordsGallery.getSelectedItemPosition() + 1);
wordsGallery.setSelection(wordsGallery.getSelectedItemPosition() + 1, true);
playAudio();
}
}
} else if(msg.what == 2) {
if(isPlaying) {
int duration = audioPlayer.getDuration()/1000;
int currentPosition = audioPlayer.getCurrentPosition()/1000;
int timeLeft = duration - currentPosition;
if(timeLeft < 0)
timeLeft = 0;
String durationText = "";
int min = timeLeft/60;
int seconds = timeLeft % 60;
if(min < 10)
durationText = "0";
durationText += min+":";
if(seconds < 10)
durationText += "0";
durationText += seconds;
durationTextView.setText(durationText);
}
}
}
};
Here is the method which is called when showScriptButton is clicked:
public void flipView(int position) {
applyRotation(0, 90, position);
isFrontShowing[position] = !isFrontShowing[position];
}
private void applyRotation(float start, float end, int position) {
// Find the center of image
final float centerX, centerY;
if(isFrontShowing[position] == true) {
centerX = detailsLayout[position].getMeasuredWidth() / 2.0f;
centerY = detailsLayout[position].getMeasuredHeight() / 2.0f;
} else {
centerX = scriptLayout[position].getMeasuredWidth() / 2.0f;
centerY = scriptLayout[position].getMeasuredHeight() / 2.0f;
}
//System.out.println("center X:"+centerX+",Y:"+centerY);
// Create a new 3D rotation with the supplied parameter
// The animation listener is used to trigger the next animation
final Flip3dAnimation rotation =
new Flip3dAnimation(start, end, centerX, centerY);
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
rotation.setAnimationListener(new DisplayNextView(isFrontShowing[position], detailsLayout[position], scriptLayout[position]));
if (isFrontShowing[position] == true)
{
//detailsLayout[position].requestFocus();
//detailsLayout[position].bringToFront();
detailsLayout[position].startAnimation(rotation);
} else {
//System.out.println("---Backward flipping started...");
//scriptLayout[position].requestFocus();
//scriptLayout[position].bringToFront();
scriptLayout[position].startAnimation(rotation);
}
}
Here is the Flip3dAnimation class:
import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class Flip3dAnimation extends Animation {
private final float mFromDegrees;
private final float mToDegrees;
private final float mCenterX;
private final float mCenterY;
private Camera mCamera;
public Flip3dAnimation(float fromDegrees, float toDegrees, float centerX,
float centerY) {
mFromDegrees = fromDegrees;
mToDegrees = toDegrees;
mCenterX = centerX;
mCenterY = centerY;
}
#Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mCamera = new Camera();
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = mFromDegrees;
float degrees = fromDegrees
+ ((mToDegrees - fromDegrees) * interpolatedTime);
final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;
final Matrix matrix = t.getMatrix();
camera.save();
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}
DisplayNextView class:
import android.view.animation.Animation;
import android.widget.RelativeLayout;
public final class DisplayNextView implements Animation.AnimationListener {
private boolean mCurrentView;
RelativeLayout layout1;
RelativeLayout layout2;
public DisplayNextView(boolean currentView, RelativeLayout layout1,
RelativeLayout layout2) {
mCurrentView = currentView;
this.layout1 = layout1;
this.layout2 = layout2;
}
public void onAnimationStart(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
layout1.post(new SwapViews(mCurrentView, layout1, layout2));
}
public void onAnimationRepeat(Animation animation) {
}
}
SwapViews class:
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Animation.AnimationListener;
import android.widget.RelativeLayout;
public final class SwapViews implements Runnable {
private boolean mIsFirstView;
RelativeLayout layout1;
RelativeLayout layout2;
public SwapViews(boolean isFirstView, RelativeLayout layout1, RelativeLayout layout2) {
mIsFirstView = isFirstView;
this.layout1 = layout1;
this.layout2 = layout2;
}
public void run() {
final float centerX, centerY;
if(mIsFirstView) {
centerX = layout1.getWidth() / 2.0f;
centerY = layout1.getHeight() / 2.0f;
} else {
centerX = layout2.getWidth() / 2.0f;
centerY = layout2.getHeight() / 2.0f;
}
Flip3dAnimation rotation;
if (mIsFirstView == true) {
layout1.setVisibility(View.GONE);
layout2.setVisibility(View.VISIBLE);
layout2.requestFocus();
layout2.bringToFront();
rotation = new Flip3dAnimation(-90, 0, centerX, centerY);
} else {
layout2.setVisibility(View.GONE);
layout1.setVisibility(View.VISIBLE);
layout1.requestFocus();
layout1.bringToFront();
rotation = new Flip3dAnimation(-90, 0, centerX, centerY);
}
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new DecelerateInterpolator());
rotation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation arg0) {
WordDetailItemAdapter.notifyAdapter();
}
});
if (mIsFirstView == true) {
layout2.startAnimation(rotation);
} else {
layout1.startAnimation(rotation);
}
}
}
Does anyone have some idea about the problem. Please help.
In your main layout, why have you got RelativeLayout04 as the sole child of the top-level LinearLayout? I think your layout's complexity might have a bearing on this issue, so am here offering a simpler alternative which uses android:layout_weight to make the Gallery fill the space not used by header or footer. Let me know if this helps.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0000"
>
<!-- Header -->
<RelativeLayout
android:id="#+id/headerRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
...
</RelativeLayout>
<!-- The gallery -->
<Gallery
android:id="#+id/wordsGallery"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
...
/>
<!-- Footer -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="35dip"
android:background="#FF212121"
android:layout_alignParentBottom="true"
>
...
</RelativeLayout>
</LinearLayout>