DraggableView is an Android library to make floating draggable view easily using extensions on Kotlin & provided utils class on Java
License: MIT License
I'm Wahyu, a Software Engineer handling mobile development specifically on Android with 5+ years of experience in the startup industry. I was a Google Certified Associate Android Developer from 2019 until 2022. Currently focusing and passionately learning best practices of native Android apps development with Kotlin, Multi Module App Architecture, SOLID & Clean Code, essentially things that make a great software engineer.
Hi Developer
Thanks for sharing the DraggableView library, it is very convenient.
But I found a bug when I use makeDraggable on an overlay view.
Here is an example that I make an overlay TextView with DraggableView.
private void InitialTextView(){
floatingLuxView = new TextView(this);
floatingLuxView.setText("Hi I am a overlay View");
floatingLuxView.setTextColor(Color.rgb(255, 255, 0));
floatingLuxView.setTextSize(32f);
floatingLuxView.setShadowLayer(10, 5, 5, Color.rgb(56, 56, 56));
DraggableUtils.makeDraggable(floatingLuxView);
windowManager = (WindowManager)getSystemService(WINDOW_SERVICE);
int LAYOUT_FLAG;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
} else {
LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_PHONE;
}
params = new WindowManager.LayoutParams(
WindowManager.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.WRAP_CONTENT,
LAYOUT_FLAG,
WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN |
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSLUCENT);
params.gravity = Gravity.TOP|Gravity.LEFT;
}
Then the App crash and show ClassCastException:
java.lang.ClassCastException: android.view.ViewRootImpl cannot be cast to android.view.View
at io.github.hyuwah.draggableviewlib.DraggableUtils$makeDraggable$1.onTouch(Extensions.kt:24)
Which point to the below code.
setOnTouchListener { v, event ->
val viewParent = v.parent as View
val parentHeight = viewParent.height
It mentioned that the parent of the TextView I made is a ViewRootImpl not a View.
I am not pretty sure how to fix it in a good way, may I consult your idea ?
Im using
DraggableUtils.makeDraggable(ivLeft, Draggable.STICKY.NONE, true);
and i need to show getX() and getY() in a textviw when position changed.
I'm trying to make two imageviews draggable inside a constraint layout
I tried 2 approaches but both failed.
Approach 1
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
@SuppressLint("NewApi")
@Override
public void onGlobalLayout() {
//never gets called except on activity created
x = ivLeft.getX()
y = ivLeft.getY()
}
});
Approach 2
ivLeft.setOnDragListener(new View.OnDragListener() {
@Override
public boolean onDrag(View v, DragEvent event) {
//never gets called
x = event.getX()
y = event.getY()
return false;
}
});
fragment_cm.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorWhite">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/mPublisherViewContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constTop"
android:layout_width="match_parent"
android:layout_height="@dimen/_50sdp"
android:background="@color/colorPink"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.app.readyb.customview.textview.CustomTextAxiReg
android:id="@+id/txtTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_10sdp"
android:text="@string/time_left"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_10ssp"
app:layout_constraintBottom_toTopOf="@+id/txtTimeUpdate"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.app.readyb.customview.textview.CustomTextAxiReg
android:id="@+id/txtTimeUpdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/_5sdp"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_25ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ProgressBar
android:id="@+id/progressClock"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="@dimen/_3sdp"
android:progressDrawable="@drawable/progress_black_pink"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/_10sdp"
android:gravity="center"
android:orientation="vertical"
app:cardElevation="@dimen/_10sdp"
app:cardPreventCornerOverlap="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="@+id/linearTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorLightRed"
android:clickable="true"
android:focusable="true"
android:gravity="center"
android:orientation="vertical"
android:padding="@dimen/_5sdp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/add_time" />
<com.app.readyb.customview.textview.CustomTextAxiReg
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_3sdp"
android:text="@string/add_time_video"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_10ssp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rclLiveVideo"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constTop" />
<com.app.readyb.customview.textview.CustomTextAxiBold
android:id="@+id/txtRecording"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
android:gravity="center_horizontal"
android:textColor="@color/colorRed"
android:textSize="@dimen/_12ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constTop" />
<ImageView
android:id="@+id/imgNoVideoAttendees"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_10sdp"
android:src="@drawable/no_participant"
app:layout_constraintBottom_toTopOf="@+id/txtNoVideoAttendees" />
<com.app.readyb.customview.textview.CustomTextAxiReg
android:id="@+id/txtNoVideoAttendees"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_12ssp"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imgNoVideoAttendees"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:id="@+id/relPublisherView"
android:layout_width="@dimen/_60sdp"
android:layout_height="@dimen/_70sdp"
android:layout_margin="@dimen/_3sdp"
android:layout_gravity="top"
android:gravity="center"
android:background="@drawable/border_green_lvs"
android:padding="@dimen/_1sdp" />
<include layout="@layout/bottom_sheet_persistent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
bottom_sheet_persistent.xml
<?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"
android:id="@+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
app:behavior_hideable="false"
app:behavior_peekHeight="@dimen/_10sdp"
app:layout_behavior="@string/bottom_sheet_behavior"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintSlideUp"
android:layout_width="match_parent"
android:layout_height="@dimen/_10sdp"
app:layout_constraintTop_toTopOf="parent"
android:alpha="0.7"
android:background="@color/colorPopupTransparent">
<com.app.readyb.customview.button.CustomButtonAxiBold
android:id="@+id/btnSlideUp"
android:layout_width="@dimen/_50sdp"
android:layout_height="@dimen/_3sdp"
android:layout_gravity="center"
android:background="@drawable/layout_round_camera"
android:gravity="center"
android:textAllCaps="false"
android:textSize="@dimen/_14ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintMessage"
android:layout_width="match_parent"
android:layout_height="@dimen/_180sdp"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="@+id/constraintSlideUp">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rclMessages"
android:layout_width="match_parent"
android:layout_height="@dimen/_125sdp"
android:layout_marginStart="@dimen/_15sdp"
android:layout_marginTop="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_15sdp"
android:layout_marginBottom="@dimen/_10sdp"
android:background="@android:color/white"
app:layout_constraintBottom_toTopOf="@+id/edtMessage"
app:layout_constraintStart_toStartOf="parent" />
<com.app.readyb.customview.editview.MessagingEditAxiReg
android:id="@+id/edtMessage"
android:layout_width="0dp"
android:layout_height="@dimen/_35sdp"
android:layout_centerInParent="true"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginTop="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_5sdp"
android:layout_marginBottom="@dimen/_10sdp"
android:background="@drawable/border_gray_rectangle"
android:gravity="center_vertical"
android:hint="@string/write_a_message"
android:maxHeight="@dimen/_70sdp"
android:paddingStart="@dimen/_5sdp"
android:paddingEnd="@dimen/_5sdp"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_13ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imgSend"
app:layout_constraintStart_toStartOf="parent" />
<ImageButton
android:id="@+id/imgSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/_15sdp"
android:layout_marginBottom="@dimen/_16sdp"
android:background="@color/colorWhite"
android:src="@drawable/disable_send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintParticipants"
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="@dimen/_170sdp"
app:layout_constraintTop_toBottomOf="@+id/constraintSlideUp">
<com.app.readyb.customview.textview.CustomTextAxiBold
android:id="@+id/txtParticipants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_15sdp"
android:text="@string/participants"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_14ssp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/rclAttendees"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.app.readyb.customview.textview.CustomTextAxiBold
android:id="@+id/txtOnlineParticipants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/_15sdp"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_14ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/imgNoAttendees"
android:layout_width="@dimen/_50sdp"
android:layout_height="@dimen/_50sdp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="@dimen/_50sdp"
android:src="@drawable/no_participant"
app:layout_constraintBottom_toTopOf="@+id/txtNoAttendees"/>
<com.app.readyb.customview.textview.CustomTextAxiReg
android:id="@+id/txtNoAttendees"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/no_attendies"
android:textColor="@color/colorBlack"
android:textSize="@dimen/_12ssp"
android:layout_marginTop="@dimen/_10sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintTop_toBottomOf="@+id/imgNoAttendees"
app:layout_constraintStart_toStartOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rclAttendees"
android:layout_width="match_parent"
android:layout_height="@dimen/_140sdp"
android:layout_marginStart="@dimen/_15sdp"
android:layout_marginTop="@dimen/_10sdp"
android:visibility="gone"
android:layout_marginEnd="@dimen/_15sdp"
android:layout_marginBottom="@dimen/_10sdp"
android:background="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtParticipants" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintEvents"
android:layout_width="match_parent"
android:layout_height="@dimen/_40sdp"
app:layout_constraintTop_toBottomOf="@+id/constraintParticipants">
<ImageView
android:id="@+id/imgChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
android:src="@drawable/image_chat"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imgParticipants"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/imgParticipants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
android:src="@drawable/image_attendee"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imgVideoRecording"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgChat"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/imgVideoRecording"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
android:src="@drawable/image_recording"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imgUnMute"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgParticipants"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/imgUnMute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
android:src="@drawable/image_mute_unmute"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imgCamera"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgVideoRecording"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/imgCamera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
android:src="@drawable/camera_flip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgUnMute"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.app.readyb.customview.button.CustomButtonAxiReg
android:id="@+id/btnPause"
android:layout_width="0dp"
android:layout_height="@dimen/_40sdp"
android:background="@color/colorBgOffGray"
android:gravity="center"
android:singleLine="true"
android:text="@string/pause"
android:textAllCaps="true"
android:textSize="@dimen/_15ssp"
app:layout_constraintTop_toBottomOf="@+id/constraintEvents"
app:layout_constraintEnd_toStartOf="@+id/btnEndService"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintStart_toStartOf="parent"/>
<com.app.readyb.customview.button.CustomButtonAxiReg
android:id="@+id/btnEndService"
android:layout_width="0dp"
android:layout_height="@dimen/_40sdp"
android:background="@color/colorBlack"
android:gravity="center"
android:text="@string/end_service"
android:textAllCaps="true"
android:textColor="@color/colorWhite"
android:textSize="@dimen/_15ssp"
app:layout_constraintTop_toBottomOf="@+id/constraintEvents"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintStart_toEndOf="@+id/btnPause"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When i try to add onClickLongListener to draggableview it dows not work. Can Someone help me?
I would like if someone make it. I'm new to android, so i have no idea about it.
Currently this draggable view only extend from ImageView, it should have the ability to be used on any view (i.e. LottieAnimationView, or some complex viewgroup)
https://app.leanboard.io/board/4b54a126-62aa-4c5d-9906-7d1852933a87
how disable a draggable view after dragging?
How to drag over other items?
Hi, thanks for the nice library.!!
I was successfully implement this library for the ImageView, but I am unable to implement it for CameraX PreviewView. What I want to achieve is provide a thumbnail video preview that user can move it around the screen.
thanks in advance for any suggestions.
Hi,
If we make a view draggable and its parent layout/root layout being a vertical scroll view.
then we can only move dragabble view horizontally , if we try to move it vertically it scrolls the activity.
I thought of disabling and enable back scroll view using onTouchListener (using MotionEvent.ACTION_DOWN and MotionEvent.ACTION_UP) but onTouchListener do not work if we make any view as dragabble
although even if scroll view is disabled, dragabble view still do not move vertically.
i tried disabling the scroll view like below
scrollView.setOnTouchListener(new View.OnTouchListener()
{
@Override
public boolean onTouch(View v, MotionEvent event)
{
return true;
}
});
any work around for this?
Thanks & Regards
Prakash
Hi.
I'm using Android java project.
Can you convert this lib to java code.
Thanks for good lib.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.