Android-er: RippleDrawable

Showing posts with label RippleDrawable. Show all posts

Monday, September 21, 2015

RippleDrawable with drawable

prev.
- Touch Feedback with RippleDrawable
- RippleDrawable with mask

It's a example of RippleDrawable with drawable, the ripple effect is masked against the composite of the child layers, the drawable.

drawable/rippple.xml, a simplest RippleDrawable.

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

drawable/ripppledrawable1.xml, RippleDrawable with drawable of "@mipmap/ic_launcher".

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffff0000">
    <item android:drawable="@mipmap/ic_launcher" />
</ripple>

drawable/ripppledrawable2.xml, RippleDrawable with drawable of "@android:drawable/ic_menu_camera".

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ff0000ff">
    <item android:drawable="@android:drawable/ic_menu_camera" />
</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="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:clickable="true"
        android:background="@drawable/ripppledrawable1">
    </LinearLayout>
    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:clickable="true"
        android:background="@drawable/ripppledrawable2">
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ripppledrawable2"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ripppledrawable2"
            style="?android:attr/borderlessButtonStyle"/>
    </LinearLayout>


</LinearLayout>

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

Sunday, September 20, 2015

Touch Feedback with RippleDrawable

android.graphics.drawable.RippleDrawable is a drawable that shows a ripple effect in response to state changes. Here is a simple example to show user touch with RippleDrawable.

Create file drawable/rippple.xml.

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

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"
    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" />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher"
        android:clickable="true"
        android:background="@drawable/rippple" />
</LinearLayout>

Next:
- RippleDrawable with mask
- RippleDrawable with drawable