1

I am adding a feature that resembles, Facebook Messenger 'ChatHeads', or Musixmatch lyrics feature.

I have a service that creates a floating notification bubble (like Messenger chathead). I am inflating a layout and adding that view to the window manager.

final WindowManager.LayoutParams params = new WindowManager.LayoutParams(
                900,
                1400,
                WindowManager.LayoutParams.TYPE_PHONE,
                WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
                PixelFormat.TRANSLUCENT);

LayoutInflater inflater = (LayoutInflater) this.getSystemService( this.LAYOUT_INFLATER_SERVICE );
mView = inflater.inflate(R.layout.floating, null);

windowManager.addView(mView, params); 

This is the layout file :

<RelativeLayout
android:id="@+id/outerRelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:animateLayoutChanges="true" >

<ImageButton
    android:id="@+id/imagebutton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/shape_circular"
    android:src="@drawable/launcher"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="16dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"
    android:paddingBottom="8dp"
    android:paddingLeft="8dp"
    android:paddingTop="8dp"
    android:paddingRight="8dp"
    android:foregroundGravity="center_vertical|center_horizontal"/>


<RelativeLayout
    android:id="@+id/innerRelativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/imagebutton"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:layout_alignParentBottom="true"
    android:background="@drawable/shape_reound_edges_black">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="CONTINUE"
        android:textSize="12sp"
        android:textColor="#FFFFFF"
        android:background="@drawable/shape_round_edges"
        android:layout_marginLeft="8dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:layout_alignParentBottom="true"/>

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/button"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/shape_round_edges"/>

</RelativeLayout>

The imagebutton in the layout acts as the floating notification button.

I've added an OnTouchListener to the imagebutton that helps me move this layout. Also when I click on the button, the innerRelativeLayout's visibility is set to GONE. But the root relative layout remains and so the imagebutton cannot be moved much. How do I achieve complete movement for the floating imagebutton.

Code for OnTouchListener:

chatHead.setOnTouchListener(new View.OnTouchListener() {
            private int initialX;
            private int initialY;
            private float initialTouchX;
            private float initialTouchY;

            @Override public boolean onTouch(View v, MotionEvent event) {
                    if (gestureDetector.onTouchEvent(event)) {
                        if (isLayoutVisible) {
                            mInnerLayout.setVisibility(View.GONE);
                            isLayoutVisible = false;
                        } else {
                            mInnerLayout.setVisibility(View.VISIBLE);
                            isLayoutVisible = true;
                        }
                        return true;
                    } else {
                        switch (event.getAction()) {
                            case MotionEvent.ACTION_DOWN:
                                initialX = params.x;
                                initialY = params.y;
                                initialTouchX = event.getRawX();
                                initialTouchY = event.getRawY();
                                return true;
                            case MotionEvent.ACTION_UP:
                                return true;
                            case MotionEvent.ACTION_MOVE:
                                params.x = initialX + (int) (event.getRawX() - initialTouchX);
                                params.y = initialY + (int) (event.getRawY() - initialTouchY);
                                windowManager.updateViewLayout(mView, params);
                                return true;
                        }
                    }
                return false;
            }
        });

Thanks in advance!

Nikhil
  • 3,711
  • 8
  • 32
  • 43
Arjun Issar
  • 672
  • 4
  • 13
  • 32

0 Answers0