ساخت bottomsheetdialog شبیه اینستاگرام

سلام خدمت اعضا محترم UNCOX

اگر دقت کرده باشید در برنامه اینستاگرام وقتی روی گزینه ی سه نقطه کنار هر پست کلیک کنید چند منو از پایین صفحه روی صفحه میاد میخوام شیوه ی ساختش در اندروید رو براتون بگم امیدوارم خوشتون بیاد

قبل از هر چیز باید توی قسمت build.gradle کتابخونه ی design رو اضافه کنید بدین شکل:

compile 'com.android.support:design:25.3.1'

خب حالا توی قسمت xml اکتیویتی اصلی یک دکمه طراحی کنید که وقتی روی اون کلیک شد BottomSheetDialog از پایین به سمت بالا بیاد میخواهیم کدهای BottomSheetDialog رو درون اون بنویسیم

یک لایه اختصاصی برای BottomSheetDialog  بسازید و اونو هر جور که دوست دارید طراحی کنید در ضمن یک بک گراند با یک مقدار corner به لایه تون بدین:

من بک گراند خودم رو اینجوری طراحی کردم:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">


        <shape xmlns:android="http://schemas.android.com/apk/res/android">


            <solid android:color="#ffffff"/>
            <corners android:radius="7dp"/>
            <stroke android:color="#202020" android:width="0.25dp"/>


        </shape>


    </item>


    <item android:state_pressed="true">


        <shape xmlns:android="http://schemas.android.com/apk/res/android">


            <solid android:color="@color/Khat"/>
            <corners android:radius="7dp"/>
            <stroke android:color="#202020" android:width="0.25dp"/>


        </shape>


    </item>




</selector>

و لایه ی BottomSheetDialog  رو هم اینجور طراحی کردم:

<?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="wrap_content"
    android:orientation="vertical"
    android:id="@+id/MyLayoutBottom">


    <LinearLayout
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom"
        android:orientation="vertical">


        <android.seetalk.com.myapplication.MyTextView
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="لطفا یکی را انتخاب کنید"
            android:textColor="@color/TextColor"
            android:textSize="@dimen/TextSize"
            android:gravity="center"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.25dp"
            android:background="@color/Khat"/>

        <android.seetalk.com.myapplication.MyTextView
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="تماس تلفنی"
            android:textColor="@color/TextColor"
            android:textSize="@dimen/TextSize"
            android:gravity="center"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.25dp"
            android:background="@color/Khat"/>

        <android.seetalk.com.myapplication.MyTextView
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="گزارش خطا"
            android:textColor="#c91a1a"
            android:textSize="@dimen/TextSize"
            android:gravity="center"/>



    </LinearLayout>



    <LinearLayout
        android:id="@+id/LinearClose"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/bottom"
        android:layout_margin="10dp">

        <android.seetalk.com.myapplication.MyTextView
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="بستن"
            android:textColor="@color/Blue"
            android:textSize="@dimen/TextSize"
            android:gravity="center"/>


    </LinearLayout>

</LinearLayout>

خب کار ما با قسمت xml تموم شد باید بریم سراغ کدهای جاوا:

توی قسمت کلیک دکمه تون این کدها رو بنویسید:

Button = (android.widget.Button) findViewById(R.id.Button);

Button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //ساخت یک شیء از BottonSheetDialog
        final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
        //معرفی لایه ی ساخته شده
        View view = getLayoutInflater().inflate(R.layout.bottom, null);
        //دادن لایه ساخته شده به BottonSheetDialog
        bottomSheetDialog.setContentView(view);

        //گذاشتن قابلیت کلیک روی بستن
        LinearLayout LinearClose = (LinearLayout)view.findViewById(R.id.LinearClose);

        LinearClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                bottomSheetDialog.cancel();
            }
        });

        //حذف بگ گراند BottonSheetDialog
        bottomSheetDialog.getWindow().findViewById(R.id.MyLayoutBottom)
                .setBackgroundResource(android.R.color.transparent);


        //نمایش BottonSheetDialog
        bottomSheetDialog.show();

    }
});

کارمون تموم شد حالا پروژه رو اجرا میکنیم چیزی که ساختیم به این شکل شده:

امیدوارم از این آموزش لذت برده باشید