Home > Design Patterns > UI Design – Keep the Bar Floating

UI Design – Keep the Bar Floating


One of very common UI design patterns I see is: display top and bottom bar in floating state.

It looks very nice and close to users for interaction.

UI Design - Floating Bar

UI Design - Floating Bar

As you see in this image, the bottom bar containing one button always appears sticky to the bottom of the screen, even when I try to scroll up or down the list, it is still there.

You might read about my previous articles on Creating float View using FrameLayout, that solves this UI design pattern we are discussing about. However, it has several weaknesses:

– First, when you scroll up or down, the floating view is not displayed, it appears only when there is a trigger to the container layout, like: clicking to the list item…

– Second, when you click or hold your click on the view that stays behind your floating view, the floating view is hidden behind, of course, not displayed as well.

– Third, the drawable or color of floating view is unstable when you make changes to the view behind it.

Happily, after asking Mr. Google, I’ve found another solution for this UI design pattern.

It is, using RelativeLayout and define the floating bar position on the screen using layout_alignParentXXX attributes.

I refer it from here: Click to visit the reference!

I give it a try and it works like a charm! Just great it is!

Here the layout I create for the above demonstration image:

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

	<ListView
		android:id="@+id/lvMain"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
	/>

	<LinearLayout
		android:id="@+id/layout_bottom_bar"
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:gravity="center"
		android:layout_alignParentBottom="true"
		android:background="#222222"
		android:padding="5dip"
		android:clickable="true"
	>
		<Button
			android:id="@+id/btnMore"
			android:layout_width="120dip"
			android:layout_height="wrap_content"
			android:text="More Songs"
			android:gravity="center"
			android:padding="5dip"
			android:background="#000000"
			android:textColor="#FFFFFF"
		/>
	</LinearLayout>

</RelativeLayout>

Well, do you like it or not?

Cheers,
Pete Houston

Categories: Design Patterns Tags: , , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: