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

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

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

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


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


تصميم style لل bottomSheet

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


تصميم style لل bottomSheet

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 يتم عمل انميشن للصعود للاعلى لهذا سوف نقوم بعمل هذا الانميشن من خلال الكود التالي .


عمل انميشن عند اظهار ال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 يتم عمل انميشن للاغلاق وهنا نستخدم الانميشن التالي .


عمل انميشن عند اخفاء ال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 من الاعلى يمين ويسار كما هو موضح .


تصميم background للbottomSheet

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 منفصل

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


تصميم ال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 وتنفيذ الاوامر التي نريدها من داخلها وهنا قمنا بطباعة جملة وعرضها على شاشة الهاتف الخاصه بالمتسخدم يمكنك تنفيذ اي عمليه تريدها .


إستدعاء واستخدام ال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);
    }

}


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


تعليقات