Designing Your User

Interface Using Views

User Interface

Agenda
ViewFlipper
SlidingDrawer
TabLayout

ViewFlipper

A ViewFlipper allows you to switch between

views that are children of the ViewFlipper
You can find it in the Transitions menu in
Graphical Layout

ViewFlipper
<ViewFlipper
android:id="@+id/myViewFlipper"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
</ViewFlipper>

ViewFlipper
<ViewFlipper
android:id="@+id/myViewFlipper"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
</ViewFlipper>

Here I used
RelativeLayouts, but you
can place any widget you
want in here.

ViewFlipper
<ViewFlipper
android:id="@+id/myViewFlipper"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height=wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height=match_parent
/>
</ViewFlipper>

Here I also used just 2

Views. You can add more
than just 2 Views if you
want to.

ViewFlipper
ViewFlipper flipper;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
flipper = (ViewFlipper) findViewById(R.id.viewFlipper1);
flipper.setFlipInterval(500);
flipper.startFlipping();
}

ViewFlipper
ViewFlipper flipper;
@Override
public void onCreate(Bundle savedInstanceState) { Here we set the flipper to
flip every 500 milliseconds
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
flipper = (ViewFlipper) findViewById(R.id.viewFlipper1);
flipper.setFlipInterval(500);
flipper.startFlipping();
}

ViewFlipper
ViewFlipper flipper;
@Override
public void onCreate(Bundle savedInstanceState) { Here we set the flipper to
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
flipper.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
flipper.showNext();
}
});
}

flip when the flipper is

clicked

FrameLayout

FrameLayout is designed to block out an

area on the screen to display a single item.

FrameLayout should be used to hold a

single child view
o

it can be difficult to organize child views in a way

that's scalable to different screen sizes without the
children overlapping each other

FrameLayout

Example:

SlidingDrawer

hides content out of the screen and allows the user to

drag a handle to bring the content on screen

can be used vertically or horizontally

composed of two children views

o the handle, that the users drags
o the content, attached to the handle and dragged with it.

should only be used inside of a FrameLayout or a

RelativeLayout

SlidingDrawer

Note: the android:handle and android:content attributes

There needs to be children with id's matching these

attributes

SlidingDrawer - useful attributes

android:handle

android:content

android:orientation
o "vertical" or "horizontal"

android:allowSingleTap
o "true" or "false"
o allow the user to open the drawer by tapping on the
handle?

SlidingDrawer - useful methods

open()

close()

setOnDrawerScrollListener(OnDrawerScrollListener)

setOnDrawOpenListener(OnDrawerOpenListener)

setOnDrawerCloseListener(OnDrawerCloseListener)

TabLayout
It is used to wrap multiple activities into a single window
navigate through the activities using tabs

TabLayout - Anatomy
ACTIVITY

TabHost
o container holding TabWidget and
a FrameLayout

TabWidget
o row of tab buttons

FrameLayout
o container holding the tab contents
o each tab content is a child of
FrameLayout

TABHOST
TABWIDGET
FRAMELAYOUT
TAB CONTENT

TabLayout - XML
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

ACTIVITY

android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>

TABHOST
TABWIDGET
FRAMELAYOUT
TAB CONTENT

TabLayout - XML
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

ACTIVITY

android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

TABHOST
TABWIDGET
FRAMELAYOUT
TAB CONTENT

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>

Tabs are different Activities,

we can set and specify the
layout for each tab
programmatically

TabLayout

If you're going to have x number of tabs,

create x number of Activities, 1 for each tab,

in addition to the TabActivity (Host Activity).

You can create x number of XML layouts for

each tab, or you can reuse the same layout
for each tab.

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec;
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout

extend TabActivity

public class TabLayoutExampleActivity extends TabActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec;
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {

the XML file containing the

TabHost, TabWidget,
public void onCreate(Bundle
savedInstanceState) {
FrameLayout
@Override

super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec;
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {

Reference to the Activity's

super.onCreate(savedInstanceState);
TabHost (which was defined
in XML)
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

Reusable TabSpec for each

setContentView(R.layout.main);
Tab.
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
The TabSpec tells the TabHost

what views represent the

setContentView(R.layout.main);
tab contents and what the tab
buttons should look like.

TabHost tabHost = getTabHost();

TabHost.TabSpec spec;

Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);

spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;

Remember from the previous

lecture, this is how we use an
Intent object to start another
Activity

Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);

spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec
spec;
Refer to this TabActivity's

tab host (which will contain

the intent
actual= tabs)
Intent
new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;

Create a new tab spec, give

it the id "linear layout"

Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);

spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;

Set the label for the tab

(label the user sees) to
"Linear". And
Intent intent = new Intent(TabLayoutExampleActivity.this,
LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;

We're not using an image

for the tabs, so null for this
Intent intent = new Intent(TabLayoutExampleActivity.this,argument
LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;

Fill the FrameLayout to hold

the Activity specified by this
intent
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;

Add
the tab to the tabHost,
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);
it will now show up in the UI
spec = tabHost.newTabSpec("linear layout").setIndicator("Linear", null).setContent(intent);
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout
public class TabLayoutExampleActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent = new Intent(TabLayoutExampleActivity.this, LinearLayout.class);

To add another tab, let's do

specall
= tabHost.newTabSpec("linear
layout").setIndicator("Linear", null).setContent(intent);
this
over again!
tabHost.addTab(spec);
Intent intent = new Intent(TabLayoutExampleActivity.this, TableLayout.class);
spec = tabHost.newTabSpec("table layout").setIndicator("Table",null).setContent(intent);
tabHost.addTab(spec);
}

TabLayout - Rules

TabHost must have the id @android:id/tabhost

The TabWidget must have the id @android:id/tabs

The FrameLayout must have the id

@android:id/tabcontent

TabHost - useful methods

setCurrentTab(int)
o make this tab the active tab, making it visible in the
UI

setOnTabChangedListener(OnTabChangedListener)
o react to when the active tab changes