How to apply a transparency (focus?) ON pressing any item (as Google does)?

Question

In the application "Google Play", we can see that if you click on any item (LinearLayout, button, imageview, textview ...) this has on it a blue coat.

Being above is not a simple background with android: state_pressed = "true" android: state_focused = "true" ...

Any idea how to apply that effect?

For example, I have a LinearLayout with multiple images and text. This LinearLayout acts as a "button", my intention is that pressing change in appearance having a blue layer on top, as does Google.

I typically use custom background but that applies back and not over.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_focused="true" android:drawable="@drawable/focus_blue_default" />
</selector>

And focus_blue_default.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#8051C9EC" />
</shape>
</item>
</layer-list>

Answer 1

This is only for reference and I do not think it is practical and it is not tested and ...

Since the answer is accepted, I will state the problems of this code (the ones I can think of right now):

1. As @user2558882 stated in his comment on the answer, if a subclass uses setContentView(view, params) the params are lost.
2. This will not work with inflated views -i.e. adapters; Yet, you can solve by calling fix(View) on any inflated view.
3. It only works with colors. This can be fixed as well.
4. I think this might work with sherlock-actionbar.
5. The code has not been tested so please test it.
6. It shifts your whole view tree one more level by adding a RelativeLayout. This can be fixed using addContentView. I did use this RelativeLayout because I answered this fast and I also think the current code will work better on all phones and apis. This is true because the whole solution is compacted in a RelativeLayout whose behavior is pretty consistent. After all I am only using RelativeLayout.LayoutParams which is the very basic functionality of this ViewGroup.

---

Solution

Create a BaseActivity.java:

package mobi.sherif.overlay;

import android.app.Activity;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.RelativeLayout;

public class BaseActivity extends Activity {
    RelativeLayout mRl;
    View mImage;
    View mContent;
    @Override
    public void setContentView(int layoutResID) {
        setContentView(LayoutInflater.from(this).inflate(layoutResID, null));
    }
    @Override
    public void setContentView(View view) {
        setContentView(view, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    }
    @Override
    public void setContentView(View view, LayoutParams params) {
        mContent = view;
        fix(view);
        push(view);
    }
    protected void refix() {
        fix(mContent);
    }
    private void push(View view) {
        mRl = new RelativeLayout(this);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
        mRl.addView(view, params);
        mImage = new View(this);
        mImage.setVisibility(View.GONE);
        params = new RelativeLayout.LayoutParams(0, 0);
        mRl.addView(mImage, params);
        super.setContentView(mRl);
    }
    protected void fix(View child) {
        if (child == null)
            return;

        doFix(child);
        if (child instanceof ViewGroup) {
            fix((ViewGroup) child);
        }
    }

    private void fix(ViewGroup parent) {
        for (int i = 0; i < parent.getChildCount(); i++) {
            fix(parent.getChildAt(i));
        }
    }
    private void doFix(View child) {
        if(child.getTag()!=null && child.getTag().getClass() == String.class) {
            String color = (String) child.getTag();
            int theColor;
            try {
                theColor = Color.parseColor(color);
                child.setTag(theColor);
            } catch (Exception e) {
                theColor = -1;
            }
            if(theColor != -1) {
                child.setOnTouchListener(new OnTouchListener() {

                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        switch (event.getAction()) {
                        case MotionEvent.ACTION_DOWN:
                            mImage.setBackgroundColor((Integer) v.getTag());
                            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mImage.getLayoutParams();
                            params.leftMargin = getLeftWithRespectTo(v, mRl);
                            params.topMargin = getTopWithRespectTo(v, mRl);
                            params.width = v.getWidth();
                            params.height = v.getHeight();
                            mImage.setVisibility(View.VISIBLE);
                            mImage.requestLayout();
                            break;
                        case MotionEvent.ACTION_CANCEL:
                        case MotionEvent.ACTION_UP:
                            mImage.setVisibility(View.GONE);
                        default:
                            break;
                        }
                        return v.onTouchEvent(event);
                    }
                });
            }
        }
    }
    private int getLeftWithRespectTo(View view, View relative) {
        int left = 0;
        View temp = view;
        do {
            left += temp.getLeft();
            temp = (View) temp.getParent();
        }
        while(temp!=relative);
        return left;
    }
    private int getTopWithRespectTo(View view, View relative) {
        int top = 0;
        View temp = view;
        do {
            top += temp.getTop();
            temp = (View) temp.getParent();
        }
        while(temp!=relative);
        return top;
    }
}

Now extend this BaseActivity and any view you want to overlay on it a color use android:tag="#AARRGGBB" like this:

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tag="#331111ff"
    android:text="@string/hello_world" />

TEST: If you use the xml up in activity_main.xml like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="17dp"
        android:layout_marginTop="90dp"
        android:tag="#331111ff"
        android:text="TextView" />

</RelativeLayout>

And use this as your MainActivity.java:

package mobi.sherif.overlay;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;

public class MainActivity extends BaseActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_main);
        findViewById(R.id.textView1).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "text tpicjed", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Answer 2

Lets say you want to achieve this effect on a Button:

1. Create a class which extends Android Button class
2. Have a boolean flag as a class member which will be set to true when you want this effect to appear (I would say that you can set it's value according to the touch events detected in onTouchEvent(MotionEvent event) - just override it in your class and analyse those events).
3. Override onDraw() method, and after the call for the super, add an if clause which will paint this colored rect over the whole view (using Paint) if the boolean flag is true.

Few important points:

• Alternative to step 3: You can achieve the same effect by having a (semi transparent, blue) drawable which you will add or remove according to the flag.
• You may need to invalidate your view after changing the boolean value.

Answer 3

While this may not be exactly what you're asking for, I did come up with an easily reusable way to make controls semi-transparent when pressing on them, then have them return to their normal display when you stop pressing on them.

Here's the code:

public class ViewTouchHighlighter implements OnTouchListener 
{

    @Override
    public boolean onTouch(View v, MotionEvent event) 
    {
        if (event.getAction() == MotionEvent.ACTION_DOWN)
        {
            AlphaAnimation animation = new AlphaAnimation(1, 0.5f);
            animation.setDuration(0);
            v.startAnimation(animation);

        }
        else
        {
            AlphaAnimation animation = new AlphaAnimation(0.5f, 1);
            animation.setDuration(0);
            v.startAnimation(animation);
        }
        return false;
    }

}

Then, you can simply grab any view, and give it this behavior like so:

view.setOnTouchListener(new ViewTouchHighlighter());

I realize this is a bit off from what you're looking for, but if highlighting is all you want, this could serve as a nice solution.

If you're insisting on the blue effect, and/or you want something that appears blue when selected, not when simply touched, then I'm afraid I'm going to agree with @Daniel & suggest that you inherit from any component you might want to do this with and add your custom code there.

Answer 4

From what I can tell, the container layout (for individual items) being used on Google play is a RelativeLayout. And achieving this effect is fairly simple using a RelativeLayout. You already have most of the components ready. Here's the final step:

Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white" >

    <ImageView 
    ........../>

    <TextView 
    ........../>

    <WhateverView 
    ........../>

    <!--     The final piece -->

    <View
        android:id="@+id/clickableView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:background="@drawable/state_selector_drawable" />

</RelativeLayout>

And, in your activity, you will be adding an OnClickListener to this View:

View clickableView = findViewById(R.id.clickableView);

clickableView.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View arg0) {

        Toast.makeText(MainActivity.this,
                 "Click registered.", Toast.LENGTH_SHORT).show();

    }

});

Let's say you already have a LinearLayout set up and do not wish to switch over to RelativeLayout. That's fine. Place the LinearLayout along with its children inside a RelativeLayout. And add the View defined above:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" >


        <ImageView 
        ........../>

        <TextView 
        ........../>

        <WhateverView 
        ........../>

    </LinearLayout>

    <!--     The final piece -->

    <View
        android:id="@+id/clickableView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:background="@drawable/state_selector_drawable" />

</RelativeLayout>