In this tutorial, we will learn to move layout view from one position to another position. We are using Draggable Layout, its a user interface which elements can rearrange from one position to another position. To drag an element just press over the view and move it from place to another place.
Follow some steps to implement this functionality:
Step-1:- To implement this functionality, we will download a library from the following URL.
https://www.dropbox.com/s/41dw9mw7puo58g9/library.zip?dl=0
Step-2:- Now unzip download file and put into your project directory. Open app build.gradle file and add this library as a dependency. Use the following code to add this library.
dependencies {
compile project(':library')
}
Step-3:- Now we need to add RearrangeableLayout in your activity_main.xml file. Add some more view to test dragging the view such as a Button, TextView, ImageView.
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="app.rearrangeablelayout.MainActivity">
<com.rajasharan.layout.RearrangeableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/rearrangeable_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:outlineWidth="2dp"
app:outlineColor="#00FFFF"
app:selectionAlpha="0.5"
app:selectionZoom="1.2">
<!-- add child views with `android:id` attr to
save position during orientation change -->
<TextView
android:id="@+id/texview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample Demo"
android:textSize="30sp"
android:background="@android:color/darker_gray"
android:layout_margin="15dp" />
<TextView
android:id="@+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample Demo with very large text that will overflow in width"
android:textSize="30sp"
android:background="@android:color/holo_green_light"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:textSize="30sp"
android:layout_margin="15dp"/>
<TextView
android:id="@+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample"
android:textSize="15sp"
android:background="@android:color/holo_orange_light"
android:layout_margin="15dp"/>
</com.rajasharan.layout.RearrangeableLayout>
</RelativeLayout>
Step-4:- We need to initialize RearrangeableLayout object in MainActivity onCreate() method and use its instance to get updated child view while its dragged.
private RearrangeableLayout root;
// initialize the RearrangeableLayout object
root = (RearrangeableLayout) findViewById(R.id.rearrangeable_layout);
Step-5:- we will implement position listeners to listen on the child view position changes. It will give received updated position of child view after child view is dragged.
// callback method to call childPositionListener() method from onCreate() method.
/**
* Added a ChildPositionListener to the root layout to receive
* position of child view whenever any child view is dragged
*/
public void childPosiitonListener(){
root.setChildPositionListener(new RearrangeableLayout.ChildPositionListener() {
@Override
public void onChildMoved(View childView, Rect oldPosition, Rect newPosition) {
Log.e(TAG, childView.toString());
Log.e(TAG, oldPosition.toString() + " -> " + newPosition.toString());
}
});
}
Step-6:- To receive updated position of child view while it is being dragged, we need to add addOnPreDrawListener to the root layout.
// callback method to call preDrawListener() method from onCreate() method
/**
* In this method, Added a PreviewListener to the root layout to receive update during
* child view is dragging
*/
public void preDrawListener(){
root.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
Log.e(TAG, "onPrepreview");
Log.e(TAG, root.toString());
return true;
}
});
}
0 Comment(s)