ساخت دکمه (button) متریال دیزان در برنامه نویسی اندروید

سلام دوستان عزیز در این سری از آموزش های برنامه نویسی اندروید به ساخت دکمه (button) متریال دیزان در برنامه نویسی اندروید  می پردازیم. بهتر است بدانید تا زمانی که برنامه شما متریال دیزاین نشده باشد کافه بازار و Google play برنامه شما را رد می کنند و دوستانی که اکانت گوگل پلی دارند دقت کنند اگر یک باگ خیلی فاحش در برنامه شما وجود داشته باشد اکانت Google Play Developer شما  که حدودا 100 دلار قیمت آن است از بین خواهد رفت.
خب برویم به سراغ بخش کد برنامه
در فایل colors.xml که در res/values وجود دارد رنگ های زیر را قرار دهید.

<resources>
    <color name="blue_pressed">@android:color/holo_blue_dark</color>
    <color name="blue_normal">@android:color/holo_blue_light</color>
</resources>

حال باید در فایل dimen مقادیر زیر را قرار دهید در صورتی که فایل dimen.xml وجود ندارد آن را در res/values ایجاد کنید

<resources>
    <dimen name="corner_radius">4dp</dimen>
    <dimen name="layer_padding">3dp<<dimen>
</resources>

corner_radius در بالا گردی دور دکمه را تنظیم می کند همانند شکل زیر

و layer_padding هم خط پایین را تنظیم می کند (فاصله آن خط تا بالا)

حال یک فایل به نام rect_pressed.xml در فولدر drawable ایجاد کند و کد های زیر را در آن قرار دهید. این فایل برای زمانی است که دکمه فشرده می شود.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <corners android:radius="@dimen/corner_radius" />
  <solid android:color="@color/blue_pressed" />
</shape>

و یک فایل دیگر در همان فولدر به نام rect_normal.xml ایجاد کنید و کد های زیر را در آن قرار دهید.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/rect_pressed" />
  <item android:bottom="@dimen/layer_padding">
      <shape android:shape="rectangle">
          <corners android:radius="@dimen/corner_radius" />
          <solid android:color="@color/blue_normal" />
      </shape>
  </item>
</layer-list>

این کد بالا شکل زیر را ایجاد می کند.

کار بعدی که باید انجام دهید یک فایل به نام  flat_selector.xml در همان فولدر (drawable) ایجاد کنید و کد های زیر را در آن قرار دهید.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" android:drawable="@drawable/rect_pressed"/>
  <item android:drawable="@drawable/rect_normal"/>
</selector>

و در آخر برای اینکه از آن استفاده کنیم همانند زیر عمل می کنیم (مقدار background را برابر با flat_selector قرار می دهیم)

<Button
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/flat_selector"
      android:textColor="@android:color/white"
      android:text="Say Hello" />

فقط کافی است در دکمه دیگری که دارید ویژگی زیر را قرار دهید تا استایل جدید برای آن فعال شود.

android:background="@drawable/flat_selector"

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

مطالعه بیشتر