الاثنين، 21 سبتمبر 2015

RippleDrawable with mask


Last post show a simple example of RippleDrawable, here we add a mask to ripple. If a mask layer is set, the ripple effect will be masked against that layer before it is drawn over the composite of the remaining child layers.



drawable/rippple.xml, simple ripple without mask.
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#00ffff" />

drawable/rippple2.xml, ripple with oval mask.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ff0000">
<item android:id="@android:id/mask">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
</ripple>

drawable/rippple3.xml, ripple with rectangle mask.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ff0000">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</ripple>

layout/activity_main.xml
<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:padding="16dp"
android:orientation="vertical"
android:background="#404040"
tools:context=".MainActivity">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:clickable="true"
android:background="@drawable/rippple" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"
android:clickable="true" />
<ImageView
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"
android:clickable="true"
android:background="@drawable/rippple" />
<ImageView
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"
android:clickable="true"
android:background="@drawable/rippple2" />
<ImageView
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"
android:clickable="true"
android:background="@drawable/rippple3" />
</LinearLayout>

</LinearLayout>


Next:
- RippleDrawable with drawable

ليست هناك تعليقات:

إرسال تعليق