底部的对话框幻灯片-Android

Question

I want to show a dialog similar to the one that Google Maps app shows when the user select a place on the map. You can see it in Figure 1, Figure 2 and Figure 3. This dialog is like a Fragment which I can show in fullscreen and partial mode and I can slide out when I don't want to see it anymore. In this moment I only have a dialog with an animation that have a style when a dialog is prompted and another one when the dialog is dismissed, which you can see in Figure 4. This is not the expected behaviour because I want to interact with the dialog and not apply a simple animation.

Questions

1. I think the Google Maps dialog is like a Fragment, but I don't know how I can to show it partially and then show it in fullscreen mode. ¿Can I do this with a Fragment? ¿Can I deactivate the slide of the ViewPager parent only to this Fragment?

2. ¿Do you have any other suggestion to do a dialog like the Google Maps app's dialog?

Thanks.

Figure 1

Figure 2

Figure 3

Figure 4

Answer 1

I solved my problem adapting some elements of this (thanks to Saif Hamed) and managing touch events to animate the dialog. It's not perfect because the animation is not very fluid but it works. This is the code involved:

i) I overlay the dialog layout to the camera layout

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@+id/cameraPreviewFrame"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <!-- Camera Preview -->

            <com.easyshopping.activities.CameraPreview
                android:id="@+id/cameraSurfaceView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </com.easyshopping.activities.CameraPreview>

            <!-- Dialog layout -->

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/layoutDialogProduct"
                android:layout_gravity="center_horizontal"
                android:background="@color/white"
                android:orientation="vertical" >

                <LinearLayout
                    android:id="@+id/layoutUpRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="30dp"
                    android:orientation="horizontal" >

                    <TextView
                        android:id="@+id/textViewLabelNickname"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="@string/label_register_nickname" />

                    <EditText
                        android:id="@+id/editTextNickname"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:ems="10"
                        android:inputType="textPersonName" >
                    </EditText>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/layoutMediumRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/layoutUpRegister"
                    android:layout_marginTop="20dp" >

                    <TextView
                        android:id="@+id/textViewLabelEmail"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="@string/label_register_email" />

                    <EditText
                        android:id="@+id/editTextEmail"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="45dp"
                        android:ems="10"
                        android:inputType="textEmailAddress" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/layoutBottomRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/layoutMediumRegister"
                    android:layout_marginTop="20dp" >

                    <TextView
                        android:id="@+id/textViewLabelPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="@string/label_register_password" />

                    <EditText
                        android:id="@+id/editTextPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:ems="10"
                        android:inputType="textPassword" />
                </LinearLayout>

                <Button
                    android:id="@+id/btnOkRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_below="@+id/layoutBottomRegister"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="40dp"
                    android:text="@string/positive_button" />

                <Button
                    android:id="@+id/btnCancelRegister"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/layoutBottomRegister"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="40dp"
                    android:text="@string/negative_button" />
            </RelativeLayout>
    </LinearLayout> 

ii) Animation and touch events

// DIALOG SLIDER

    // Effects when overlay layout
    final OvershootInterpolator intp = new OvershootInterpolator();

    // Animation duration
    final int d = getResources().getInteger(android.R.integer.config_shortAnimTime);

    // Dialog layout
    final RelativeLayout layoutDialogProduct = (RelativeLayout) rootView.findViewById(R.id.layoutDialogProduct);

    // ViewTreeObserver of dialog to get its height
    ViewTreeObserver vto = rootView.findViewById(R.id.layoutDialogProduct).getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

        @Override
        public void onGlobalLayout() {
            // TODO Auto-generated method stub

            headerDialogHeight = rootView.findViewById(R.id.layoutDialogProduct).getHeight();

            // Removel OnGlobalLayoutListener
            ViewTreeObserver obs = rootView.findViewById(R.id.layoutDialogProduct).getViewTreeObserver();

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                obs.removeOnGlobalLayoutListener(this);
            } else {
                obs.removeGlobalOnLayoutListener(this);
            }

            // ViewTreeObserver of cameraview to get its height

            ViewTreeObserver vto2 = mPreview.getViewTreeObserver();
            vto2.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

                @Override
                public void onGlobalLayout() {
                    // TODO Auto-generated method stub
                    heightCameraView = mPreview.getHeight();

                    // Get spacing error when show the dialog
                    int tY = heightCameraView - headerDialogHeight;

                    // Remove ViewTreeObserver
                    ViewTreeObserver obs2 = mPreview.getViewTreeObserver();

                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                        obs2.removeOnGlobalLayoutListener(this);
                    } else {
                        obs2.removeGlobalOnLayoutListener(this);
                    }

                    //Do animation
                    layoutDialogProduct.animate().translationY(tY).setDuration(d).setInterpolator(intp).start();

                }
            });

        }
    });

    layoutDialogProduct.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            // TODO Auto-generated method stub
            viewPager.setmIsUnableToDrag(false);

            // float x = event.getX();
            float y = event.getY();

            switch (event.getAction()) {

                case MotionEvent.ACTION_MOVE : {
                    // Hacer la animación

                    if (headerDialogHeight - y <= headerDialogHeight) {
                        layoutDialogProduct.animate().translationY(heightCameraView - headerDialogHeight + y)
                                .setDuration(d).setInterpolator(intp).start();
                    }

                    break;
                }
            }

            viewPager.setmIsUnableToDrag(true);
            return true;
        }
    });

Screenshots