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.

[appbox googleplay com.limecreativelabs.bandhook]

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:

bandhook-foreground

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 wit 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();
            }
        });
    }
}

That’s the result:

layout-foreground

You can see the full code on Github and it’s also available to test it live at the official blog App .

Author: Antonio Leiva

I’m in love with Kotlin. I’ve been learning about it for a couple of years, applying it to Android and digesting all this knowledge so that you can learn it with no effort.

Shares
%d bloggers like this: