Programming with Android Introduction Layouts Luca Bedogni Marco

Programming with Android: Introduction Layouts Luca Bedogni Marco Di Felice Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna

Views: outline Main difference between a Drawable and a View is reaction to events Could be declared in an XML file Could also be declared inside an Activity Every view has a unique ID Use find. View. By. Id(int id) to get it Views can be customized Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 2

Some useful methods get. Left() get. Top() get. Measured. Width() get. Measured. Height() get. Width() get. Height() request. Layout() invalidate() Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 3

View. Group and layout View. Group is a view container It is responsible for placing other views on the display Every layout must extend a View. Group Every view needs to specify: android: layout_height android: layout_width A dimension or one of match_parent or wrap_content Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 4

Layouts Some layouts are pre-defined by Android Some of these are Linear. Layout Relative. Layout Table. Layout Frame. Layout Absolute. Layout A layout could be declared inside another layout Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 5

Linear. Layout Dispose views on a single row or column, depending on android: layout_orientation The orientation could also be declared via set. Orientation(int orientation) orientation is one of HORIZONTAL or VERTICAL Has two other attributes: gravity weight Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 6

Linear. Layout <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent" android: orientation="vertical" > <!-- Also horizontal --> <Button android: id="@+id/button 1" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="@string/button. String 1" /> <Button android: id="@+id/button 2" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="@string/button. String 2" /> </Linear. Layout> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 7

Linear. Layout Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 8

Linear. Layout <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent" android: orientation="vertical" > <Button android: id="@+id/button 1" android: layout_width="match_parent" android: layout_height="wrap_content" android: text="@string/button. String 1" /> <Button android: id="@+id/button 2" android: layout_width="wrap_content" android: layout_height="match_parent" android: text="@string/button. String 2" /> </Linear. Layout> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 9

Linear. Layout Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 10

Linear. Layout weight <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent" android: orientation="horizontal" > <Button android: id="@+id/button 1" android: layout_width="match_parent" android: layout_height="wrap_content" android: text="@string/button. String 1" android: layout_weight="1" /> <Button android: id="@+id/button 2" android: layout_width="match_parent" android: layout_height="wrap_content" android: text="@string/button. String 2" android: layout_weight="2" /> </Linear. Layout> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 11

Linear. Layout weight Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 12

Linear. Layout gravity <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent" android: orientation="horizontal" > <Button android: id="@+id/button 1" android: layout_width="match_parent" android: layout_height="wrap_content" android: text="@string/button. String 1" android: layout_weight="1" /> <Button android: id="@+id/button 2" android: layout_width="match_parent" android: layout_height="wrap_content" android: text="@string/button. String 2" android: layout_weight="2" android: layout_gravity="center_vertical" android: gravity="top|center" /> </Linear. Layout> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 13

Linear. Layout gravity Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 14

Linear. Layout problem Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 15

Relative. Layout Disposes views according to the container or according to other views The gravity attribute indicates what views are more important to define the layout Useful to align views Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 16

Relative. Layout <? xml version="1. 0" encoding="utf-8"? > <Relative. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="match_parent" android: layout_height="match_parent" > <Edit. Text android: id="@+id/username" android: text="username" android: input. Type="text" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_align. Parent. Right="true" android: layout_to. Right. Of="@+id/username. Label" > </Edit. Text> <Text. View android: id="@+id/username. Label" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_align. Baseline="@+id/username" android: text="Username" /> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 17

Relative. Layout <Edit. Text android: id="@+id/password" android: text="password" android: input. Type="text. Password" android: layout_below="@+id/username" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_align. Left="@+id/username" android: layout_align. Parent. Right="true" android: layout_to. Right. Of="@+id/username. Label" > </Edit. Text> <Text. View android: id="@+id/password. Label" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_align. Baseline="@+id/password" android: text="Password" /> </Relative. Layout> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 18

Relative. Layout Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 19

Table. Layout As the name say, similar to a Table Has some attributes to customize the layout: android: layout_column android: layout_span android: stretch. Columns android: shrink. Columns android: collapse. Columns Each row is inside a <Table. Row> element Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 20

Table. Layout <? xml version="1. 0" encoding="utf-8"? > <Table. Layout android: layout_width="fill_parent" android: layout_height="fill_parent" xmlns: android="http: //schemas. android. com/apk/res/android" android: id="@+id/table. Layout"> <Table. Row android: layout_width="wrap_content" android: layout_height="wrap_content“ android: id="@+id/first. Row"> <Button android: id="@+id/button 1“ android: layout_width="wrap_content“ android: layout_height="wrap_content“ android: text="Button" /> <Button android: id="@+id/button 2“ android: layout_width="match_parent" android: layout_height="match_parent" android: text="Button" /> <Button android: id="@+id/button 3" android: layout_width="match_parent" android: layout_height="match_parent" android: text="Button" /> </Table. Row> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 21

Table. Layout <Table. Row android: layout_width="wrap_content" android: layout_height="wrap_content" android: id="@+id/second. Row"> <Button android: layout_column="1" android: layout_span="2" android: id="@+id/button 4" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Button"> </Button> </Table. Row> </Table. Layout> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 22

Table. Layout Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 23

Frame. Layout and Absolute. Layout Frame. Layout Adds an attribute, android: visibility Makes the user able to define layouts managing the visibility of views Absolute. Layout Deprecated Specify position with x and y Pay attention to different resolutions Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 24

Adapters Used to visualize data Make a View. Group to interact with data Some methods: is. Empty() get. Item(int position) get. Count() get. View() Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 25

Adapter. View A View. Group subclass Its subchilds are determined by an Adapter Some subclasses: List. View Grid. View Spinner Gallery Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 26

List. View example public class Hello. Android. Activity extends Activity { @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. list); String[] data = {"First", "Second", "Third"}; List. View lv = (List. View)find. View. By. Id(R. id. list); lv. set. Adapter(new Array. Adapter<String>(this, android. R. layout. simple_list_item_1, data)); } } <? xml version="1. 0" encoding="utf-8"? > <List. View xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="vertical" android: id="@+id/list" /> Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 27

List. View Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 28

Other views/adapters Spinner, selection of multiple items Gallery, images Expandable. List. View, list with hidden values Tab. Widget, tabbed layouts Luca Bedogni, Marco Di Felice - Programming with Android – Layouts 29