آموزش ساخت Button سفارشی در برنامه نویسی اندروید

به نام خدا 

با سلام خدمت دوستان  همیشه همراه همیار اندروید

در این آموزش میخام بهتون آموزش بدم که چطوری باتن Button های سفارشی رو

برای خودتون طراحی کنید 

بعضی وقت ها میخاین باتنی گرد داشته باشین یا باتنی شامل چند رنگ متفاوت خب من اومدم و در یک آموزش 

ساخت این باتن ها رو واستون آموزش دادم امیدوارم که مورد استفادتون قرار بگیره

خب میریم سراغ آموزش

ابتدا در لایوت مورد نظر سه تا ViewButton ایجاد میکنیم چون من میخام

سه نوع باتن سفارشی ایجاد کنم به همین دلیل سه باتن اضافه میکنم 

res/layout/activity_main.xml

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

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HamyarAndroid.com"
        android:textSize="30dp"
        android:layout_marginBottom="20sp"
        android:textColor="@color/colorPrimaryDark"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="باتن سفارشی1" />


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24sp"
        android:text="باتن سفارشی2" />


    <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24sp"
        android:layout_marginBottom="24sp"
        android:text="باتن سفارشی3" />
</LinearLayout>

خب همان طور که در کد بالا میبینید ما سه عدد Button ایجاد کردیم که تصویر کد بالا رو میتونید در پایین ببینید

حالا ما میخایم باتن شماره یک رو سفارشی کنیم 

کاری که ما باید انجام بدیم اینه که یک کد درون یک فایل از drawable بنویسیم و اونو back ground باتن قرار بدیم

از طریق مسیر پایین یک فایل XML ایجاد میکنیم و نامش را button1 می گذاریم

روی drawable کلیک راست میکنیم و new را کلیک میکنیم و بعد Drawable resource file را کلیک میکنیم و نام لایه را Button1 میگذاریم

و سپس ok را کلیک میکنیم و لایه ما ساخته میشود و کد های زیر را درونش مینویسیم

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

    <gradient android:startColor="#2AF598" android:centerColor="#ff1493"
        android:endColor="@color/colorPrimary"/>
    <corners android:radius="50dp"/>
</shape>

خط 3

ما برای shape مییایم و rectangle رو انتخاب میکنیم یعنی مستطیل 

 خط 5

کد بالا ما یک gradient اضافه کردیم یعنی رنگ ما بین دوتا رنگ تغییر رنگ میدهد

خط 6

رنگ پایانی را مشخص کردیم

 خط 7

قوس گوشه های  مستطیل را مشخص کردیم که چند درجه قوس داشته باشند که در اینجا ما 50 را در نظر گرفتیم

خب حالا میریم سراغ طراحی back ground برای Button2

طبق مراحل بالا یک فایل جدید درون drawable میسازیم و اسمش رو button2 میزاریم

و کد زیر رو براش مینوسیم

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

    <stroke android:color="#66F9B9" android:width="4dp"/>
    <corners android:radius="16sp"/>
</shape>

 خط 3

همونطور که میبینید  برای shape  من اومدم و rectangle رو انتخاب کردم

 خط 5

خاصیت stroke یعنی کادر دور رو نوشتم که دوتا مقدار میگیره یکی رنگ color

و دیگری ضخامت کادر که من 4 رو براش در نظر گرفتم

خط 6

در این خط کد قوس گوشه ها رو مشخص کردم که من 16 درجه رو نوشتم

خب حالا میریم سراغ نوشتن back ground برای button3 و کدهاشو درون یک لایه جدید از drawable و نام این لایه جدید رو هم button3 میگذاریم

ایجاد یک لایه جدید رو برای دوتا باتن قبلی توضیح دادم و دیگه نیازی نیست توضیح بدم

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

        <shape android:shape="oval">
            <size
                android:width="100dp"
                android:height="100dp"/>
            <solid android:color="#5E0630"/>
        </shape>

    </item>
    
</selector>

ما سه تا لایه برای طراحی و شکل دادن به باتن ها درون drawable ایجاد کردیم

حالا این لایه ها را روی back ground باتن ها ست میکنیم طبق کد زیر

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

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HamyarAndroid.com"
        android:textSize="30dp"
        android:layout_marginBottom="20sp"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="باتن سفارشی1" 
        android:background="@drawable/button1"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24sp"
        android:text="باتن سفارشی2" 
        android:background="@drawable/button2"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24sp"
        android:layout_marginBottom="24sp"
        android:text="باتن سفارشی3" 
        android:background="@drawable/button3"/>

</LinearLayout>

حالا با اضافه کردن back ground به باتن ها ،اون ها سفارشی شدن، و خروجی کارمون رو میتونید در تصویر پایین ببینید

امیدوارم از این آموزش استفاده مفید رو برده باشید

با آرزوی موفقیت