Develop Reference

View animation only working second time

I'm trying to make an ImageButton slide up and out and then have another set of buttons slide in it's place, my problem is that the second buttons don't "slide" in the first time, only from the second and onward. I tried setting the button containers Visibility to invisible instead of gone, but it had no effect of the animation and just split the buttons to the top and bottom of the parent view.
xml
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="#+id/user_email_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:onClick="showEmail"
app:srcCompat="#drawable/logo_email" />+
<LinearLayout
android:id="#+id/user_email_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<ImageButton
android:id="#+id/user_email_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFF"
android:onClick="addEmail"
android:visibility="gone"
app:srcCompat="#drawable/ic_add" />
<TextView
android:id="#+id/user_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout
android:id="#+id/user_email_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
<ImageButton
android:id="#+id/user_email_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFF"
android:onClick="editEmail"
app:srcCompat="#drawable/ic_edit" />
<ImageButton
android:id="#+id/user_email_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFF"
android:tint="#a7a7a7"
app:srcCompat="#drawable/ic_delete" />
</LinearLayout>
<ImageButton
android:id="#+id/user_email_hide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFF"
android:onClick="hideEmail"
android:tint="#a7a7a7"
android:padding="15dp"
android:visibility="gone"
app:srcCompat="#drawable/ic_cancel" />
</LinearLayout>
</LinearLayout>
Show animation method
public void showEmail(View view) {
findViewById(R.id.user_email_hide).setVisibility(View.VISIBLE);
if (emailCheck == true) {
emailTextView.setVisibility(View.VISIBLE);
emailInput.setVisibility(View.VISIBLE);
} else {
addEmail.setVisibility(View.VISIBLE);
}
final Animation slide_up_in = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up_in);
Animation slide_up_out = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up_out);
showEmail.startAnimation(slide_up);
slide_up_out.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
showEmail.setVisibility(View.GONE);
emailContainer.setVisibility(View.VISIBLE);
emailContainer.setAnimation(slide_up_in);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
animation file
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromYDelta="150%"
android:toYDelta="0" />
</set>

Increase height of the recyclerview after translation animation(using ObjectAnimator)

What I have done is on button click I have hidden the barcode scanner i.e used the ObjectAnimator for "Y" translation. At the same time, recyclerview which is below barcode scanner will also be translated in "Y" direction using ObjectAnimator. Animation works great only problem that when recylcerview is "Y" translated, then below it has some white space and I am not able to make it fill whole space available. Check below code which I have used.
//scannerLayout is barcode scanner and recycler view is list
int height1 = scannerLayout.getHeight();
ObjectAnimator objectAnimator = ofFloat(scannerLayout, "translationY", 0, -1 * (height1));
objectAnimator.setDuration(1000);
objectAnimator.start();
ObjectAnimator objectAnimator1 = ofFloat(recyclerView, "y", barcodeInputBoxHeight); //barcodeInputBoxHeight - is height of edittext which is shown between toolbar and recyalerview
objectAnimator1.setDuration(1000);
objectAnimator1.start();
objectAnimator1.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {
}
#Override
public void onAnimationEnd(Animator animator) {
// here I am doing some other stuff
}
#Override
public void onAnimationCancel(Animator animator) {
}
#Override
public void onAnimationRepeat(Animator animator) {
}
});
I tried setting new layout params for recyclerview onAnimationEnd but it didn't work.
Check the below video for exact problem
Video
Below is layout xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/content_pos"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".modules.pos.POSActivity">
<FrameLayout
android:id="#+id/screenFrame"
android:layout_width="match_parent"
android:layout_height="200dp"
android:elevation="6dp">
<com.journeyapps.barcodescanner.DecoratedBarcodeView
android:id="#+id/barcode_scanner"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.journeyapps.barcodescanner.DecoratedBarcodeView>
<ImageButton
android:id="#+id/imageButtonFlash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="15dp"
android:background="#drawable/button_border"
app:srcCompat="#drawable/ic_action_flash"/>
<ImageButton
android:id="#+id/imageButtonInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="5dp"
android:layout_marginTop="25dp"
android:background="#drawable/button_border"
android:visibility="gone"
app:srcCompat="#drawable/ic_action_input_barcode"/>
</FrameLayout>
<FrameLayout
android:id="#+id/rlInputBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#color/colorPrimary"
android:elevation="8dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:padding="10dp"
android:visibility="visible">
<EditText
android:id="#+id/editTextSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="50dp"
android:layout_marginRight="50dp"
android:background="#drawable/round_corner"
android:ems="10"
android:hint="Search"
android:imeOptions="actionSearch"
android:inputType="number"
android:paddingBottom="5dp"
android:paddingEnd="30dp"
android:paddingLeft="10dp"
android:paddingRight="20dp"
android:paddingStart="10dp"
android:paddingTop="5dp"/>
<ImageView
android:id="#+id/imageViewCloseInputBox"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="end|center_vertical"
android:layout_marginEnd="60dp"
android:layout_marginRight="60dp"
android:src="#drawable/ic_action_close_input_box"/>
<ImageView
android:id="#+id/imageViewSwitchKeyboard"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="end|center_vertical"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ic_action_keyboard"/>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/buttonCheckOut"
android:layout_below="#+id/screenFrame"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"/>
<Button
android:id="#+id/buttonCheckOut"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"
android:elevation="6dp"
android:text="Checkout"
android:textColor="#ffffff"/>

Android Animation disabled EditText

i add the Bounce effect to Linear layout.This linear layout contain 2 EditTexts and one button.but when animation complete Edittexts and Button are Disabled.I cant use them.how can i enable Edittexts and Button.
XML
<LinearLayout android:background="#drawable/login_grd" xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_marginTop="50dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:textSize="55sp"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#fff"
android:id="#+id/_title"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AFF"/>
<Button
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="200dp"
android:textColor="#000"
android:background="#fff"
android:id="#+id/animloginButton"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="Login"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="480dp"
android:background="#color/white"
android:id="#+id/lnr_do_login"
android:layout_marginTop="280dp">
<android.support.design.widget.TextInputLayout
android:theme="#style/TextLabel2"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:id="#+id/input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:textSize="16sp"
android:textColor="#color/black"
android:id="#+id/input_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:theme="#style/TextLabel2"
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">
<EditText
android:textSize="16sp"
android:textColor="#color/black"
android:inputType="textPassword"
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password" />
</android.support.design.widget.TextInputLayout>
<Button
android:textColor="#000"
android:background="#fff"
android:id="#+id/loginButton"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="Sign In"/>
</LinearLayout>
<TextView
android:textColor="#color/white"
android:layout_gravity="bottom|right"
android:gravity="bottom|center"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:text="#string/app_name"
android:layout_marginBottom="10dp" />
</LinearLayout>
</LinearLayout>
LoginActivity.class
private LinearLayout lnrLoginView;
#Override
public void onCreate(Bundle savedInstanceState ) {
super.onCreate(savedInstanceState);
setContentView(R.layout.before_login_screen);
animloginButton = (Button) findViewById(R.id.animloginButton);
lnrLoginView = (LinearLayout) findViewById(R.id.lnr_do_login);
TextView title = (TextView) findViewById(R.id._title);
Typeface type = Typeface.createFromAsset(getAssets(),"fonts/title_font.ttf");
title.setTypeface(type);
animloginButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
lnrLoginView.clearAnimation();
TranslateAnimation translation;
translation = new TranslateAnimation(0f, 0F, 0f, -getDisplayHeight());
translation.setStartOffset(10);
translation.setDuration(1000);
translation.setFillAfter(true);
translation.setInterpolator(new BounceInterpolator());
lnrLoginView.startAnimation(translation);
animloginButton.setVisibility(View.INVISIBLE);
}
private int getDisplayHeight() {
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
return metrics.widthPixels;
}
});
}

Try to use ObjectAnimator.onFloat instead.
animloginButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(lnrLoginView.getTag() instanceof Animator){
((Animator)lnrLoginView.getTag()).cancel();
}
ObjectAnimator translateY = ObjectAnimator
.ofFloat(target, "translationY", -transY)
.setDuration(1000)
;
translateY.setStartDelay(10);
translateY.setTarget(lnrLoginView);
translateY.setInterpolator(new BounceInterpolator());
translateY.start();
animloginButton.setVisibility(View.INVISIBLE);
}
private int getDisplayHeight() {
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
return metrics.widthPixels;
}
});

Use a animation listener to malipulate your views before and after the animation.
translation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
//Disable the views.
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
//Enable the views
}
});

Moving out camera view in Activity

I have an activity with toolbar at the bottom of the screen. Toolbar has a camera button. When user clicks the button, there must appear camera view. It must appear from the bottom of this activity, under the toolbar, fill up to 1/3 of the screen. I created SurfaceView for the camera. But can't set it below the toolbar because of
alignParentBottom="true"
How to do this appearance?
Here are my layouts
<SurfaceView
android:id="#+id/camera_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<RelativeLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#f4f5f7">
<ImageButton
android:id="#+id/btn_camera"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#f4f5f7"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/camera59" />
...
</RelativeLayout>

Solved it using animated LinearLayout.
Camera_Activity.class
public class Camera_Activity extends AppCompatActivity {
ImageButton btn_camera;
ImageButton btn_mic;
SurfaceView sv;
LinearLayout show_video;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.anim_footer);
show_video = (LinearLayout) findViewById(R.id.show_video);
btn_camera = (ImageButton) findViewById(R.id.btn_camera);
btn_mic = (ImageButton) findViewById(R.id.btn_mic);
sv = (SurfaceView) findViewById(R.id.camera_view);
btn_camera.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (sv.getVisibility() == View.GONE) {
sv.setVisibility(View.VISIBLE);
final Animation show = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.show_video);
show_video.startAnimation(show);
}
}
});
btn_mic.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (sv.getVisibility() == View.VISIBLE) {
final Animation hide = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.hide_video);
hide.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
sv.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
show_video.startAnimation(hide);
}
}
});
}
}
anim_footer.xml
<?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:id="#+id/parent"
android:background="#drawable/gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity">
<LinearLayout
android:id="#+id/show_video"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<RelativeLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#80000000">
<ImageButton
android:id="#+id/btn_camera"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_media_play" />
<ImageButton
android:id="#+id/btn_mic"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_delete" />
<ImageButton
android:id="#+id/btn_cat"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_toLeftOf="#id/btn_mic"
android:layout_toStartOf="#id/btn_mic"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_lock_lock" />
</RelativeLayout>
<SurfaceView
android:visibility="gone"
android:background="#drawable/photo"
android:id="#+id/camera_view"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
</RelativeLayout>
Animations:
show_video.xml
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:interpolator/accelerate_cubic"
android:startOffset="150"
android:fromYDelta="86%"
android:toYDelta="0"
android:fillAfter="true"
android:duration="2000"/>
hide_video.xml
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:interpolator/bounce"
android:fromYDelta="0"
android:toYDelta="85%"
android:duration="1500"/>

Button overlayed on a GridView does not respond to OnClick events

I have a screen in my app which displays some categories for the users to select, in a GridView, as following:
When a user clicks on a category, a button appears for the user to continue, as following:
The problem is, that the green button that appeared does not respond to #OnClick (I am using ButterKnife for views).
Here is the Layout xml:
activity_select_categories.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:id="#+id/g"
android:layout_height="match_parent" android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/h"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="22dp"
android:layout_marginBottom="22dp"
android:textSize="23sp"
android:text="CATEGORIES" />
<GridView
android:id="#+id/gridView_selectCategoriesLayout_categories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="2dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="2dp"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:visibility="gone"
android:clickable="true"
android:id="#+id/button_selectCategoriesLayout_continue"
android:alpha="0.8">
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#22c064"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_centerInParent="true"
android:background="#22c064"
android:src="#drawable/checkmark"
/>
</RelativeLayout>
Here is the custom grid view element:
grid_tem.xml
<com.entu.artapp.utils.SquareRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/root"
android:gravity="center_horizontal">
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_squareImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:visibility="invisible"
/>
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_selectedColor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e85349"
android:visibility="invisible"
android:alpha="0.45"
android:scaleType="centerCrop"/>
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_constantGrey"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:alpha="0.45"
android:scaleType="centerCrop"/>
<com.entu.artapp.utils.RectangularLinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/s"
android:orientation="vertical">
<ImageView
android:id="#+id/gridItem_selectedCheckMark"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/checkmark"
android:visibility="invisible"
/>
</com.entu.artapp.utils.RectangularLinearLayout>
<ProgressBar
android:id="#+id/gridItem_progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:visibility="visible"/>
<TextView
android:id="#+id/gridItem_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#ffffff"
android:textSize="15sp"
android:textAllCaps="true"
android:textStyle="bold"
android:visibility="invisible"/>
And here is how I set the OnClick for my button:
#OnClick(R.id.button_selectCategoriesLayout_continue)
public void setContinueButton () {
ParseUser.getCurrentUser().put("followedCategories", categoriesSelectedList);
ParseUser.getCurrentUser().put("followedCategoriesNames", categoriesNamesSelectedList);
ParseUser.getCurrentUser().saveInBackground();
}
Can anyone help me in solving why does the button not respond to OnClick?
ButterKnife.inject(this) has been called.
Extra: I have an alpha animation on the button. Although I am calling .setVisibility(VIEW.GONE), the button disappears, but the place where the button is/was cannot be clicked. I have read on similar topics on animations and VIEW.GONE conflicts that it might be a bug, and suggested using .clearAnimation(). But, if i call that, the alpha animation resets, and it messes up my UI.
Can anyone help me solve any of these problems?
Cheers!
EDIT #1: The code where i animated the button:
#InjectView(R.id.button_selectCategoriesLayout_continue)
RelativeLayout continueButton;
categoriesGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, final int position, long id) {
[...]
if (categoriesNamesSelectedList.size() == 0) {
deselectedAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
continueButton.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
continueButton.startAnimation(deselectedAnimation);
}
}

Your button inside the RelativeLayout steals the click event from the layout. You should delete the Button from the RelativeLayout (as you anyway don't use it) and set the background of the RelativeLayout instead of the button.