Develop Reference

How do I keep animated components from "bouncing back" to their original positions after animation?

I want to make a CardView placed at the bottom of the window slide down when you switch modes, and slide back up when you go back into normal mode. The problem is that while the animation works fine, the card immediately reappears in the same spot it was in after the animation finishes. How do I get it to stay/freeze until I want to make it come back?
Here's my animation code for hiding the card (in card_hide_ani.xml):
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="#android:anim/decelerate_interpolator">
<translate
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="500" />
</set>
...and the method that hides the card in MainActivity.java (called from button tap)
void HideCard(Context context) {
CardView cardView = findViewById(R.id.cardView);
Animation cardAni = AnimationUtils.loadAnimation(context, R.anim.card_hide_ani);
cardView.startAnimation(cardAni);
}
(I'd also like to animate the card's transparency/alpha, although I'm not entirely sure if that'll work for both the card and it's embedded components. I'll deal with that later, but right now I just want to get this working.)
Like I said, the animation part works fine, but the card "bounces" right back to where it was. I can't find anything that indicates why, and so far it's been frustrating. I'm assuming that I should have done it some other way, but I can't figure out what to do or how to go about doing it. Am I missing something here? Any help would be greatly appreciated. Thanks!
Visual demonstration of problem

If you want to try custom animation ( this will give you more control over animation), you can try this. I have tried both YAxis animation & Alpha animation together. This will give you context on how we can control item.
import android.animation.AnimatorSet
import android.animation.ValueAnimator
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.cardview.widget.CardView
class MainActivityF : AppCompatActivity() {
lateinit var downTextView: TextView
lateinit var upTextView: TextView
lateinit var cardview: CardView
private val cardViewOriginalY: Float by lazy { cardview.y }
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main_f)
downTextView = findViewById(R.id.down)
upTextView = findViewById(R.id.up)
cardview = findViewById(R.id.cardview)
downTextView.setOnClickListener { animateCardDown() }
upTextView.setOnClickListener { animateCardUp() }
}
private fun animateCardDown() {
val yAxisAnimator: ValueAnimator = ValueAnimator.ofFloat(cardViewOriginalY, cardViewOriginalY + cardview.height)
val alphaAnimator: ValueAnimator = ValueAnimator.ofFloat(1.0f, 0.5f)
with(yAxisAnimator) {
duration = 300L
addUpdateListener {
val currentY = it.animatedValue as Float
cardview.y = currentY
}
}
with(alphaAnimator) {
duration = 300L
addUpdateListener {
val currentAlpha = it.animatedValue as Float
cardview.alpha = currentAlpha
}
}
val animatorSet = AnimatorSet()
with(animatorSet) {
playTogether(yAxisAnimator, alphaAnimator)
start()
}
}
private fun animateCardUp() {
val yAxisAnimator: ValueAnimator = ValueAnimator.ofFloat(cardViewOriginalY + cardview.height, cardViewOriginalY)
val alphaAnimator: ValueAnimator = ValueAnimator.ofFloat(0.5f, 1.0f)
with(yAxisAnimator) {
duration = 300L
addUpdateListener {
val currentY = it.animatedValue as Float
cardview.y = currentY
}
}
with(alphaAnimator) {
duration = 300L
addUpdateListener {
val currentAlpha = it.animatedValue as Float
cardview.alpha = currentAlpha
}
}
val animatorSet = AnimatorSet()
with(animatorSet) {
playTogether(yAxisAnimator, alphaAnimator)
start()
}
}
}
xml file
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="DOWN ANIMATION"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:text="UP ANIMATION"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="100dp"
android:backgroundTint="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

It should be enough to add this line
android:fillAfter="true"
to your xml TranslateAnimation code. Since a TranslateAnimation not really animates the view itself, more like a bitmap representing the View on the screen, without that line the animation does not stay at the wanted position.
For general better and more dynamic animations check out ViewPropertyAnimator
This allows you to chain multiple animations together in one line of code, as well as it really animates the View's property itself on the screen, other than the xml TranslateAnimation, which like mentioned above, only moves the pixels on the screen, not the View itself.
This should also get you started with your other (alpha) animation plans.

Scrollview flashing when inflating view and calling scrollBy

I am developing an Android application where an activity displays content in a scrollview. At the top of the content there is a placeholder for an image to be displayed. The image is downloaded from the Internet and may take a few seconds until it is ready to be displayed. The image placeholder is initially empty. When the image is downloaded, it is dynamically added to the placeholder.
Initially I had the following problem.
The user starts the activity and scrolls down
The image starts to download in the background. When available, it is added to the placeholder
When the image is added to the placeholder, the contents of the scrollview change and the user experience is disrupted by the unwanted scrolling that occurs
To fix this, I added code to adjust the scroll position once the image view is added to the placeholder. The problem with this is that a flickering is caused on the scrollview during the display-image and adjust-scrollview process. The reason is that the scrollBy function is called from a runnable. Calling scrollBy outside the runnable does not cause flickering but the scroll position is incorrect - the reason for this is that there is not enough time for the items on the scroll view to recalculate/measure their dimensions/heights.
Here is a sample application the illustrates this problem:
public class MainActivity extends AppCompatActivity {
ScrollView scrollView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
scrollView = findViewById(R.id.scrollview);
startImageDownload();
simulateImageScroll();
}
private void simulateImageScroll() {
// scroll to the bottom of the scroll view
scrollView.post(new Runnable() {
#Override
public void run() {
scrollView.scrollTo(0, scrollView.getMaxScrollAmount());
}
});
}
private void startImageDownload() {
Handler handler = new Handler(getMainLooper());
// simulate a delay for the image download to illustrate the flashing problem in the scrollview
handler.postDelayed(new Runnable() {
#Override
public void run() {
displayImage("");
}
}, 2000);
}
// when the image is downloaded we add it to the image container
private void displayImage(String imageFilename) {
// dynamically create an image and add it to the image container layout
RelativeLayout container = findViewById(R.id.imageContainer);
ImageView img = new ImageView(this);
// image should be loaded from the given filename - for now use a solid background and fixed height
img.setBackgroundColor(Color.BLUE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, 500);
container.addView(img, params);
adjustScrolling(container);
}
private void adjustScrolling(RelativeLayout container) {
// adjust scroll if the image is loaded before the current content
if (scrollView.getScrollY() > container.getTop()) {
container.measure(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
final int amountToScroll = container.getMeasuredHeight();
// the following does not cause flickering but scrolls to the wrong position
//scrollView.scrollBy(0, amountToScroll);
// adjust the scrollview so that it keeps the current view unchanged
scrollView.post(new Runnable() {
#Override
public void run() {
// this causes flickering but scrolls to the correct position
scrollView.scrollBy(0, amountToScroll);
}
});
}
}
}
And here is the layout file:
<ScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/imageContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="#aa0000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:textColor="#ffffff"
android:textSize="128dp"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
Any ideas on how to fix this problem?

Edited:
Currently, your layout is flickering, because adding blue view cause redraw layout (and scroll). So scroll occurred once, and next you scrolled to the position you want. That's the second moving.
To solve this problem, you need to know how android draws view.
https://developer.android.com/guide/topics/ui/how-android-draws.html
Simply, onMeasure() - onLayout() - onDraw(). And you can add your layout code between onLayout() and onDraw(), by ViewTreeObserver().addOnGlobalLayoutListener().
https://developer.android.com/reference/android/view/ViewTreeObserver.OnGlobalLayoutListener.html
ps: I still recommend using nice and lovely image library, Picasso.
Fixed code is: Set scroll before draw() called. By this, you can draw only once.
public class MainActivity extends AppCompatActivity {
ScrollView scrollView;
int amountToScroll = 0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
scrollView = findViewById(R.id.scrollview);
scrollView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
scrollView.scrollBy(0, amountToScroll);
amountToScroll = 0;
}
});
startImageDownload();
simulateImageScroll();
}
private void simulateImageScroll() {
// scroll to the bottom of the scroll view
scrollView.post(new Runnable() {
#Override
public void run() {
scrollView.scrollTo(0, scrollView.getMaxScrollAmount());
}
});
}
private void startImageDownload() {
Handler handler = new Handler(getMainLooper());
// simulate a delay for the image download to illustrate the flashing problem in the scrollview
handler.postDelayed(new Runnable() {
#Override
public void run() {
displayImage("");
}
}, 2000);
}
// when the image is downloaded we add it to the image container
private void displayImage(String imageFilename) {
// dynamically create an image and add it to the image container layout
RelativeLayout container = findViewById(R.id.imageContainer);
ImageView img = new ImageView(this);
// image should be loaded from the given filename - for now use a solid background and fixed height
img.setBackgroundColor(Color.BLUE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, 500);
container.addView(img, params);
adjustScrolling(container);
}
private void adjustScrolling(RelativeLayout container) {
// adjust scroll if the image is loaded before the current content
if (scrollView.getScrollY() > container.getTop()) {
container.measure(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
amountToScroll = container.getMeasuredHeight();
}
}
}
I strongly recommend using Picasso. http://square.github.io/picasso/
This one line will fix all of your problem.
Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);
You can load your local image file or network image (url) into your imageView.
In your case, remove both startImageDownload() and simulateImageScroll(), and on onResume(), call displayImage().
Fixed displayImage():
private void displayImage(String imageFilename) {
// dynamically create an image and add it to the image container layout
RelativeLayout container = findViewById(R.id.imageContainer);
ImageView img = new ImageView(this);
// image should be loaded from the given filename - for now use a solid background and fixed height
img.setBackgroundColor(Color.BLUE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, 500);
container.addView(img, params);
Picasso.with(this).load(imageFilename).into(img);
adjustScrolling(container);
}
Or, if you want to solve this problem directly for academic reasons,
Do not adjust your scroll. It seems that it is not a real solution to use scrollBy to fix your problem. The real cause is the code that cause the UI to redraw. May be calling invalidate() or something like that.
Adding ImageView programmatically is not a good idea. Because your RecyclerView or ViewHolder of ListView cannot reuse the view, so it cause degrade performance. If you can avoid it, do that. (eg. use xml)
It seems that adding your ImageView to imageContainer is real problem. imageContainer has android:layout_height="wrap_content" property, and this means it has no fixed height, it depends on it's own child. Try to change to fixed value, for example: android:layout_height="500dp"

Well first if it's a single image on top then you don't have to create imageview dynamically just use it inside your XML file without Relative-layout. set to an default image. Use Image-View with adjustViewBounds="true" and scaleType="fitCenter" then you don't have to worry about the image scaling.
<ImageView
android:id="#id/img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter" />
you can use Picasso http://square.github.io/picasso/ library as suggested by "Stanley Kou" for loading the image.

My Suggestion is to use Progress Bar, Start the Progress bar when image starts downloading and hide it once the image load is complete then let the user see the activity.
<ProgressBar
android:id="#+id/indeterminateBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
For more details, please check -
https://developer.android.com/reference/android/widget/ProgressBar.html

android: display an image in the middle of the screen programatically

I've an image (image1.png)
When I click on some button, I want this image to be displayed in the middle of the screen for a second and disappear. How can I do it?
I guess that it brings me the center coordinates of the screen.
public void onClick(View button) {
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics( dm );
int screenMiddlePointWidth = dm.widthPixels / 2;
int screenMiddlePointHeight = dm.heightPixels / 2;
}
p.s. I don't want the image to push other views on the screen so I can't set it as invisible\gone

Hi use this code in xml to place your image in center
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myapplication.MainActivity"
tools:showIn="#layout/activity_main">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image1"
android:layout_centerInParent="true"/>
</RelativeLayout>
and then in java file use the following code
ImageView img;
img=(ImageView)findViewById(R.id.imgview);
CountDownTimer timer = new CountDownTimer(1000, 1000) {
#Override
public void onTick(long millisUntilFinished) {
}
#Override
public void onFinish() {
img.setVisibility(View.GONE);
}
};
timer.start();
you can use the timer code in onCreate method or anywhere you want.
If you want to center your image programatically use the following code.
image.setBackgroundResource(R.drawable.image1);
LayoutParams params = (LayoutParams) image.getLayoutParams();
params.gravity = Gravity.CENTER;
img.setLayoutParams(params);

How to add a one-side border and background into one drawable?

I have an ImageButton and to that in the android:background property I currently have a xml drawable which changes the ImageButton background color when pressed. This is all good but I also want to add a top border to each of these ImageButton's.
Here's a sample image I created to better get my point across.
These buttons will also have an active state which indicates the current active button and I can set that as a drawable using Java code.

You can use multiple drawables to get your work done. You can have drawable icons/images with the top border and the same without the top border and use the setBackgroundResource method to switch image backgrounds. (I believe you want to show the images with top border as currently selected tool icon, right?).
As you're going to construct several such image buttons like a toolbox, you'll have to make sure their selection states are controlled properly. If one image-button is selected all others should show the unselected drawable.
I threw together some codes and built this small example. Hope you'll find it useful.
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageButton imButton1 = (ImageButton) findViewById(R.id.imButton1);
final ImageButton imButton2 = (ImageButton) findViewById(R.id.imButton2);
final ImageButton imButton3 = (ImageButton) findViewById(R.id.imButton3);
imButton1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_selected);
imButton2.setBackgroundResource(R.drawable.icon2_unselected);
imButton3.setBackgroundResource(R.drawable.icon3_unselected);
}
});
imButton2.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_unselected);
imButton2.setBackgroundResource(R.drawable.icon2_selected);
imButton3.setBackgroundResource(R.drawable.icon3_unselected);
}
});
imButton3.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_unselected);
imButton2.setBackgroundResource(R.drawable.icon2_unselected);
imButton3.setBackgroundResource(R.drawable.icon3_selected);
}
});
}
}
And this is it's Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bbb"
tools:context="${packageName}.${activityClass}" >
<ImageButton
android:id="#+id/imButton1"
android:layout_toLeftOf="#+id/imButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:layout_alignTop="#+id/imButton2"
android:background="#drawable/icon1_unselected" />
<ImageButton
android:id="#id/imButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="23dp"
android:layout_alignParentTop="true"
android:background="#drawable/icon2_selected" />
<ImageButton
android:id="#+id/imButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imButton2"
android:layout_toRightOf="#id/imButton2"
android:background="#drawable/icon3_unselected" />
</RelativeLayout>
A screen-shot of the image buttons working.
Hope this helps.

I solved it by creating two seperate drawable xml files such that one has a top border and white color background and other one has same color border with a bit grey background. Then in the selector xml file all I had to do was assign each of these xml files to their respective states and problem solved. :)

try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="-6dp"
android:right="-6dp"
android:bottom="-6dp">
<shape>
<stroke
android:width="5dp"
android:color="#6c6c6c" />
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>

hey you may use view for border like that,you put this in your all side of your image view then you can see,
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000" />
whatever color you want to use. thanks

Slide in (over) activity

Currently I'm trying to implement something in my app where I really don't know where to start.
Have a look at this little image:
You can find the app in play store here: https://play.google.com/store/apps/details?id=com.imano.euro2012.row
In my app, I have a listview and when i tap on an item I want to slide in the black activity in to about 3/4. In that activity I want to have some llistview item specific options.
Any one knows how to solve this?
Solution:
Thanks to Imran-Khan I got it working.
But I think this code is not perfect. I'm not sure if the width and height calculation in the first half of the showPopup() method is correct. And in my solution the popup has on the bottom and on the right a little margin. I don't know right now why this happens. Maybe someone can help...
Here is what I did so far:
First I added the method showpopup(long selectedItem) to my listview:
lv_timer.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parentView, View childView, int position, long id) {
showPopup(id);
}
});
and the method itself:
private void showPopup(long selectedItem) {
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
int popupWidth = (width / 4) * 3;
int popupHeight = height;
LinearLayout viewGroup = (LinearLayout) findViewById(R.id.ll_timer_prop);
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(R.layout.timer_properties, viewGroup);
final PopupWindow popup = new PopupWindow(this);
popup.setContentView(layout);
popup.setWidth(popupWidth);
popup.setHeight(popupHeight);
popup.setFocusable(true);
popup.showAtLocation(layout, Gravity.NO_GRAVITY, width - (width / 4 * 3), 0);
TextView tv_item = (TextView) layout.findViewById(R.id.tv_item);
tv_item.setText("Clicked Item ID: " + selectedItem);
}
This is working fine for me.
for the slide in part I've found this thread: PopupWindow animation not working
I added
popup.setAnimationStyle(R.style.AnimationPopup);
before the showAtLocation() call, created a res/anim directory an created two XML files in it: popup_show.xml and popup_hide.xml
popup_show.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="100%" android:pivotY="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>
popup_hide.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1.0" android:toXScale="0.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="100%" android:pivotY="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>

You can create this view using custom PopupWindow
see this tutorial for Creating Custom PopupWindow
How to create popups in Android

You can use QuickAction For such behaviour, Like shown on third screen
Edit
Sorry I have not paid attention for the fact that you want a sliding from right to left effect, But I think you can try to customise slidindrawer in Android API to make slide from right to left.

Funny, I'm actually looking at the same problem right now.
I've found this topic:
Android Facebook style slide
Some nice examples in there.