Android and Borderless Ripple

Question

This is my layout file:

<data></data>

<FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary" />

    <RelativeLayout
        android:id="@+id/login_rootcontainer_RL"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/login_container_RL"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:layout_centerInParent="true">

            <ImageView
                android:id="@+id/login_logo_IV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="16dp"
                android:adjustViewBounds="true"
                android:src="@drawable/logo_app" />

            <TextView
                android:id="@+id/login_signintext_TV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/login_logo_IV"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="16dp"
                android:text="Sign in"
                android:textColor="@color/white" />

            <LinearLayout
                android:id="@+id/login_socialcontainer_LL"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/login_signintext_TV"
                android:layout_marginLeft="28dp"
                android:background="@android:color/transparent"
                android:layout_marginRight="28dp"
                android:layout_marginTop="16dp"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/login_facebook_IV"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_weight="1"
                    android:tint="@color/white"
                    android:clickable="true"
                    app:srcCompat="@drawable/ic_facebook_letter" />

                <ImageView
                    android:id="@+id/login_twitter_IV"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_weight="1"
                    android:tint="@color/white"
                    app:srcCompat="@drawable/ic_twitter_letter" />

                <ImageView
                    android:id="@+id/login_google_IV"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_weight="1"
                    android:tint="@color/white"
                    style="@style/DefaultSelectableItemBackgroundBorderless"
                    android:clickable="true"
                    app:srcCompat="@drawable/ic_googleplus_letter" />

                <ImageButton
                    android:id="@+id/login_linkedin_IV"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_weight="1"
                    android:tint="@color/white"
                    style="@style/DefaultSelectableItemBackgroundBorderless"
                    android:clickable="true"
                    app:srcCompat="@drawable/ic_linkedin_letter" />
            </LinearLayout>

            <TextView
                android:id="@+id/login_signinor_TV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/login_socialcontainer_LL"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="20dp"
                android:text="or"
                android:textColor="@color/white" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/signin_name_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/login_socialcontainer_LL"
                android:layout_alignRight="@id/login_socialcontainer_LL"
                android:layout_below="@id/login_signinor_TV"
                android:textColorHint="@color/white">

                <EditText
                    android:id="@+id/signin_name"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentStart="true"
                    android:layout_marginTop="15dp"
                    android:cursorVisible="true"
                    android:drawablePadding="12dp"
                    android:ems="10"
                    android:hint="@string/signin_email_hint"
                    android:inputType="textEmailAddress"
                    android:padding="7dp"
                    android:paddingBottom="5dp"
                    android:paddingTop="5dp"
                    android:textColor="@color/white"
                    android:textColorHint="@color/white"
                    android:textSize="16sp"/>
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/signin_password_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignEnd="@+id/signin_name_container"
                android:layout_alignLeft="@+id/signin_name_container"
                android:layout_alignRight="@+id/signin_name_container"
                android:layout_alignStart="@+id/signin_name_container"
                android:layout_below="@+id/signin_name_container"
                android:textColorHint="@color/white"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                app:passwordToggleEnabled="false"
                app:passwordToggleTint="@color/white">

                <EditText
                    android:id="@+id/signin_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:cursorVisible="true"
                    android:drawablePadding="12dp"
                    android:ems="10"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:textColorHint="@color/white"
                    android:padding="7dp"
                    android:paddingBottom="5dp"
                    android:paddingTop="5dp"
                    android:textColor="@color/white"
                    android:textSize="16sp" />
            </android.support.design.widget.TextInputLayout>

            <TextView
                android:id="@+id/login_forgotpassword_TV"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@id/signin_password_container"
                android:layout_below="@id/signin_password_container"
                android:layout_marginTop="8dp"
                android:text="Forgot password"
                android:textColor="@color/white"
                android:textSize="12sp" />
        </RelativeLayout>

        <TextView
            android:id="@+id/login_terms_TV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal|bottom"
            android:layout_marginTop="10dp"
            android:paddingBottom="10dp"
            android:text="Don't have an account yet? Sign up!"
            android:textColor="@color/white" />

    </RelativeLayout>

</FrameLayout>

and this is the DefaultSelectableItemBackgroundBorderless:

<style name="DefaultSelectableItemBackground" >
    <item name="android:theme">@style/DefaultSelectableItemTheme</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>
<style name="DefaultSelectableItemBackgroundBorderless" >
    <item name="android:theme">@style/DefaultSelectableItemTheme</item>
    <item name="android:background">?attr/selectableItemBackgroundBorderless</item>
</style>
<style name="DefaultSelectableItemTheme">
    <item name="colorControlHighlight">@color/white</item>
</style>

I don't see any ripple effect when the user clicks on ImageView or ImageButton. In the Java code I've set the .setOnClickListener on the ImageView and ImageButton.

Where I'm wrong?

Answer 1

You will have to set background for ImageView as android:background=?attr/selectableItemBackgroundBorderless.