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.

[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:

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]

<?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"

/>

Join my free 2-hour training! Learn how to start and use a more idiomatic Kotlin in a breeze

Find out what's the current situation of Kotlin in the market

Get 2 free ebooks just for attending! Join the Free Training!

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center_horizontal"

android:text="Foreground"/>

</LinearLayout>

[/xml]

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]

<?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>

[/xml]

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]

<?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>

[/xml]

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

[java]

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

}

});

}

}

[/java]

That’s the result:

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

Like this: Like Loading...