Programming with Android Introduction Layouts Luca Bedogni Marco
Programming with Android: Introduction Layouts Luca Bedogni Marco Di Felice Dipartimento di Scienze dell’Informazione 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
- Slides: 29