{"id":338,"date":"2015-12-26T11:47:16","date_gmt":"2015-12-26T11:47:16","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=338"},"modified":"2018-06-05T10:00:52","modified_gmt":"2018-06-05T10:00:52","slug":"linear-layout","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/linear-layout","title":{"rendered":"Linear Layout Tutorial With Examples In Android"},"content":{"rendered":"

Linear layout is a simple layout used in android for layout designing. In the Linear layout all the elements are displayed in linear fashion means all the childs\/elements of a linear layout are displayed according to its orientation. The value for orientation property can be either horizontal\u00a0or\u00a0vertical.<\/p>\n

\"Horizontal<\/center><\/p>\n
\n

Types Of Linear Layout Orientation<\/strong><\/h4>\n

There are two types of linear layout orientation:<\/p>\n

    \n
  1. Vertical<\/li>\n
  2. Horizontal<\/li>\n<\/ol>\n

    As the name specified these two orientations are used to arrange there child one after the other, in a line, either vertically or horizontally. Let\u2019s we describe these in detail.<\/p>\n

    1.Vertical:<\/span> <\/strong><\/p>\n

    In this all the child are arranged vertically in a line one after the other. In below code snippets we have specified orientation \u201cvertical\u201d so the childs\/views of this layout are displayed vertically.<\/p>\n

    <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:orientation=\"vertical\"> <!-- Vertical Orientation set -->\r\n\r\n    <!-- Child Views(In this case 2 Button) are here -->\r\n\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button1\"\r\n        android:id=\"@+id\/button\"\r\n        android:background=\"#358a32\" \/>\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button2\"\r\n        android:id=\"@+id\/button2\"\r\n        android:background=\"#0058b6\" \/>\r\n\r\n \r\n<\/LinearLayout><\/pre>\n
    \"Vertical<\/center>2. Horizontal:<\/strong><\/span><\/p>\n
    In this all the child are arranged horizontally in a line one after the other. In below code snippets we have specified orientation \u201chorizontal\u201d so the childs\/views of this layout are displayed horizontally.<\/p>\n
    <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:orientation=\"horizontal\"> <!-- Horizontal Orientation set -->\r\n\r\n    <!-- Child Views(In this case 2 Button) are here -->\r\n\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button1\"\r\n        android:id=\"@+id\/button\"\r\n        android:background=\"#358a32\" \/>\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button2\"\r\n        android:id=\"@+id\/button2\"\r\n        android:background=\"#0058b6\" \/>\r\n\r\n\r\n<\/LinearLayout><\/pre>\n
    \"Horizontal<\/center>Important Note:<\/strong><\/span> All of the layout managers can be nested. This means that you can put a Relative Layout or Frame Layout as a child to Linear Layout.<\/p>\n
    \n
    Main Attributes In Linear Layout:<\/strong><\/h4>\n
    Now let\u2019s \u00a0we discuss about the attributes that helps us to configure a linear layout and its child controls. Some of the most important attributes you will use with linear layout include:<\/p>\n
    1. orientation:<\/strong><\/span> The orientation attribute used to set the childs\/views horizontally or vertically. In Linear layout default orientation is vertical.<\/p>\n
    Example: \u00a0Orientation vertical:<\/strong><\/p>\n
    <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:orientation=\"vertical\"> <!-- Vertical Orientation set -->\r\n\r\n    <!-- Put Child Views like Button here -->\r\n<\/LinearLayout><\/pre>\n
    Example: Orientation Horizontal:<\/strong><\/p>\n
    <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:orientation=\"horizontal\"> <!-- Horizontal Orientation set -->\r\n\r\n    <!-- Child Views are here -->\r\n\r\n<\/LinearLayout><\/pre>\n
    \"Horizontal<\/center>2. gravity:<\/strong><\/span> The gravity attribute is an optional attribute which is used to control the alignment of the layout like left, right, center, top, bottom etc.<\/p>\n
    Example: We have set gravity right for linear layout. So the buttons gets align from right side in Horizontal orientation.
    \n<\/strong><\/p>\n
    <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:gravity=\"right\"\r\n    android:orientation=\"horizontal\">\r\n\r\n\r\n<!--Button Child View Here--->\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button2\"\r\n        android:id=\"@+id\/button2\"\r\n        android:background=\"#0e7d0d\" \/>\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button1\"\r\n        android:id=\"@+id\/button\"\r\n        android:background=\"#761212\" \/>\r\n<\/LinearLayout><\/pre>\n
    \"Gravity<\/center>3. layout_weight:<\/strong><\/span> The layout weight attribute specify each child control\u2019s relative importance within the parent linear layout.<\/p>\n
    Example: weight property for button in linear layout. In the below example one button is of weight 2 and other is of weight 1.<\/strong><\/p>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"horizontal\">\r\n\r\n\r\n<!--Add Child View Here--->\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Weight 2\"\r\n        android:background=\"#761212\"\r\n        android:layout_margin=\"5dp\"\r\n        android:id=\"@+id\/button\"\r\n        android:layout_weight=\"2\" \/>\r\n\r\n    <Button\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:background=\"#761212\"\r\n        android:layout_margin=\"5dp\"\r\n        android:layout_weight=\"1\"\r\n        android:text=\"Weight 1\" \/>\r\n<\/LinearLayout><\/pre>\n
    In the layout image you can notice Button with weight 2 gets more size related the other.<\/strong><\/p>\n
    \"Weight<\/center>4. weightSum:<\/strong><\/span> weightSum is the sum up of all the child attributes weight. This attribute is required if we define weight property of the childs.<\/p>\n
    Example: In the same above example of weight, we can define weightSum value 3.<\/strong><\/p>\n
    <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:weightSum=\"3\"\r\n    android:orientation=\"horizontal\">\r\n    <!--Add Child View Here--->\r\n\r\n<\/LinearLayout><\/pre>\n
    \n
    Example of Linear Layout:<\/strong><\/h4>\n
    Now lets design 2 linear layout UI. First we have designed using weight attribute and second without using it. So below layout output will clear the difference between them:<\/p>\n
    \"Linear<\/center>Example 1:<\/strong><\/span> First we will design Android Linear Layout without using weight property<\/p>\n
    In this example we have used one TextView and 4 Button. The orientation is set to vertical.<\/p>\n
    Below is the code of activity_main.xml<\/strong><\/p>\n
    <!-- Vertical Orientation is set -->\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\">\r\n\r\n    <!-- Text Displayed At Top -->\r\n\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n        android:text=\"Linear Layout (Without Weight)\"\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_gravity=\"center_horizontal\" \/>\r\n\r\n    <!-- Button Used -->\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 1\"\r\n        android:background=\"#009300\" \/>\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 2\"\r\n        android:background=\"#e6cf00\" \/>\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 3\"\r\n        android:background=\"#0472f9\" \/>\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 4\"\r\n        android:background=\"#e100d5\" \/>\r\n<\/LinearLayout><\/pre>\n
    Output Screen:<\/strong><\/span><\/p>\n
    \"Linear<\/center>Example 2:<\/strong><\/span> In this example of linear layout we have used weight property.<\/p>\n
    Below is the code of activity_main.xml with explanation included<\/strong><\/p>\n
    <!-- Vertical Orientation is set  with weightSum-->\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:weightSum=\"5\"\r\n    android:orientation=\"vertical\">\r\n\r\n    <!-- Text Displayed At Top -->\r\n\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n        android:text=\"Linear Layout (With Weight)\"\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_gravity=\"center_horizontal\"\r\n        android:layout_weight=\"0\"\/>\r\n\r\n    <!-- Button Used -->\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 1\"\r\n        android:background=\"#009300\"\r\n        android:layout_weight=\"1\"\/>\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 2\"\r\n        android:background=\"#e6cf00\"\r\n        android:layout_weight=\"1\"\/>\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 3\"\r\n        android:background=\"#0472f9\"\r\n        android:layout_weight=\"1\"\/>\r\n\r\n    <Button\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Button 4\"\r\n        android:background=\"#e100d5\"\r\n        android:layout_weight=\"1\"\/>\r\n<\/LinearLayout><\/pre>\n
    Output Screen:<\/strong><\/p>\n
    \"Linear<\/p>\n","protected":false},"excerpt":{"rendered":"
    Linear layout is a simple layout used in android for layout designing. In the Linear layout all the elements are displayed in linear fashion means all the childs\/elements of a linear layout are displayed according to its orientation. The value for orientation property can be either horizontal\u00a0or\u00a0vertical. Types Of Linear Layout Orientation There are two … Continue reading Linear Layout Tutorial With Examples In Android<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-338","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"Linear Layout Tutorial With Examples In Android \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"The tutorial on linear layout discussing both orientation vertical, horizontal and attributes with examples, code and screenshot. Learn to design linear Android UI.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/linear-layout\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":2,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/338\/revisions"}],"predecessor-version":[{"id":2637,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/338\/revisions\/2637"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}