class: center, middle, inverse, title-slide # Linear Layout ## ⚔
An Introduction ### Laxmikant ### 2018/01/01 (updated: 2021-04-18) --- background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg) ??? Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Sharingan_triple.svg) --- class: center, middle # Linear Layout ### LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute. --- class: center, top # example <!-- --> --- class: center, top # Layout Weight ### LinearLayout also supports assigning a weight to individual children with the <mark>android:layout_weight</mark> attribute. ### This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. ### A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. <mark>Default weight</mark> is zero. --- class: center, top # Equal distribution ### To create a linear layout in which each child uses the same amount of space on the screen, ### set the <mark>android:layout_height</mark> of each view to "0dp" (for a vertical layout) or the <mark>android:layout_width</mark> of each view to "0dp" (for a horizontal layout). ### Then set the <mark>android:layout_weight</mark> of each view to "1". --- class: center, top # UnEqual distribution ### You can also create linear layouts where the child elements use <mark>different</mark> amounts of space on the screen: ### If there are <mark>three text fields</mark> and two of them declare a <mark>weight of 1</mark>, while the other is given no weight, the third text field without weight <mark>doesn't grow</mark>. Instead, this third text field occupies only the area required by its content. The other two text fields, on the other hand, expand equally to fill the space remaining after all three fields are measured. ### If <mark>there are three text</mark> fields and two of them declare a weight of 1, while the third field is then given a weight of 2 (instead of 0), then it's now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.. --- class: top, left # example <p style='font-size:7px;'> ```r ## 1px = 1⁄96 inch, dp = px / (dpi / 160), 1dp = .75px on 120dpi device <?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:paddingLeft="16dp" android:paddingRight="16dp" android:orientation="vertical" > <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/to" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/subject" /> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="right" android:text="@string/send" /> </LinearLayout> ``` --- class: inverse, center, middle # Let's do it --- # Steps to do: - Create new Android Project -- - In the Project window, click the module in which you want to add a layout. -- - In the main menu, select File > New > XML > Layout XML File. -- - In the dialog that appears, provide the file name, the root layout tag, and the source set in which the layout belongs. -- - Click Finish to create the layout. -- - Enter shift + F10 to run the code -- .footnote[ [1] For details (https://developer.android.com/studio/write/layout-editor) [2] Properties (https://developer.android.com/reference/android/widget/LinearLayout) ] --- class: inverse, center, middle <iframe target="_parent" width="560" height="315" src="https://www.youtube.com/embed/yx3xzuNCJKc" frameborder="0" allowfullscreen></iframe> --- # Thanks!