Bottom Sheet Dialog Like Google

Like Google News, Google Profile Switch

Bottom Sheet Dialog

CreateTaskDialogFragment.java

@SuppressLint("ValidFragment")
public class CreateTaskDialogFragment extends BottomSheetDialogFragment implements View.OnClickListener {

    private BottomSheetDialog dialog;
    private ContextThemeWrapper contextThemeWrapper;
    private EditText editText;
    private TextView mainTitle;
    private ImageView btnClose;
    private CardView buttonSubmit;
   // private OnNewTaskCreated onNewTaskCreated;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        contextThemeWrapper = new ContextThemeWrapper(getActivity(), R.style.BottomSheetTheme);
        View view = inflater.cloneInContext(contextThemeWrapper).inflate(R.layout.dialog_fragment_create_task, container, true);
        // new KeyboardUtils(getActivity(), view.getRootView());
        onNewTaskCreated = (OnNewTaskCreated) getActivity();
        initaliseView(view);
        initaliseListener();
        return view;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        dialog = new BottomSheetDialog(getContext(), R.style.BottomSheetTheme);

        dialog.setCancelable(true);
        dialog.setCanceledOnTouchOutside(true);
        return dialog;
    }

    private void initaliseListener() {
        buttonSubmit.setOnClickListener(this);
        btnClose.setOnClickListener(this);
    }

    private void initaliseView(View view) {
        editText = view.findViewById(R.id.edit_text);
        mainTitle = view.findViewById(R.id.header_sub_title);
        buttonSubmit = view.findViewById(R.id.submit);
        btnClose = view.findViewById(R.id.cross);
    }

    @Override
    public void onStart() {
        super.onStart();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.submit:
                String taskTitle = editText.getText().toString();
               // onNewTaskCreated.onTaskCreated(taskTitle);
                dialog.dismiss();
                break;
            case R.id.cross:
                dialog.dismiss();
                break;
        }
    }
}

dialog_fragment_create.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/annonce.main.coordinator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_sheet_background"
    tools:ignore="RtlHardcoded">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical"
        android:paddingStart="20dp"
        android:paddingEnd="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layoutAnimation="@anim/layout_animation_translate_up"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/header_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/bold"
                    android:gravity="start"
                    android:includeFontPadding="false"
                    android:text="Create New Task"
                    android:textColor="@color/colorBlack"
                    android:textSize="25sp" />

                <TextView
                    android:id="@+id/header_sub_title"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:fontFamily="@font/normal"
                    android:gravity="start"
                    android:includeFontPadding="false"
                    android:paddingStart="2dp"
                    android:text="Enter title for new task!"
                    android:textColor="@color/colorDarkGrey"
                    android:textSize="12sp"
                    tools:ignore="RtlSymmetry" />

            </LinearLayout>

            <ImageView
                android:id="@+id/cross"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="top"
                android:layout_weight="0.2"
                android:padding="5dp"
                android:src="@drawable/ic_close_circle"
                android:tint="@color/colorPrimary" />

        </LinearLayout>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layoutAnimation="@anim/layout_animation_translate_up"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="5dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginEnd="5dp"
                    android:layout_marginBottom="20dp"
                    app:cardBackgroundColor="@color/colorWhiteLight"
                    app:cardCornerRadius="25dp"
                    app:cardElevation="0dp"
                    app:cardPreventCornerOverlap="false"
                    app:cardUseCompatPadding="true"
                    app:contentPadding="10dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="5dp"
                        android:layout_marginEnd="5dp"
                        android:orientation="horizontal">

                        <EditText
                            android:id="@+id/edit_text"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:background="@color/colorTransparent"
                            android:fontFamily="@font/normal"
                            android:gravity="center_vertical"
                            android:hint="New task"
                            android:includeFontPadding="false"
                            android:inputType="text"
                            android:maxLines="1"
                            android:padding="5dp"
                            android:textSize="17sp"
                            tools:targetApi="lollipop" />
                    </LinearLayout>
                </android.support.v7.widget.CardView>

                <android.support.v7.widget.CardView
                    android:id="@+id/submit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="5dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="5dp"
                    android:layout_marginBottom="20dp"
                    android:background="#008FFF"
                    android:clipToPadding="false"
                    app:cardBackgroundColor="#008FFF"
                    app:cardCornerRadius="25dp"
                    app:cardElevation="2dp"
                    app:cardPreventCornerOverlap="false"
                    app:cardUseCompatPadding="true"
                    app:contentPaddingBottom="15dp"
                    app:contentPaddingTop="15dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:fontFamily="@font/bold"
                        android:text="Create Task"
                        android:textColor="@color/colorWhite"
                        android:textSize="16sp" />
                </android.support.v7.widget.CardView>
            </LinearLayout>
        </ScrollView>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

style.xml

<style name="BottomSheetTheme" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="bottomSheetStyle">@style/ABottomSheet</item>
    <item name="android:backgroundDimEnabled">true</item>

</style>

<style name="ABottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/bottom_sheet_background</item>
    <item name="behavior_hideable">false</item>

</style>

drawable

bottom_sheet_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#ffffff" />
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

anim

layout_animation_translate_up.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="700">

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/linear_interpolator"
        />

    <translate
        android:fromYDelta="10%"
        android:toYDelta="0"
        android:interpolator="@android:anim/linear_interpolator"
        />

</set>

If you have problem in scrolling in bottom sheet and editext is not displayed at right position then KeyboardUtils.java will help.

public class KeyboardUtils {

    private View decorView;
    private View contentView;
    //a small helper to allow showing the editText focus
    ViewTreeObserver.OnGlobalLayoutListener onGlobalLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            Rect r = new Rect();
            //r will be populated with the coordinates of your view that area still visible.
            decorView.getWindowVisibleDisplayFrame(r);

            //get screen height and calculate the difference with the useable area from the r
            int height = decorView.getContext().getResources().getDisplayMetrics().heightPixels;
            int diff = height - r.bottom;

            //if it could be a keyboard add the padding to the view
            if (diff != 0) {
                // if the use-able screen height differs from the total screen height we assume that it shows a keyboard now
                //check if the padding is 0 (if yes set the padding for the keyboard)
                if (contentView.getPaddingBottom() != diff) {
                    //set the padding of the contentView for the keyboard
                    contentView.setPadding(0, 0, 0, diff+30);
                }
            } else {
                //check if the padding is != 0 (if yes reset the padding)
                if (contentView.getPaddingBottom() != 0) {
                    //reset the padding of the contentView
                    contentView.setPadding(0, 0, 0, 0);
                }
            }
        }
    };

    public KeyboardUtils(Activity act, View contentView) {
        this.decorView = act.getWindow().getDecorView();
        this.contentView = contentView;

        //only required on newer android versions. it was working on API level 19
        if (Build.VERSION.SDK_INT >= 19) {
            decorView.getViewTreeObserver().addOnGlobalLayoutListener(onGlobalLayoutListener);
        }
    }

    /**
     * Helper to hide the keyboard
     *
     * @param act
     */
    public static void hideKeyboard(Activity act) {
        if (act != null && act.getCurrentFocus() != null) {
            InputMethodManager inputMethodManager = (InputMethodManager) act.getSystemService(Activity.INPUT_METHOD_SERVICE);
            inputMethodManager.hideSoftInputFromWindow(act.getCurrentFocus().getWindowToken(), 0);
        }
    }

    public void enable() {
        if (Build.VERSION.SDK_INT >= 19) {
            decorView.getViewTreeObserver().addOnGlobalLayoutListener(onGlobalLayoutListener);
        }
    }

    public void disable() {
        if (Build.VERSION.SDK_INT >= 19) {
            decorView.getViewTreeObserver().removeOnGlobalLayoutListener(onGlobalLayoutListener);
        }
    }
}

If you have any question and issue please write comments.