Showing posts with label Android Layout. Show all posts

Linear Layout Tutorial

Linear Layout Tutorial


      Using LinearLayout all layout elements are aligned alongside, horizontally or vertically. In this view group all its children are placed one after another, which means that there can only be one child in each row, regardless of its width.

      Layout's orientation is set using android:orientation attribute. Here are two examples of horizontal and vertical LinearLayout:

1. Vertical LinearLayout


123456789101112131415161718192021222324

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"



xmlns:tools="http://schemas.android.com/tools"



android:orientation="vertical"



android:layout_width="match_parent"



android:layout_height="match_parent"



tools:context=".MainActivity" >







<Button



android:layout_width="250dp"



android:layout_height="wrap_content"



android:layout_gravity="center_horizontal"



android:text="Button 1" />



<Button



android:layout_width="250dp"



android:layout_height="wrap_content"      



android:layout_gravity="center_horizontal"



android:text="Button 2" />



<Button



android:layout_width="250dp"



android:layout_height="wrap_content"       



android:layout_gravity="center_horizontal"



android:text="Button 3" />







</LinearLayout>
view rawactivity_main.xml hosted with ❤ by GitHub

Android LinearLayout
Vertical LinearLayout

         
       As you can see I am also using android:layout_gravity attribute to centre our buttons horizontally.

2. Horizontal LinearLayout

123456789101112131415161718192021

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"



xmlns:tools="http://schemas.android.com/tools"



android:orientation="horizontal"



android:layout_width="match_parent"



android:layout_height="match_parent"



tools:context=".MainActivity" >







<Button



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:text="Button 1" />



<Button



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:text="Button 2" />



<Button



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:text="Button 3" />







</LinearLayout>
view rawactivity_main.xml hosted with ❤ by GitHub

Horizontal LinearLayout
Horizontal LinearLayout

         I have changed the value of android:layout_width to "wrap_content" because if I would have left it set to 250dp our buttons wouldn't have fit into the screen and would have looked like this: 
Horizontal LinearLayout gone wrong:)

Source Code

References:
Continue Reading

Relative Layout Tutorial

       In RelativeLayout all views are positioned relatively to each other. This means that you can create an EditText element and then create a button and say that you want this button to be positioned to left of the EditText. View can be positioned relatively to its sibling elements or to its parent layout. 
        Many say that RelativeLayout is the hardest to master, but I honesty don't think so at all. RelativeLayout is very flexible and I am sure that if you spend some time just playing around with it, you'll find it very easy to use as well ;)

RelativeLayout Example

       Here is a RelativeLayout example, that will help you understand the idea of it better: 
acitivity_main.xml file:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

<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"



android:gravity="top"



android:paddingBottom="@dimen/activity_vertical_margin"



android:paddingLeft="@dimen/activity_horizontal_margin"



android:paddingRight="@dimen/activity_horizontal_margin"



android:paddingTop="@dimen/activity_vertical_margin"



tools:context=".MainActivity" >







<EditText



android:id="@+id/editext1"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:ems="7" />







<Button 



android:id="@+id/button1"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:layout_alignParentBottom="true"



android:text="Button 1"



android:textColor="#A4C739"



android:textStyle="bold"/>







<Button 



android:id="@+id/button2"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:layout_toRightOf="@id/editext1"



android:text="Button 2"



android:textColor="#b500b5"



android:textStyle="bold"/>  







<Button 



android:id="@+id/button3"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:layout_alignParentEnd="true"



android:layout_alignParentBottom="true"



android:text="Button 3"



android:textColor="#F6A458"



android:textStyle="bold"



/> 







<ImageView 



android:src="@drawable/android_small"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:layout_centerInParent="true"/>











</RelativeLayout>
view rawactivity_main.xml hosted with ❤ by GitHub

DEMO

Android RelativeLayout
Android RelativeLayout
Explanation:
Button 1 position: android:layout_alignParentBottom="true"

If true, this attribute makes the bottom edge of the element match the bottom edge of the parent.

Button 2 position: android:layout_toRightOf="@id/editext1"

Positions the left edge of this view to the right of the given anchor view ID (in our case to the right of edittext1 element). 

Button 3 position: 
1. android:layout_alignParentEnd="true"       
   
If true, makes the end edge of this view match the end edge of the parent.       

2. android:layout_alignParentBottom="true"

If true, this attribute makes the bottom edge of the element match the bottom edge of the parent.

Here we are using two attributes to first position our button on the bottom of the parent view and then move it to the end of it.

ImageView position: android:layout_centerInParent="true"

If true, centers this child horizontally and vertically within its parent. 


Full list of all possible attributes can be found right here:

http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
Continue Reading
Subscribe to: Posts (Atom)