ایجاد یک Ripple Animation در متریالهای اندروید


در اندروید هنگامی که بر روی ویجت هایی مانند button اشاره می شود انیمیشنی به صورت دایره هایی به حالت transparent بر روی ویجت مورد نظر ایجاد می شود، که به این انیمیشن Ripple می گویند.

مشکلی که وجود داره این هست که اگر شما از ویجت های سفارشی خودتون بخواهید استفاده کنید، یعنی از متریالهای استاندارد خود اندروید استفاده نکنید، دیگه انمیشن Ripple بر روی ویجت جدید نمایش داده نمیشه! اکنون برای نمایش این انیمیشن بر روی ویجت شخصی شده باید مراحل زیر را انجام دهید.

  • نکته : متریال Ripple برای ویجت هایی که خاصیت Style رو دارن می توانید استفاده کنید و همچنین خاصیت Background هم باید داشته باشند چون به هر حال این انیمیشن در یک ویجت که از کلاس Shape ارث بری کرده است اجرا می شود.
  • مرحله اول تعریف یک استایل جدید در فایل Style.xml پروژه به صورت زیر می باشد...
<style name="My.Colored.Button.Blue" parent="Base.Widget.AppCompat.Button.Colored">
<item name="android:background">@drawable/my_button_colored</item><item name="android:textAppearance">@style/My.TextAppearance</item>
</style>
  • در مرحله بعد باید یک فایل به نام my_button_colored.xml (یا هر نام دلخواه دیگر) که داخل آن یک layer list تعریف کنید، به شکل زیر ...
<layer-list  xmlns:android="http://schemas.android.com/apk/res/android">
<item  android:[email protected]/my_btn_default_mtrl_shape" />
</layer-list>
  • در این مرحله باید یک فایل به نام my_btn_default_mtrl_shape.xml تعریف کنید که یک inset layer تعریف شده باشد و در داخلinset layer یکی از المانها ripple می باشد که می توان به شکل زیر تعریف کرد.
  • نکته 1 : برای نمایش انیمیشن Ripple به صورت دایره باید نوع آیتم shape حتما rectangle باشد.

و در صورتی که برای کنترلهایی می خواهید نمایش دهید که حالت دایره مناسب نمایش نیست می توانید نوع shape را تغییر بدید.

  • نکته2 : برای تنظیم رنگ دلخواه خودتون می تونید خاصیت android:color را تغییر بدید.
<?xml   version="1.0" encoding="utf-8"?>
<inset  xmlns:android="http://schemas.android.com/apk/res/android">
<ripple  android:[email protected]/black_btn_ripple_blue">
<item>
<shape  android:shape="rectangle">
<corners
android:[email protected]/my_abc_control_corner_material"  />
<solid
android:[email protected]/btn_shape_with_ripple_back_blue"  />
</shape>
</item>
</ripple>
</inset>

و به روش زیر هم می تونید در زمان استفاده از کنترل خودتون تو لایه اصلی اکتیویتی از این انیمیشن استفاده کنید.

  • فقط کافی خاصیت style را مقدار دهی کنید فقط توجه داشته باشید که نباید از خاصیت android:style استفاده کنید.
<Button
android:[email protected]+id/btn_login"
[email protected]/My.Colored.Button.Blue"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginRight="15dp"
android:layout_weight="1"
android:[email protected]/login_btn_desc"
android:[email protected]/white"
android:textSize="15sp"/>

به همین سادگی می توانید وقتی از ویجت های شخصی سازی شده استفاده میکنید از این انیمیشن استفاده کنید.