Pages
Android ScrollView
11:45 PM
Posted by Mina Samy
to overcome this we use ScrollView which gives us a scrollable layout for large data.
Suppose that our activity displays a large number of controls or content like this layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/txt"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 4"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 5"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 6"
/>
</LinearLayout>This is a linear layout that displays a TextView with large text and some Buttons. As we can see, not all the buttons are displayed and that the layout does not fit in the device screen.
The solution to this problem is to use ScrollView as a container for the controls and a scroll bar to make the layout fit in the screen.
We will now change the layout with this code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/txt"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 4"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 5"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 6"
/>
</LinearLayout>
</ScrollView>As you can see the result is a scroll bar that we can use to see all the controls within the layout like this:Remember, the ScrollView can have only one child control, so we can make a container (Linear, relative, Table Layouts) the child of the ScrollView and put all the controls inside this child.
So what do we do if we want to display this layout Horizontally ? In this case we're going to use another container which is HorizontalScrollView. This container acts the same as the ScrollView except that it scrolls child controls horizontally.Now our layout will be like this:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/txt"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 4"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 5"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 6"
/>
</LinearLayout>
</HorizontalScrollView>In order to achive the Horizontal scrolling, we had to change the Orientation of the child LinearLayout to Horizontal.
You may have noticed that the scroll bar disappears (fades out) after scrolling, you can set the time interval in which the scroll bar fades out by setting this time interval (in milli-seconds) through the android:scrollbarFadeDuration property. To make the scroll bar always visible we set the time interval to zero: android:scrollbarFadeDuration="0".| Reactions: |
Layouts in Android
11:29 PM
Posted by Mina Samy
The layout of an activity can be constructed by a XML file. These files are considered resources as they reside in res/layout folder. Each xml file consists of the declarations of widgets and their containers. The xml file is constructed in a hierarchical way, there is a tag that defines the layout of the widgets, inside this tag there are nested xml tags that define widgets, each widget tag has attributes that define the widget’s properties.
Let’s take a look at a simple layout xml file called main.xml which resides in res/layout directory:
<Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="this is a button 1" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="this is a button 2" />
This layout defines a textView and a button. We see that the root xml node is
node which defines the layout of all controls inside it.
We use the following code to construct the UI based on this xml definition
setContentView(R.layout.main);Also the TextView node contains attributes like
layout_width
which can have the values fill_parentwhich denotes the the width of the control should occupy all the available width, also it could have the value wrap_contentwhich denotes the control should occupy only width according to the width of its content which is the text inside the textView
The Button node has an extra attribute which is the android:id attribute, why this attribute is used in the button and not used in the TextView? The answer is that the TextView represents a label (just a static text to display) so there is no need to give it an id cause we will not reference it in the code, however if we need to display dynamic text in the TextView we can give it an id
To reference a control from the code we do it like this:
Button btnLaunch; btnLaunch=(Button)findViewById(R.id.btnLaunch);
notice that the android:id attribute should be in the format of @+id/Control’sID as shown above, if you write it like android:id=”btnLaunch" the IDE would denote an error and you won’t be able to reference the control from the code.
Why to use XML-layouts and when to construct the layout programmatically ?
- Using xml layouts achieves separation between the interface and the application logic, instead of writing a bulk of code that constructs the UI, defining it as XML is easier and less confusing.
- You can save using code for constructing more complicated UI such as populating check-box columns in a grid.
- It is a trend to construct the UI with XML definitions like in Microsoft’s XAML or even HTML, so people who are familiar with technologies like these would find it easy to deal with Android.
We have many layout forms:
- Linear layout: manages controls in horizontal or vertical way.
- Table layout: manages the controls in a group of columns and rows.
- Relative layout: manages the controls relative to one another or to the parent.
- Absolute layout: manages the controls in absolute position by coordinates.
- Frame layout: manages the controls in a dynamic way.
- Scroll layout: manages the controls in a scrollable layout.
| Reactions: |
Android Layout properties
8:45 AM
Posted by Mina Samy
Property | Possible Values | Notes |
android:layout_width |
| |
android:layout_height | Same as android:layout_width | |
android:orientation | Vertical or horizontal | Used as a property for the container in LinearLayout |
android:layout_weight | Numeric value: determines the ratio by which widgets share empty soace in the container. The lower value occupies more space | |
android:layout_gravity |
| |
android:gravity | Same as android:layout_gravity | Used for the content of a widget |
android:padding |
| |
android:paddingTop |
| |
android:paddingBottom |
| |
android:paddingRight |
| |
android:paddingLeft |
| |
android:layout_alignParentTop | True|false: used in relative layout, aligns the widget’s top edge with the top of the container | |
android:layout_alignParentBottom | True|false: used in relative layout, aligns the widget’s top edge with the bottom of the container | |
android:layout_alignParentLeft | True|false: used in relative layout, aligns the widget’s left edge with the left of the container | |
android:layout_alignParentRight | True|false: used in relative layout, aligns the widget’s right edge with the right of the container |
| Reactions: |
Table layout
8:44 AM
Posted by Mina Samy
In android you define the number of rows by your own and android determines the number of cells in each row according to the number of widgets in each row
You can define a table and add rows and views to it like this:<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Submit" />
TableLayout tl=new TableLayout(this);
TableRow tr=new TableRow(this);
Button btn=new Button(this);
btn.setText("Hello");
tr.addView(btn);
tl.addView(tr);
setContentView(tl);
This example represents a row with three cells.A table cell can span multiple columns like this:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Submit" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cancel" />
Also you can choose which column to put your widget by using android:layout_column property, you define the Zero-based index of the column where you want your widget to be.
Note: if you specify an index greater than the actual cells count, the widget won’t appear. For example in the previous example if android:layout_column had a value greater than 2 the widget wouldn’t appear.<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Submit" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cancel" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Help" android:layout_column="1" />
Table layout also allows you to put widgets directly under the <TableRow> tag to act as a separator between rows.
These widgets will have their width set to fill_parent.
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Submit" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cancel" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Help" android:layout_column="5" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Separator" />
In table layout each column occupies space equal to the size of the largest widget in it. But you can set the width of any column to take the largest available space, just like setting the width to 100 % in HTML. This is done by setting the property android:stretchColumns to the index of the column, also you can set multiple columns by separating them with a comma.
Look at the layout below:
Now we gonna to add android:stretchColumns="0" to the table layout and see what it’s gonna look like:
Column 0 occupied the largest available space.
You can set this property from code like this
TableLayout tl=new TableLayout(this); tl.setColumnStretchable(0, true);the setColumnStretchable(ColumnIndex, IsStretchable)method parameters are the column index and a Boolean value to indicate it is going to be stretched.
Now if we have a column that have a large content. Android columns by default do not wrap their content. Look at this layout:
See column zero occupies large space that column 1 is not visible.
We can use android:shrinkColumns property to wrap content of a certain column or for multiple columns by assigning column numbers separeted by commas.
When we use the property with column zero it will be like this:
Its like using style=”white-space:wrap;” style in HTML
You can set the property from code like this:
TableLayout tl=new TableLayout(this); tl.setColumnShrinkable(0, true);The setColumnShrinkable(columnIndex, isShrinkable) method parameters are the column index and a Boolean to indicate it si going to be shrinked.
Finally if you want to make some columns invisible you can use the property android:collapseColumns the same way we used the last two properties
See that column zero is invisible.
You can use this property from code like this:
TableLayout tl=new TableLayout(this); tl.setColumnCollapsed(0, true);The property setColumnCollapsed(columnIndex, isCollapsed) parameters are the column index and a Boolean to indicate that it’s going to be collapsed
This is just like using the style=”display:none;” in HTML
Other functions can be called from code:
TableLayout.setShrinkAllColumns(Boolean shrinkAllColumns) : shrinks all colums
TableLayout.setStretchAllColumns(Boolean stretchAllColumns): stretches all columns
| Reactions: |
Frame Layout
3:08 AM
Posted by Mina Samy
See this example the view has two image views but only one of them is displayed at a time which is the last view defined in the file. The frame layout displays views as if they are in a stack.
If we have two image views one displays a blue box and the other displays a red box, the blue is bigger than the red one, it would be like this:
| Reactions: |
Absolute layout
5:30 AM
Posted by Mina Samy
The reason of that is that it won’t be compatible with all the android phones as they have different screen sizes and resolutions.
absolute layout lays widgets by specifying their exact X and Y positions. In android the origin (0,0) coordinate is located at the top left of the screen
absolute layout is defiend in XML as <AbsoluteLayout>
by default, if you define any control in absolute layout without defining it’s x,y coordinates, it will be placed in the origin point at (x,y)=(0,0)
if you define x,y values that are too large, the widget will not appear on the screen
you can specify the values of x and y by many units as shown
To define absolute layout from the code you can use the following code:<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="placed at 100,130 pixels (px)" android:layout_x="100px" android:layout_y="130px" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="placed at 0,150 points (pt)" android:layout_x="0pt" android:layout_y="150pt" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="placed at 0.7,0.5 inches (in)" android:layout_x="0.7in" android:layout_y="0.5in" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="placed at 3,3 millimeters (mm)" android:layout_x="3mm" android:layout_y="3mm" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="placed at 0,270 density independant pixels (dp)" android:layout_x="0dp" android:layout_y="270dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="placed at 0,180 scale independant pixels (sp)" android:layout_x="0sp" android:layout_y="180sp" />
AbsoluteLayout abslay=new AbsoluteLayout(this);
Button btn=new Button(this);
btn.setText("Hello");
abslay.addView(btn, new AbsoluteLayout.LayoutParams(AbsoluteLayout.LayoutParams.WRAP_CONTENT,AbsoluteLayout.LayoutParams.WRAP_CONTENT,10,100));
setContentView(abslay);
the absolutelayout.layoutparams function has the following constructor:AbsoluteLayout.LayoutParams(width,height,position X,position Y)
| Reactions: |
Relative layout
8:52 AM
Posted by Mina Samy
As we said in relative layout widgets can be placed
- Relative to the container.
- Relative to other widgets
The widgets are placed in position relative to their container like by setting the following properties:
- android:layout_alignParentTop|Bottom|Right|Left to true. This aligns the Top|Bottom|Right|Left side of the widget with the Top|Bottom|Right|Left side of the container.
- android:layout_centerVertical: the widget should be positioned vertically in the center of the container.
- android:layout_centerHorizontal: the widget should be positioned horizontally in the center of the container.
- android:layout_centerInParent: the widget should be positioned both vertically and horizontally in the middle of the container.
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android:layout_alignParentTop" android:layout_alignParentTop="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android:layout_alignParentBottom" android:layout_alignParentBottom="true" />
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android:layout_alignParentLeft" android:layout_alignParentLeft="true" />
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android:layout_alignParentRight" android:layout_alignParentRight="true" />
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android:layout_centerVertical" android:layout_centerVertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android:layout_centerHorizontal" android:layout_centerHorizontal="true" />
Position Relative to other widgets’ positions:<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android:layout_centerInParent" android:layout_centerInParent="true" />
There are four properties that determine the position of the widget in relation to other widgets:
- android:layout_above: the widget should be placed above the referenced widget.
- android:layout_below: the widget should be placed below the referenced widget.
- android:layout_toRightOf: the widget should be placed to the right of the referenced widget.
- android:layout_toLeftOf: the widget should be placed above the referenced widget.
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" android:id="@+id/btn2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1 is below button2" android:layout_below="@id/btn2" android:id="@+id/btn1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3 below button 1" android:layout_below="@id/btn1" android:id="@+id/btn3" />
As we saw that there are properties that define the alignment of a widget relative to the container, there are also five properties that determine the position of the widget in relation to other widgets:<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" android:id="@+id/btn2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1 is to the right of button2" android:layout_toRightOf="@id/btn2" android:id="@+id/btn1" />
- android:layout_alignTop|Bottom|Right|Left: indicates that the widget’s Top|Bottom|Left|Right should be aligned with the Top|Bottom|Right|Left of the widget referenced in the property.
- android:layout_alignBaseLine: indicates that the two widget’s baselines should be aligned.
Notes:<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" android:id="@+id/btn2" android:layout_centerVertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1 is aligned to the top & Bottom of button2" android:layout_alignTop="@id/btn2" android:layout_toRightOf="@id/btn2" android:layout_alignBottom="@id/btn2" />
- When you reference a widget in a relative layout property, you must assure that this widget has been already defined in the layout.
- When you use the value fill_parent to assign athe height of a widget in a relative container, it could occupy all the available space so that any further controls defined in the xml file would not appear.
- When referencing another control in relative layout property, we use the notation “@id/widgetID”.
| Reactions: |
Linear layout
8:54 AM
Posted by Mina Samy
When dealing with Linear layout there are five properties that we can deal with:
- Oientation.
- Fill model.
- Weight
- Gravity.
- padding.
Orientation property determines whether the controls would be put in a horizontal way like in a row or in a vertical way like a column. The layout orientation is set by the property android:orientation
Vertical orientation:
Horizontal Orientation<button android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="this is a button 1" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="this is a button 2" />
<Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="this is a button 1" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="this is a button 2" />
If you want to set the orientation programmatically you can use this code
android.widget.LinearLayout mainLayout=new LinearLayout(this); mainLayout.setOrientation(LinearLayout.VERTICAL);Fill Model:
The widgets inside linear layout have width and height properties. These properties can have three values:
- A numeric value in pixels or inches that gives the width or height properties an absolute value.
- They can have the value wrap_content meaning the widget should occupy it’s natural size unless there is no space then android can use word wrap to make the widget fit.
- They can have the value fill_parent meaning the widget should occupy all the available space of the closing container.
Button b=(Button)findViewById(R.id.btn); b.setWidth(LayoutParams.WRAP_CONTENT); b.setHeight(LayoutParams.FILL_PARENT);This is an example to two buttons one with width set to fill_parent and the other set to wrap_content
Weight:
The weight property determines the ratio by which controls share free space. For example if we have two buttons and the weight of both is set to 1 (this is the default value) then the free space will be divided equally between them.
But if the value of the weight of one of them is 2 and the other is one, then the first button will occupy space half as that occupied by the second and so on.
<button android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent" android:text="weight set to 2" /> <button android:id="@+id/btn" android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent" android:text="weight set to 1" />
Button b=(Button)findViewById(R.id.btn); LayoutParams params=new android.widget.LinearLayout.LayoutParams(android.widget.LinearLayout.LayoutParams.FILL_PARENT,android.widget.LinearLayout.LayoutParams.FILL_PARENT,3); b.setLayoutParams(params);the widget does not have a method to set the weight directly, instead you define
LayoutParams params=new android.widget.LinearLayout.LayoutParamsobject and use the widget. setLayoutParams(params) method.
The LayoutParams class has many constructors including this one
public LinearLayout.LayoutParams (int width, int height, float weight)Gravity:
By default widget are positioned in the top-left of the screen, but if you want to change this you can use the layout_gravity property
<button android:layout_gravity="left" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="left"> /<button android:layout_gravity="center" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="center" /> <button android:layout_gravity="center_vertical" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="center_vertical" /> <button android:layout_gravity="center_horizontal" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="center_horizontal" /> <button android:layout_gravity="right" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="right" /> <button android:layout_gravity="bottom" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="bottom" />
<button android:layout_gravity="fill_vertical" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="fill_vertical" /> <button android:layout_gravity="fill_horizontal" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="fill_horizontal" /> <button android:gravity="right" android:layout_gravity="clip_horizontal" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="clip_horizontal" /> <button android:gravity="top" android:layout_gravity="clip_vertical" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="clip_vertical" />
Notice that values clip_horizontal and clip_vertical are clear if only the android:gravity property is defined. If this property is not defined then the control will be clipped on both edges.
When using android:layout_gravity="clip_horizontal" with android:gravity="right" the control’s left edge will be clipped and if the android:gravity="left" the right edge will be clipped.
When using android:layout_gravity="clip_vertical" with android:gravity="top" the control’s bottom edge will be clipped and if the android:gravity="bottom" the top edge will be clipped.
So what is the difference between the android:layout_gravity and the android:gravity properties:
The android:layout_gravity sets the position of the view in the container, while android:gravity sets the position of the content of the view.
For example if the android:layout_gravity=”right” then the view would be placed in the right position in the container while if the view’s android:gravity=”right” then the text of the view would be placed at the right.
To set the android:gravity property programmatically you can use this code:
Button btn=(Button)findViewById(R.id.btn); btn.setGravity(Gravity.RIGHT);
Padding:
The android:padding property sets the padding between widgets. if you specify the padding property to the container then the container with all of its widgets would be shifted by the value, if you specify it to a single widget then the contents of that widget would be shifted by the specified value.
If you use the android:padding property then this would apply the padding values to the four edges of the widget. If you need to be more specific you can use :
android:paddingTop or android:paddingLeft or android:paddingRight or android:paddingBottom
<button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="button 1" /> <button android:id="@+id/btn" android:layout_height="wrap_content" android:layout_width="wrap_content" android:paddingleft="40px" android:text="button 2" />
| Reactions: |
Subscribe to:
Posts (Atom)











