Scribd
Upload
41 views

Getting To Know The Android Ui: UNIT-3

The document discusses key concepts related to building user interfaces in Android, including: 1. Views and ViewGroups which are the basic building blocks of Android UIs. Common ViewGroups include LinearLayout, RelativeLayout and TableLayout. 2. Adapting to different screen orientations by anchoring views, resizing, and repositioning on orientation changes. 3. Managing state changes during orientation changes using onSaveInstanceState() and onRestoreInstanceState(). 4. Utilizing the ActionBar for displaying application icons and actions. 5. Programmatically creating UIs in code instead of XML layout files.

Uploaded by

nandini p
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
41 views

Getting To Know The Android Ui: UNIT-3

The document discusses key concepts related to building user interfaces in Android, including: 1. Views and ViewGroups which are the basic building blocks of Android UIs. Common ViewGroups include LinearLayout, RelativeLayout and TableLayout. 2. Adapting to different screen orientations by anchoring views, resizing, and repositioning on orientation changes. 3. Managing state changes during orientation changes using onSaveInstanceState() and onRestoreInstanceState(). 4. Utilizing the ActionBar for displaying application icons and actions. 5. Programmatically creating UIs in code instead of XML layout files.

Uploaded by

nandini p
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 43

UNIT-3

GETTING TO KNOW THE


ANDROID UI
Topics to be covered
• INTRODUCTION
• VIEWS AND VIEWGROUPS
• ADOPTING TO DISPLAY ORIENTATION
• MANAGING CHANES TO SCREEN ORIENTATION
• UTILIZING THE ACTION BAR
• CREATING USER INTERFACE
PROGRAMMATICALLY
• LISTENING FOR UI NOTIFICATIONS
• Introduction
Activity draws the screen using views
and view groups
 VIEWS and VIEWGROUPS
• View-Basic building block of UI is view object which is
created from the view class and occupies a
rectangular area on the screen.
-Base class for widgets which are used to create
interactive UI components like buttons, text fields etc.
• View groups-is a subclass of view and provides
invisible container that holds other views.
-Provides layout in which we can order the appearance
and sequence of views.
Android View groups
• LinearLayout
• AbsoluteLayout
• Table Layout
• RelativeLayout
• FrameLayout
• Scrollview
LinearLayout
• Is a view group that aligns all children in a
single direction –vertically or horizontally
• Example-compose e-mail window
• Attributes-
LinearLayout
• Width and Height are the dimensions of
view/layout specified in terms of
1. dpi-density independent pixels
2. spi-scale independent pixels
3. pt-points of x and y coordinates
4. px-pixels
5. mm-milimeters
6. in-inches
Cont….
• We can specify measurement or will use one of these
constants to set width and height
• #android:layout_width=wrap_content---it tells your
view to size itself to dimensions required by its content.
• #android:layout_width=fill_parent---tells your view to
become as big as its parent view
• #android:layout_gravity---specifies how child views are
positioned.
• #android:layout_weight---specifies how much extra
space in the layout should be allocated to the view
Wrap content Vs Fill Parent
Layout_gravity
Layout_weight
AbsoluteLayout
• Lets us to specify exact location of children
(x/y coordinates)
• android:layout_x
• android:layout_y
AbsoluteLayout
TableLayout
• It arranges groups of views into rows and
columns.
• Uses <tablerow> where each row can contain
one or more views.
• Each view you place within a row forms a
cell. The width of each column is determined
by the largest width of each cell in that
column
TableLayout
RelativeLayout
• Enables to specify how child views are
positioned or relative to each other.
• View copies the top edge of the view
Attributes of RelativeLayout
• layout_alignParentTop
• layout_alignParentLeft
• layout_alignLeft
• layout_alignRight
• layout_below
• layout_centerHorizontal
RelativeLayout
FrameLayout
• Designed to block out an area on the screen to
display single item or view which are always
anchored to the top left of layout
• We can also have FrameLayout within
realtiveLayout
Single item in FrameLayout
Frame layout within Relativelayout
Scrollview
• Is special type of FrameLayout which groups
several items and display them in vertical
scrollable lists.
• Also display in grid view which is 2-
dimensional contains rows and columns
Scrollview
Gridview
 Adopting to display orientation
• Key feature in smartphones
• Types
1. Unspecified-default value-system chooses
the orientation
2. Portrait-taller and wider
3. Landscape-wider not taller
4. Sensor-orientation determined by device
orientation sensor
Cont…
• How it works-when you change the display
orientation of your Android device, the
current activity that is displayed automatically
redraws its content in the new orientation.
-This is because the onCreate() method of the
activity is fired whenever there is a change in
display orientation.
Cont..

• To handle changes in screen orientation


1. Anchoring:”anchor” your views to the four edges of the screen. When the
screen orientation changes, the views can anchor neatly to the edges.

Attributes:
• layout_alignParentLeft — Aligns the view to the left of the parent
view
• layout_alignParentRight — Aligns the view to the right of the parent
view
• layout_alignParentTop — Aligns the view to the top of the parent
view
• layout_alignParentBottom — Aligns the view to the bottom of the
parent view
• layout_centerVertical — Centers the view vertically within its
parent view
• layout_centerHorizontal — Centers the view horizontally within its
parent view
Anchoring…
2. Resizing and repositioning: ultimate technique is
resizing each and every view according to the current
screen orientation by creating a separate res/layout
folder containing the XML files for the UI of each
orientation.
-To support landscape mode, you can create a new folder
in the res folder and name it as layout-land
Additional attributes:
Layout_top_middle
Layout_bottom_middle
Resizing and repositioning
 Managing changes to screen orientation
• Discusses what happens to an activity’s state
when the device changes orientation .
• The current activity is destroyed and
recreated,so data may be lost
Cont…
• Persisting state information during changes in configuration.
-When activity is killed 2 methods are called
• onPause() — This method is always fired whenever an activity is killed or pushed
into the background.
• onSaveInstanceState() — This method is also fired whenever an activity is about
to be killed or put into the background.
-unlike onPause() ,this method is not called when user pressed the back button
because its not necessary to restore
-this method provides a Bundle object as an argument so that it is used save our
activity’s state.
@Override
public void onSaveInstanceState(Bundle outState) {
//---save whatever you need to persist---
outState.putString(“ID”, “1234567890”);
super.onSaveInstanceState(outState);
}
Cont…
-When activity is recreated the oncreate() method is first
fired,followed by onRestoreInstancaState() method,
which enables you to retrieve the state that you saved
previously in onSaveInstance method through bundle
object.
@ Override
public void onRestoreInstanceState(Bundle
savedInstanceState) {
super.onRestoreInstanceState(savedInstanceState);
//---retrieve the information persisted earlier---String ID =
savedInstanceState.getString(“ID”);
}
-To save complex data structures, bundle object is not sufficient, so to handle this we use
onRetainNonConfiguarationInstance() method.

@Override
public Object onRetainNonConfigurationInstance() {
//---save whatever you want here; it takes in an Object type---
return(“Some text to preserve”);
}
-this method returns an Object type, which allows us to return any data type.
-to extract data in oncrete() method it uses getLastNonConfiguarationInstance() method.
@Override
public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Log.d(“StateInfo”, “onCreate”);
String str = (String) getLastNonConfigurationInstance();
}
Cont.
• Detecting Orientation Changes:
-if we need to know the device’s current
orientation during runtime. To determine that,
you can use the WindowManager class.
WindowManager wm = getWindowManager();
Display d = wm.getDefaultDisplay();
Cont..
• Controlling the Orientation of the Activity
-we might want to ensure that your application is displayed in
only a certain orientation.
- For example, you may be writing a game that should be
viewed only in landscape mode.
-In this case, you can programmatically force a change in
orientation using the setRequestOrientation() method
• //---change to landscape mode---

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION
_LANDSCAPE);
 UTILIZING THE ACTION BAR
• Newer feature introduced in Android 3 and 4
is the Action Bar.
• In place of the traditional title bar located at
the top of the device’s screen.
• the Action Bar displays the application icon
together with the activity title.
• Optionally, on the right side of the Action Bar
are action items.
Customizing the Action Items and
Application Icon
• The menu items are displayed without the text.
If you want to display the text for the action item
together with the icon, you could use the “|”
operator together with the
MenuItem.SHOW_AS_ACTION_WITH_TEXT
constant:
 CREATING THE USER INTERFACE
PROGRAMMATICALLY
• So far we have seen how UI has been created
using XML.
• Beside that we can also create UI using Code
• This helps to generate UI dynamically during
runtime.
• Refer the code in page number 146
CREATING THE USER INTERFACE
PROGRAMMATICALLY
• How it works:
• In this example, you first commented out the setContentView()
statement so that it does not load the
• UI from the main.xml fi le.
• You then created a LayoutParams object to specify the layout
parameter that can be used by other
• views (which you will create next):
//---param for views---
LayoutParams params =
new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT);

You might also like