CT604A-N

Android Programming

Unit : 4 : Designing User Interfaces with Layouts

Data-Driven Containers

• GridView : List with specified number of rows and columns
• GalleryView : List with horizontal scrolling, typically images
• AdapterView : ListView, GridView, and GalleryView are sub classes of AdapterView (variants)
• Adapter: generates widgets from a data source, populates layout  E.g. Data is adapted into cells of GridView

Adapters

• Adapter: generates widgets from a data source, populates layout
• E.g. Data is adapted into cells of Grid View

Adapters

• When using Adapter, a layout (XML format) is defined for each child element (View)
• The adapter
• Reads in data (list of items)
• Creates Views (widgets) using layout for each element in data source
• Fills the containing layout (List, Grid, Gallery) with the created Views
• Child Views can be as simple as a TextView or more complex layouts / controls
• simple views can be declared in android.R.layout

Adapters

• Example: Creating ListView using AdapterArray
• Task: Create listView (on right) from strings below

Enumerated list

ListView of items

Organizing Screens with Tabs (Tab Layout)

• TabLayout is used to implement horizontal tabs.
• TabLayout is introduced in design support library to implement tabs.
• Tabs are created using newTab() method of TabLayout class.
• The title and icon of Tabs are set through setText(int) and setIcon(int) methods of TabListener interface respectively.
• Tabs of layout are attached over TabLayout using the method addTab(Tab) method.

Sequence Diagram

Entire Activity

Tab Layout

Tab Item

View Pager

Sequence Diagram

Fragment 1

Fragment 2

Fragment 3

View Pager

PageAdapter

extend

FragmentPageAdapter

Create a new Project

Step : 1 : Take Tab Layout

activity_main.xml

Design Section

Search TabLayout

Download TabLayout and add app dependancy

Go to its xml code

Change the layout to Linear Layout.

android : orientation = “vertical”

res

values

styles.xml

res

values

colors.xml

Step : 2 : activity_main.xml

Tablayout ID

Background Color of Tab

Text Color Within the Tab

Text Color of the selected Tab

Tab Indicator at bottom of the tab

Making of Tab Layout

Tab 1 ID

Making of Tab items

Text for Tab 1

Tab 2 ID

Text for Tab 2

Tab 3 ID

Text for Tab 3

Making of View Pager

ID of ViewPager

Making objects and reference

Object of tab layout

Object of tab items

Object of view pager

Reference of all

the objects

Making Page Adapter class

Errors

After implementation

of the methods

Constructor

Tab count to initialize the count of the tab

To return the tab count…

Make a switch to send which fragment is selcted

Making Fragments

new

Fragment

Fragment(blank)

Make 3 fragments having

name ftab1, ftab2 and ftab3

Making Fragments

Text which shows

in the fragment

Alignment

of the text

Color of the text

Size of the Text

Making Fragments

Cases of fragment to choose which fragment will be shown

Making Fragments

Making Fragments

To get current position of the fragment and notify

the fragment that your current position has been changed