How to hold and drag (re-position) a layout along with its associated layouts in android

Question

I am making an android app. In which I have a scenario. First watch screen shot below so any one come here to answer has some clear picture that what I want.

Answer 1

1. Material way

   You can archive it(or, at least, very close to what you want) with CoordinatorLayout and keeping your map layout inside CollapsingToolbarLayout.

   Your layout can look like this:

   <android.support.design.widget.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
   
       <android.support.design.widget.CollapsingToolbarLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_scrollFlags="scroll|exitUntilCollapsed">
   
           <!-- MAP -->
           <RelativeLayout
               ...
               app:layout_collapseMode="parallax">
               .....
           </RelativeLayout>
           <!-- Toolbar -->
           <android.support.v7.widget.Toolbar
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               app:layout_collapseMode="pin" />
   
       </android.support.design.widget.CollapsingToolbarLayout>
   
      <!-- This red thingy, if you need it -->
       <View
            android:layout_width="match_parent"
            android:layout_height=".."/>
   </android.support.design.widget.AppBarLayout>
   
   <!--List Of your content items -->
   <android.support.v7.widget.RecyclerView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior" />
   

   You can read more here Android Design Support Library and here Design Support Library (III): Coordinator Layout

2. View.OnTouchListener way

   (This is the one you use)

   Idea is simple:

   • Set Map android:layout_above red separator & ListView - android:layout_below red separator
   • Once moving action done - translate separator respectively up or down and set proper top&bottom mangins

   Here's how it looks:

       public class MainActivity extends AppCompatActivity  implements View.OnTouchListener {
           private int _yDelta;
           @Override
           protected void onCreate(Bundle arg0) {
               super.onCreate(arg0);
               setContentView(R.layout.activity_main);
               findViewById(R.id.separator).setOnTouchListener(this);
           }
   
           @Override
           public boolean onTouch(View view, MotionEvent event) {
               final int Y = (int) event.getRawY();
               switch (event.getAction() & MotionEvent.ACTION_MASK) {
                   case MotionEvent.ACTION_DOWN:
                       RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                       _yDelta = Y - lParams.bottomMargin;
                       break;
                   case MotionEvent.ACTION_UP:
                       break;
                   case MotionEvent.ACTION_POINTER_DOWN:
                       break;
                   case MotionEvent.ACTION_POINTER_UP:
                       break;
                   case MotionEvent.ACTION_MOVE:
                       RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                       layoutParams.bottomMargin = (Y - _yDelta);
                       layoutParams.topMargin = -layoutParams.bottomMargin;
                       view.setLayoutParams(layoutParams);
                       view.animate().translationY(Y - _yDelta).setDuration(0);
                       break;
               }
               findViewById(R.id.root).invalidate();
               return true;
           }
       }
   

   And activity_main.xml:

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/root">
       <View
           android:background="#AA0F00FF"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_above="@+id/separator"/>
       <View
           android:layout_below="@+id/separator"
           android:background="#AA0FF000"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
       <View
           android:background="#FF0000"
           android:layout_centerVertical="true"
           android:id="@+id/separator"
           android:layout_width="match_parent"
           android:layout_height="20dp" />
   </RelativeLayout>
   

I hope, it helps!