Scribd
Upload
66 views36 pages

Designing Your User Interface Using Views

The document discusses different UI components for designing Android user interfaces including ViewFlipper, SlidingDrawer, and TabLayout. It provides code samples and explanations of how to implement each component. ViewFlipper allows switching between child views. SlidingDrawer hides and reveals content by dragging a handle. TabLayout organizes multiple activities into tabs within a single window.

Uploaded by

Kiko Doragon Inoue Tsubasa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
66 views36 pages

Designing Your User Interface Using Views

The document discusses different UI components for designing Android user interfaces including ViewFlipper, SlidingDrawer, and TabLayout. It provides code samples and explanations of how to implement each component. ViewFlipper allows switching between child views. SlidingDrawer hides and reveals content by dragging a handle. TabLayout organizes multiple activities into tabs within a single window.

Uploaded by

Kiko Doragon Inoue Tsubasa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

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

You might also like