Posts Tagged 'linear layout'

HomeTag: linear layout

Android Gravity and Layout Gravity

Posted by:

Gravity is an android method for aligning view in a layout. There are two kinds of gravity, gravity and layout gravity. Basically a gravity is set in xml layout files, but you can also set a gravity of any view in java source code. To set gravity in xml use [cci]android:layout_gravity[/cci] and [cci]android:gravity[/cci] attributes. The values of both attributes is combination of the following constants:

top : Push object to the top of its container, not changing its size.
bottom : Push object to the bottom of its container, not changing its size.
left : Push object to the left of its container, not changing its size.
right : Push object to the right of its container, not changing its size.
center_vertical : Place object in the vertical center of its container, not changing its size.
fill_vertical : Grow the vertical size of the object if needed so it completely fills its container.
center_horizontal : Place object in the horizontal center of its container, not changing its size.
fill_horizontal : Grow the horizontal size of the object if needed so it completely fills its container.
center : Place the object in the center of its container in both the vertical and horizontal axis, not changing its size.
fill : Grow the horizontal and vertical size of the object if needed so it completely fills its container.
clip_vertical : Additional option that can be set to have the top and/or bottom edges of the child clipped to its container’s bounds. The clip will be based on the vertical gravity: a top gravity will clip the bottom edge, a bottom gravity will clip the top edge, and neither will clip both edges.
clip_horizontal : Additional option that can be set to have the left and/or right edges of the child clipped to its container’s bounds. The clip will be based on the horizontal gravity: a left gravity will clip the right edge, a right gravity will clip the left edge, and neither will clip both edges.
start : Push object to the beginning of its container, not changing its size.
end : Push object to the end of its container, not changing its size.

 

android:gravity attribute

[cci]android:gravity[/cci] will set alignment to the content of a view. This aligment will only take effect if size of view is bigger than view’s content. Maybe you got confuse, what is the different between view and view content. Consider a button view below.

Button View

Button View

As you can see from image above, the button view is the rectangle boundary of a button, while the content of the button view is the text “button” it self.

Now, we will align the content of the button to bottom right of the button. To align content to bottom right we add [cci]android:gravity=”bottom|right”[/cci] attribute.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:text="Button"
        android:gravity="bottom|right" />

</LinearLayout>

Will result as follow:

Content of button view aligned to bottom right

Content of button view aligned to bottom right

android:layout_gravity attribute

[cci]android:layout_gravity[/cci] is used to align view child to its parent. Note that this attribute will only take effect if the parent is [cci]LinearLayout[/cci] and the size of child smaller than parent size.


 

Now we will align a button to the right of parent. To do this, we must add [cci]android:layout_gravity=”right”[/cci] attribute.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_gravity="right" />

</LinearLayout>

The result is as follow:

Button view is aligned to right

Button view is aligned to right

0

Android, Uncategorized

, , ,

Advance Android Relative Layout Example

Posted by:

Relative Layout is an android view group to align all childrens relative to other view or its parent. Relative layout give you flexibiliy to place childs wherever you want. In the previous example, I have give some basic example of Relative Layout. Now, I will give you how to create a more complex relative layout example.

Our goal is to create layout like this:

Advance relative layout example

Advance relative layout example

See the following step by step to create above layout:

1. Aligning child to top left of parent

Actually, by default every childs is aligned to top left of parent in relative layout. So we needn’t add any special attribute to align chilc in top left of parent. But you can align child to top left of parent by adding [cci]android:layout_alignParentLeft=”true”[/cci] and [cci]android:layout_alignParentTop=”true”[/cci] attributes.

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

 

2. Aligning child in top right of parent

To align child in top right of parent, add the following attributes [cci]android:layout_alignParentRight=”true”[/cci] and [cci]android:layout_alignParentTop=”true”[/cci].

<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

 

3. Aligning child in bottom left of parent

To align child in bottom left of parent, add the following attributes [cci]android:layout_alignParentBottom=”true”[/cci] and [cci]android:layout_alignParentLeft=”true”[/cci].

<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true" />

 

4. Aligning child in bottom right of parent

To align child in bottom right of parent, add the following attributes [cci]android:layout_alignParentBottom=”true”[/cci] and [cci]android:layout_alignParentRight=”true”[/cci].

<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" />

 

5. Align child in the center of parent

This is our center child and you must give it an [cci]id[/cci] as our other 4 childs aligned relative this child. To align a child center of the parent, add the following attribute [cci]android:layout_centerInParent=”true”[/cci]. This attribute will align our child center to the parent, vertically and horizontally.

<Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button5"
        android:layout_centerInParent="true"/>

 

6. Align child in top left of the center child

To align child in top left of the center child, add the following attributes [cci]android:layout_toLeftOf=”@id/button5″[/cci] and [cci]android:layout_above=”@id/button5″[/cci].

<Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button6"
        android:layout_toLeftOf="@id/button5"
        android:layout_above="@id/button5"/>

 


 

7. Align child in top right of the center child

To align child in top right of the center child, add the following attributes [cci]android:layout_toRightOf=”@id/button5″[/cci] and [cci]android:layout_above=”@id/button5″[/cci].

<Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button6"
        android:layout_toRightOf="@id/button5"
        android:layout_above="@id/button5"/>

 

8. Align child in bottom right of the center child

To align child in bottom right of the center child, add the following attributes [cci]android:layout_toRightOf=”@id/button5″[/cci] and [cci]android:layout_below=”@id/button5″[/cci].

<Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button6"
        android:layout_toRightOf="@id/button5"
        android:layout_below="@id/button5"/>

 

9. Align child in bottom left of the center child

To align child in bottom left of the center child, add the following attributes [cci]android:layout_toLeftOf=”@id/button5″[/cci] and [cci]android:layout_below=”@id/button5″[/cci].

<Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button6"
        android:layout_toLeftOf="@id/button5"
        android:layout_below="@id/button5"/>

 

Final Source Codes

Below is the final source codes:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button3"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true" />
    
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button4"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" />
    
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button5"
        android:layout_centerInParent="true"/>
    
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button6"
        android:layout_toLeftOf="@id/button5"
        android:layout_above="@id/button5"/>
    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button7"
        android:layout_toRightOf="@id/button5"
        android:layout_above="@id/button5"/>
    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button8"
        android:layout_toRightOf="@id/button5"
        android:layout_below="@id/button5"/>
    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button9"
        android:layout_toLeftOf="@id/button5"
        android:layout_below="@id/button5"/>
</RelativeLayout>
0

Android, Uncategorized

, ,