Unveiling Bandhook (I): Foreground over any Layout

After releasing Bandhook on Play Store, I received many questions about how to implement some parts of the interface, so I decided to create a series of articles that explain step by step everything you want to know about Bandhook. As usual, you have social networks and comments to contact me and ask anything.

Bandhook Foreground

Goal

This time I will explain how to apply a foreground on any layout. In particular we will use a LinearLayout a similar way as the card-style ones that are used throughout the application:

Coding

The first thing we do is the XML code of the activity that will contain the layout we want to add the foreground to. Something like this will be enough:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:layout_gravity="center" 
    android:background="#FFFFFF" 
    android:padding="10dp">
    
    <ImageView 
        android:layout_width="200dp" 
        android:layout_height="200dp" 
        android:layout_marginBottom="10dp" 
        android:src="@drawable/cat" 
        android:scaleType="centerCrop" />
    
    <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal" 
        android:text="Foreground"/>
</LinearLayout>

Next we are creating the selector that will change the color when the item is pressed. The selector as simple as a drawable which indicates the appearance of the component in according to its state. There are a few states, but in this example we only need two: normal and pressed:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/holo_dark_green_semitransp" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

We’ll use transparent for regular state and green with a little transparency for pressed state. This might be enough. If you assign this selector to the LinearLayout background, you will get a very similar effect to the one we’re looking for. The difference is that it will appear as the background instead of being on top.

But that’s not what we want. We need to assign the foreground to the layout. However, the only layout that contains this property as default is the FrameLayout. So the easiest way to achieve the desired effect is to surround our previous layout using a FrameLayout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/selectableItem" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:foreground="@drawable/foreground_selector">
    
    <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:orientation="vertical" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true" 
        android:background="#FFFFFF" 
        android:padding="10dp">
        
        <ImageView 
            android:layout_width="200dp" 
            android:layout_height="200dp" 
            android:layout_marginBottom="10dp" 
            android:src="@drawable/cat" 
            android:scaleType="centerCrop" />
        
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:gravity="center_horizontal" 
            android:text="Foreground"/>
    </LinearLayout>
</FrameLayout>

And now we need to assign the onClick to the FrameLayout. If you don’t, the selector will not activate its pressed state:

public class ForegroundLayoutActivity extends BaseActivity {

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_foreground);

        FrameLayout item = (FrameLayout) findViewById(R.id.selectableItem); 
        item.setOnClickListener(new View.OnClickListener() { 
            @Override 
            public void onClick(View v) { 
                Toast.makeText(ForegroundLayoutActivity.this, R.string.item_pressed, Toast.LENGTH_LONG).show(); 
            } 
        }); 
    } 
}