انشاء أزرار بشكل دائري أو حواف مائلة Rounded Buttons

السلام عليكم

عند انشاء زر جديد في ملف ال layout يكون شكل الزر مستطيلا وحوافه تقريبا حادة , في هذا الدرس سوف نتعرف كيفية جعل الزر دائري الشكل وجعل جوافه ناعمة , وهذه الطريقة تدعم الاصدارات القديمة من الأندرويد

في البداية سوف ننشئ ملفين drawable الأول سوف يكون لاصدارات الأندرويد ما قبل (Lollipop (Android 5  , والثاني Lollipop وما بعده  وسوف نحتاج أيضا إلى ملفين آخرين , واحد لتعيين الشكل الدائري و الآخر لإضافة التأثير عند الضغط .

لأننا سوف نضيف خاصية ripple effect اذا كان الاصدار Lollipop لأن هذه الخاصة لا تعمل إلا في الاصدار الخامس من الأندرويد , أما للاصدارات السابقة فسوف نجعل الزر دائري من دون إضافة تأثير ال ripple ولكن سوف نغير اللون عند الضغط .

الآن اذهب إلى ملف res > drawable   في مشروعك وانقر باليمين ثم اختر New > drawable resource file  الآن اكتب اسم للملف (سوف أسميه button_background ) ثم اضغط OK

والآن كرر العملية وأنشئ ملف بنفس الاسم تماما ولكن اختر version  من القائمة Available qualifiers واضغط السهم ثم اكتب 21 (أي اصدار API 21 )

لن نعدل على الملفين حاليا

 سوف ننشئ ملفين drawable آخرين واحد سوف يكون لتعيين شكل الزر قبل الضغط , والثاني  لإضافة التأثير بعد الضغط ,طبعا سوف نستخدمها في الملف الأول الذي أنشأناه لأنه خاص بالاصدارات ما قبل الاندرويد lollipop

قمت بتسمية الملف الأول ب RoundButton , قم بإضافة هذا الكود :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >   
    <item >
        <shape android:shape="oval">
            <solid android:color="#f0f"/>
            <corners android:radius="15dp" />
            <size android:width="65dp" android:height="65dp"/>
        </shape>
    </item>
</layer-list>

الملف الثاني سميته Clicked_Button :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item >
        <shape android:shape="oval">
            <solid android:color="#c500c5"/>
            <corners android:radius="15dp" />
            <size android:width="65dp" android:height="65dp"/>
        </shape>
    </item>
</layer-list>

layer_list : هي مثل مصفوفة بامكانك استخدام أي خاصية بداخلها ,فقط تقوم بإضافة <item > وبعدها تختار أي خاصية تريد اضافتها

shape : تستخدم لتعيين شكل الزر ,واخترنا oval وتعن دائرة

solid : هي لون الزر

corners : الحواف الخاصة بالزر , قمت بإمالتها قليلا

الفرق بين الملف الأول والثاني هو اللون فقط , أي عند الضغط سوف يتغير اللون , والآن سوف نتعلم كيفية استخدامهما في button_background أضف هذا الكود إلى الملف الخاص بإصدارات الأندرويد ما قبل API 21 :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/clicked_button"
        android:state_pressed="true"/>

    <item android:drawable="@drawable/roundbutton"/>

</selector>

state pressed = “true” : تعني أنه عند الضغط , اجعل الخلفية clicked_button 

في الأسفل قمنا بتعيين الخلفية RoundButton أي انه في الحالة العادية تكون هذه هي خلفية الزر

بامكانك إضافة أي تعديل تريده عند الضغط على الزر , مثل تغيير الشكل ,الحجم ,اللون أو إضافة stroke بداخل ملف clicked_button

بالنسبة ل button_background الخاص باصدارات اللوليبوب فسوف نضيف خاصية ripple وشكل oval :

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_material_light"
    >
    <item>
        <shape
            android:shape="oval">
            <solid android:color="#00f"/>

        </shape>
    </item>
</ripple>

android:color في داخل تاغ ripple تعني لون التأثير ,  وبعدها نستخدم shape لجعل الشكل دائري و solid لتعيين اللون قبل الضغط

ما تبقى هو انشاء زر جديد :

<Button
             
       android:layout_width="72dp"
       android:layout_height="72dp"
       android:background="@drawable/button_background"
       android:id="@+id/button_one"
/>

ضع هذا الزر في أي مكان في ال layout ثم شغل البرنامج  وسوف ترى تأثير ال ripple اذا كان اصدار الجهاز هو لوليبوب , أو سوف يتغير اللون عند الضغط  اذا  كان الاصدار أقل من اللوليبوب

أتمنى أنكم استفدتم 🙂 ,  وانتظروا الدروس القادمة