شرح تصميم custom bottomSheet في اندرويد ستوديو

شرح تصميم custom bottomSheet في اندرويد ستوديو

كما ذكرنا لكم سابقا ان bottomSheet من اكثر العناصر التي تستخدم في تطبيقات الاندرويد بشكل كبير جدا وفي هذا المقال سوف نشارك معكم كيف تقوم بعمل bottomSheet بشكل مخصص بالكامل بالتصميم الذي ترغب به في برنامج الاندرويد ستوديو باستخدام لغة البرمجة java وهيا من اكثر لغات البرمجه انتشارا في تطوير تطبيقات الandroid بشكل كبير في الفتره الحاليه , وفي مقالات سابقه شرحنا لكم كيف تقوم بعمل list بداخل الbottomSheet يمكنكم الاطلاع عليها .

لأن Android هو أكثر أنظمة تشغيل الهواتف الذكية شيوعًا ، ولأن نشر تطبيق على متجر Google Play أمر بسيط ، فهو أفضل مكان للبدء ، خاصة وأن المنافسة شرسة ، والفرص كثيرة ، وتنوع الأجهزة التي تدعم هذا النظام يجعله الخيار الأفضل. بالإضافة إلى حقيقة أن الاستفادة من تطبيقات Android أمر بسيط للغاية ، ما عليك سوى تطوير تطبيق يوفر خدمة أو لعبة وتسويقها لتحقيق النجاح ، وهذه هي أبسط الطرق ، فمعظم الشركات ، سواء كانت كبيرة أو غيورة ، تميل للدخول في مجال تطبيقات الهواتف الذكية والمنصة الأولى ، وهذه هي أبسط الطرق ، بالإضافة إلى توجه معظم الشركات سواء كانت كبيرة أو غيورة لدخول مجال تطبيقات الهواتف الذكية.

تصميم style لل bottomSheet

في البداية سوف نقوم بعمل تصميم مخصص الى bottomSheet في ملف theme كما هو موضح .

theme.xml

    <style name="DialogAnimation" >
        <item name="android:windowEnterAnimation">@anim/animation_bottom_sheet_in</item>
        <item name="android:windowExitAnimation">@anim/animation_bottom_sheet_out</item>
    </style
    

عمل انميشن عند اظهار الbottomSheet

لو تلاحظ ان خلال علمية فتح الbottomSheet يتم عمل انميشن للصعود للاعلى لهذا سوف نقوم بعمل هذا الانميشن من خلال الكود التالي .

aminIn.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromYDelta="100%p"
        android:toYDelta="0"
        />
</set>

عمل انميشن عند اخفاء الbottomSheet

ايضا في عملية اغلاق الbottomSheet يتم عمل انميشن للاغلاق وهنا نستخدم الانميشن التالي .

aminOut.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromYDelta="0"
        android:toYDelta="100%p"
        />
</set>

تصميم background للbottomSheet

في هذا الجزء سوف نقوم بتصميم الخلفيه الخاصه بالbottomSheet وهي عباره عن تصميم للشريط الذي يظهر حيث انه يحتوي على Radius من الاعلى يمين ويسار كما هو موضح .

backgound.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/dark" />
    <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"/>

</shape>

تصميم الbottomSheet في layout منفصل

هنا نقوم بعمل التصميم الذي نرغب به وقمنا بوضع صورة بجانبها نص وتم تكرار العمليه ثلاث مرات يمكنك هنا بعمل اي تصميم تريده بالشكل الذي ترغب به .

bottom_sheet.xml

<LinearLayout
    android:orientation="vertical"
    android:background="@drawable/bottom_sheet"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv"
            android:layout_marginEnd="10dp"
            android:text="text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:src="@drawable/ic_islamic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv0"
            android:text="text"
            android:layout_marginEnd="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:src="@drawable/ic_islamic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv1"
            android:text="text"
            android:layout_marginEnd="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:src="@drawable/ic_islamic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv2"
            android:text="text"
            android:layout_marginEnd="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:src="@drawable/ic_islamic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>


</LinearLayout>

إستدعاء واستخدام الbottomSheet في تصميمك

الان ناتي الى الclass الاساسي الذي نعمل عليه ونقوم بعمل methode بسيطه عباره عن التصميم الخاص بال bottomSheet وتنفيذ الاوامر التي نريدها من داخلها وهنا قمنا بطباعة جملة وعرضها على شاشة الهاتف الخاصه بالمتسخدم يمكنك تنفيذ اي عمليه تريدها .

MainActivity.java

public class MainActivity extends AppCompatActivity {
    ActivityMainBinding binding;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.main_activity);

        binding.btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showBottomSheet();

            }
        });


    }

    private void  showBottomSheet() {
        final Dialog dialog = new Dialog(this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.bottom_layout);

        TextView textView = dialog.findViewById(R.id.tv);
        TextView textView2 = dialog.findViewById(R.id.tv2);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(OnlinePlayerActivity.this, "Done", Toast.LENGTH_SHORT).show();
            }
        });

        textView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(OnlinePlayerActivity.this, "Done 2", Toast.LENGTH_SHORT).show();
            }
        });

        dialog.show();
        dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.WRAP_CONTENT);
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
        dialog.getWindow().setGravity(Gravity.BOTTOM);
    }

}

لمزيد من الشروحات

• تصميم صفحة setting باستخدام android studio بإستخدام xml
• اضافة زر للتبديل بين الى الليلي في اندرويد ستوديو | Dark and white mode android
• شرح كيفية عمل ImageSlide  بعدة اشكال وبدون مكتبات في الاندرويد ستديو
• تصميم برنامج باستخدام برنامج اندرويد ستوديو لارسال الاشعارات في وقت محدد
• نقل البيانات والصور من صفحة للاخرى اثناء الصغط على الrecyclerview
• شرح كيفية نقل بيانات الcolors من api من activity الى اي مكان اخر Android studio