Introductory Android Development

Transcription

1 Introductory Android Development Notes Quick Links & Text References Introduction Pages Layout Concepts Pages Layout Types Pages XML Overview Pages Common Attributes Layout Height & Width Pages Layout Margin Pages Layout Padding Pages Element ID Pages LinearLayout Attributes Pages Layout Weight Pages Layout Gravity Pages RelativeLayout Attributes Pages TableLayout Attributes Pages ScrollView Pages Defining Multiple Layouts Pages TextView Attributes Pages EditText Attributes Pages EditText Input Types Pages ImageView Attributes Pages Button Attributes Pages Activity Need to add section on Themes. Book Page 1 of 16

2 Notes Introduction In a manner similar to CSS, Android applications allow you to define your screen layout in a separate file. Layouts can also be manipulated at run-time using Java, just like JavaScript can manipulate the DOM. One extra feature that Android applications provide is the ability to define: different screen layouts for portrait and landscape mode, different layouts for different screen sizes (tablets, phones, etc.) different layouts for different screen resolutions The Android device running your application automatically selects the correct layout for its orientation, screen size and resolution. Activity Create a new Android project Layout Concepts Layouts are stored in XML files that are stored in the res folder in the project folder. When you first open the XML file, Eclipse may display the Graphical Layout tab. I find this tool very cumbersome. Feel free to experiment with it and use it if it suits you In this class I will be demonstrating all layouts using XML view (labeled with the name of the XML file). Click the tab below the views to switch to XML view. Page 2 of 16

3 Notes Layout Types Most commonly used layout types Linear Layout Table Layout Relative Layout Many screen layouts have other screen layouts embedded within them You can also include the contents of one layout file in another. In the screen snapshot above, main.xml includes the contents of history_layout.xml. This allows you to place common layout code in one file and the differing XML code in separate files. Each layout contains view objects (see below). The layout designates how these objects appear on the screen XML Overview XML files are raw text files that are organized into elements each of which has attributes describing the element. When you first create a project, Android inserts a RelativeLayout element (tag) into the layout and inside that, inserts a TextView (Hello world). Remove the TextView (unless you need one, then edit it) If you wish to use a LinearLayout or TableLayout, change RelativeLayout in both the opening a closing tags. As mentioned before, this primary layout (my term) can contain XML elements describing screen view objects and can also contain embedded layout elements (LinearLayouts inside RelativeLayouts, etc.) Activity Convert to a Linear Layout XML Comments Same as HTML <!-- Comment here --> Page 3 of 16

4 Notes Common Attributes Linear, Relative and Table layouts share the following attributes. Activity Copy the TextView element. Change the text of each Color background or textcolor Designate as #RRGGBB hexadecimal values background can also be an image android:textcolor="#ff0000" android:background="#fff468" Layout Height & Width When creating layout elements, you should designate a width and height for the layout Example: android:layout_width="match_parent" android:layout_height="match_parent" XML, like Java, is case sensitive, so be careful (I do a lot of copying and pasting). Height and width can be designated as match_parent Make the height/width the same width as its outer container For the primary layout, this matches the width/height of the screen Older code may use fill_parent. This is outdated, but still works. The primary layout is almost always match_parent for both height and width as in the example above. wrap_content Make the element s height/width just wide enough to hold its content Specific measurement The books I ve looked at designate that all measurements should be designated using dip but you may also use dp or px. dip and dp are basically the same thing device-independent pixel. Pixel size adjusts based on the resolution of the current device. Change color of first TextView to FFF468 Change #1 width to match parent Page 4 of 16

5 Notes Layout Margin By default elements are placed as close to each other as possible. To add space between elements, adjust the margin. android:layout_margin = "5dip" If a box were drawn around an element this would add 5dip outside the box edge. You can also designate the margin for just one side android:layout_margintop or Left or Right or Bottom Layout Padding You can also control how far text (usually) is separate within an element using padding. android:padding = "5dip" Note padding is not preceded by layout If this attribute were applied to a button, the button s text would be 5dip from the inside edge of the button You can also designate the margin for just one side android:paddingtop or Left or Right or Bottom New : android:padding="@dimen/padding_medium" See res/values Element ID Elements that will be modified by code must include an id attribute, linking the layout to the code. android:id="@+id/itemname" If the same element is referenced again in the same XML file (see RelativeLayout), you don t include the +. It is only used the first time you define the element. Activity Set #1 marginleft to 15 dip CHANGE padding for #1 to 35dip Set paddingleft for #2 to -5dip Provide id for each element Page 5 of 16

6 Notes LinearLayout Attributes LinearLayouts can include an orientation attribute Activity Ensure orientation is vertical android:orientation = "value" horizontal (default). Each object is placed to the right of previous object until the screen width is filled, then a new row is started. vertical Each object is placed below the previous object Tip: Are elements not showing up on the screen? You probably forgot the orientation for the LinearLayout. Any element defined after an element that is designated match_parent will be off the screen and invisible. I always designate an orientation for a LinearLayout. Layout Weight When a layout element contains more than one element, you can designate what percentage each element takes up within its container element. android:layout_weight = "50" Another, more confusing option, allows you to use simple numbers to designate weight. Android adds up all the numbers, determines the percent of total for each object. Assume these four attributes are in four different elements: android:layout_weight = "1" android:layout_weight = "1" android:layout_weight = "1" android:layout_weight = "2" Android adds up these numbers (5). The first three elements are all the same size (1/5 = 20%). The last element will be twice as large (2/5 = 40%). Note margins and padding are considered in the calculations Change weights to 75/25 Change weights to 1 and 3 Page 6 of 16

7 Notes When defining weights it s a good idea to set the height (vertical layout) or width (horizontal layout) to 0dp otherwise the widget may expand to accommodate its contents, messing up the weights. Layout Gravity and gravity Resource By default, elements gravitate/float to the top/left android:layout_gravity = "value" Values left (default) center_horizontal right center_vertical (used to center text up and down on their baselines) center (both horizontal and vertical) According to resource, in vertical, linear layout, only left-center-right layout_gravity make sense gravity generally refers to the text within a TextView Activity Set height to 0 Remove one TextView Remove weight RelativeLayout Attributes In a RelativeLayout, you normally designate how an element should be positioned relative to another element that was previously defined or relative to the parent container. If you don t designate a relative position, all objects are placed in the upper left corner of the screen Relative to parent android:layout_ alignparenttop or Bottom or Left or Right centerhorizontal centervertical centerinparent (center horizontally and vertically) Copy the main.xml file. Rename the copy main_linear (keep for reference) Using main.xml: Change to RelativeLayout Remove orientation Remove all but one TextView Remove gravity/weight Assign a Boolean value to the attributes above android:layout_centerinparent = "true" Add a 2 nd text view (no relative positioning). Note overlap Experiment with alignment in parent Page 7 of 16

8 Notes Relative to other element android:layout_ above below toleftof torightof aligntop or Bottom or Left or Right alignbaseline (baseline is invisible line text sits on) Assign the address of the object to align with android:layout_aligntop = "@id/btnok" Activity Center in Parent Add an EditText, width 150dp. Test. Note location. Name both the TextView and EditText Put EditText below TextView (align left edge) Undo Note: no + in this reference Normally, btnok would be defined first in the layout, but the most recent Android compilers are multi-pass so you can define btnok after. Put EditView to right of TextView Align baselines Using RelativeLayout, you can cause objects to overlap Example, one element fills container, another element is centered in container. Forward References Android allows objects to reference other objects that are not yet defined, defined later in the XML The key here is put the + in the id on the first reference to an object Page 8 of 16

9 Example: TextViews are smaller than EditText so you ll want to align their baselines. TextViews are often defined before the EditText they are supposed to align with. <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello, Volker" android:textcolor="#ff0000" android:background="#fff468" /> <EditText android:layout_width="150dp" android:layout_height="wrap_content" /> My first instinct is to put the + in the etinput id of the EditText. But, that s not the first time it s referenced (see highlighted text) Page 9 of 16

10 TableLayout Attributes Table layouts allow you to define tables with cells that contain elements (including other layouts) similar to HTML tables. Copy main.xml to main_relative.xml In main <TableRow> <TextView /> <ImageView /> </TableRow> You designate how many rows are in a table using <TableRow> elements. Each element to be added to a row is placed in a separate column (two columns in the example above). The number of columns in the entire table is determined by the row with the most columns BIG NOTE: elements in a table cell are automatically stretched to match the width of the cell/column. Column widths match the widest item in the column. (unless stretched-see below) android:layout_span = "2" Use this attribute in an element (like a button or image) to designate how many columns the element should take up (span). Similar to the colspan CSS attribute. android:layout_column = "2" Use this attribute in an element (like a button or image) to force it to appear in a designated column (0-based indexing) Page 10 of 16

11 android:stretchcolumns = "1" Use this attribute in the TableLayout element. The column number designated will stretch to fill the container. You list multiple columns separated by commas android:shrinkcolumns = "1" Use this attribute in the TableLayout element. The column designated will use word wrap to shrink But only if there s not enough room for the whole table. android:collapsecolumns = "1" Use this attribute in the TableLayout element. Hides a column. Advanced technique, normally done at run-time. ScrollView If your screen contains more data than can fit on the screen, you can include a scrollbar on the screen by placing all elements inside a ScrollView element. If you don t, the user can still scroll through the hidden objects, but there won t be a visual clue on the screen that more data exists. Page 11 of 16

12 Defining Multiple Layouts As mentioned in the overview, Android allows you to define multiple layouts for different devices and different screen orientations on the same device. In one of my programs the default font used by Android looks fine on a phone (small screen) but seems to be about 5 pt (way too small) on my tablet (large screen) Appropriate layout folder names Use must use these names for your layout folders so that Android can use the most appropriate one based on the device. Note the file names use dashes, not underscores layout-land (landscape orientation) layout-small (older devices, not used much anymore) layout-normal (probably wouldn t use this same as layout) layout-large layout-xlarge (tablets) layout-ldpi layout-mdpi layout-hdpi layout-xhdpi These are not used as much because layout is rarely affected by screen resolution (especially in this class). Most devices are hdpi or xhdpi. Attributes can be combined in folder names layout-xlarge-xhdpi-land See Page 12 of 16

13 Multi-Layout Overall Concept If you define multiple layouts, some elements are the same in all versions. To simplify updating you can place the common elements in one XML file (let s say it s called main.xml) and the varying elements in another (in the same layout folder). To begin, define the (normal) layout and ensure it works correctly Extract (cut) the component(s) from the layout that will be different on different devices/resolutions/orientations and store them in a new layout file Right-click layout foldernewandroid XML file. Name the file appropriately Paste the component(s) cut from the main layout file. Now the (main) layout file only contains the components that are common to all layouts for all devices, all resolutions, all orientations. Import the varying file s contents into the common file To include one XML in another: <include layout="@layout/history_layout" android:id="@+id/history" /> The file named history_layout(.xml) is imported into this location of the main XML file See Layout Concepts on page 1 This example also adds an ID to the layout because the application changes the history at run-time using Java. You d only include an ID if your element is changed at runtime. Page 13 of 16

14 Copy the varying file (history_layout in the example above) to another layout folder (e.g. layout-land) Note you ll have to create these folders in the res folder manually using the names listed above. Leave the name the same. Every copy of the varying file should have the same name but be stored in a different folder. Modify the varying file as appropriate for this layout. Note the main XML is not copied. It is only stored in the (normal) layout folder and includes the varying file. The main XML doesn t have to figure out which copy of the varying file to import (they should all have the same names). The Android device will import the appropriate file from the appropriate folder based on its size/resolution/orientation. TextView and EditText Attributes These notes include TextView, EditText, ImageView and Button attributes. Later notes will include attributes for the screen view elements discussed in those notes. Some of these attributes are more appropriate for EditText than TextView Good resource android:text = "your text here android:textsize = "20dp" android:textcolor = "#AA8800" android:textstyle = "bold italic" android:capitalize = "true" android:digits = "true" (only accept digits) android:typeface = "sans" or serif or monospace or normal android:hint = "Information here" (tooltip) android:inputtype = "number" Also phone datetime date time text Modifies onscreen keyboard android:lines = "3" android:maxlength = "20" android:numeric = "true" (similar to digits) android:password = "true" Custom fonts: Good resource Also see U7Inclass Page 14 of 16

15 EditText Input Types The latest versions of the SDK require you specify an android:inputtype for each EditText If you don t, you ll get a warning but your app should still run InputTypes do not change the appearance of the EditText in any way, but they do control which on-screen keyboard appears. To see on-screen keyboards, turn off in the AVD definition Reference Common values: text (plain text) textcapcharacters (all uppercase) textcapwords texturi (web address) text address textpassword number numbersigned numberdecimal phone datetime date time Use the appropriate inputtype to enhance your user s experience. ImageView Attributes Good resource android:maxwidth = "100dip" android:maxheight = "100dip" android:scaletype = "fitcenter" See resource for other options android:src = "@drawable/volker" Copy image to drawable-hdpi folder Note extension not included Page 15 of 16

16 Button Attributes Good resource android:text = "OK" Many of the same attributes from TextView See also ButtonImage view element Page 16 of 16