Understanding UX principles and how it's different from UI

The user experience is very important for keeping a user engaged with the app by making them understand what is happening on the screen. Here is another simple material aspect of UX, where a user gets a very good experience when they click on view on the screen; the UX shows a ripple effect when the user clicks on the view:

The ripple effect starts from the point of contact with the screen. The ripple is high at the point of contact and gradually decreases its force. Firstly, a user should know when they click on a button and should not have a doubt whether they have clicked or not. Having this effect gives a user a very good experience when they click on a button.

Let's see how to integrate the ripple effect on the button click of any views. We will use the CardView as the outermost clickable view. The following is the code to do that:

<android.support.v7.widget.CardView 
   android:layout_width="0dp" 
   android:layout_height="wrap_content" 
   android:layout_margin="3dp" 
   android:layout_weight="1" 
   android:clickable="true" 
   android:foreground="@drawable/place_foreground" 
   android:padding="0dp" 
   app:cardBackgroundColor="@color/white" 
   app:cardCornerRadius="0dp" 
   app:cardElevation="0dp" 
   app:cardPreventCornerOverlap="false" 
   app:cardUseCompatPadding="true" 
   app:contentPadding="0dp"> 

We will use the foreground attribute of the CardView to make the ripple effect when the user clicks on the CardView:

android:foreground="@drawable/place_foreground" 

We will check the drawable file @drawable/place_foreground, placed in the drawable folder:

<inset xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/place_foreground_selector" 
    android:insetBottom="4dp" 
    android:insetLeft="2dp" 
    android:insetRight="2dp" 
    android:insetTop="4dp" /> 

An inset is used when you need a background that is of smaller bounds than the actual view's bounds. We need to set a drawable for the inset. The place_foreground_selector drawable is used to do that:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="true"> 
        <shape android:shape="rectangle"> 
            <solid android:color="@color/place_item_ripple_color" /> 
            <corners android:radius="@dimen/card_corner_radius" /> 
        </shape> 
    </item> 
    <item android:state_enabled="true" android:state_focused="true"> 
        <shape android:shape="rectangle"> 
            <solid android:color="@color/place_item_ripple_color" /> 
            <corners android:radius="@dimen/card_corner_radius" /> 
        </shape> 
    </item> 
</selector> 

This drawable is a selector, which checks three states. state_pressed="true" is executed when the view is clicked. At this point, the following shape is seen in the view:

<shape android:shape="rectangle"> 
   <solid android:color="@color/place_item_ripple_color" /> 
   <corners android:radius="@dimen/card_corner_radius" /> 
</shape> 

It gives a color to the view, which is set is the colors.xml and has a corner radius, which is set from the dimens.xml file present in the values folder. The color defined is the hex code of the color that needs to be displayed when the view is pressed:

<color name="place_item_ripple_color">@color/white_ripple</color> 
<color name="white_ripple">#96ffffff</color> 

The ffffff color set is a white color, and 96 is the alpha value set to give transparency to the white color. state_enabled="true" and state_focused="true" are states to check when the view is enabled and focused. Only when these two conditions are satisfied, is the shape drawn:

<shape android:shape="rectangle"> 
   <solid android:color="@color/place_item_ripple_color" /> 
   <corners android:radius="@dimen/card_corner_radius" /> 
</shape> 

shape as defined here is a rectangle, as the CardView is a rectangle with rounded corners. The drawable file-@drawable/place_foreground-is also placed in the drawable-v21 folder. The @drawable/place_foreground file placed in the drawable folder is used to generate the ripple effect in devices prior to Android version 21, as the ripple effect is not supported on older versions of Android. For Android versions later than v21, the ripple effect is built-in:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    android:color="@color/place_item_ripple_color" 
    android:drawable="@drawable/place_foreground_selector" /> 

Here, the ripple is a built-in class, which defines the ripple effect. It needs to set a drawable and a color. The ripple color is the same one defined earlier. Also, the @drawable/place_foreground_selector drawable needs to be placed in the drawable-v21 folder:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="true"> 
        <shape android:shape="rectangle"> 
            <solid android:color="@color/place_item_ripple_color" /> 
        </shape> 
    </item> 
    <item android:state_enabled="true" android:state_focused="true"> 
        <shape android:shape="rectangle"> 
            <solid android:color="@color/place_item_ripple_color" /> 
        </shape> 
    </item> 
</selector> 

Both the @drawable/place_foreground_selector folders are similar, except that the corners do not have to be specified.