Introduction to Android Layout

● Organize terms. Parts such as labels and buttons placed on Android are called View. The main ones are TextView for displaying text, EditText, Button, for inputting other text There is ImageView etc. for displaying an image.

→ If you want to arrange multiple views together, you can also group them. In that case, prepare a container called View Group. There are several types of View Group, and the type may determine how to arrange the View. For the main VIew Group, Linear Layout, which allows View to be arranged horizontally or vertically Table Layout, which can be arranged like a table Relative Layout, which allows you to specify the position relative to a certain view For example, FrameLayout allows you to stack Views.

You can also set the size and margins when arranging the View. The vertical size of View is android: layout_height Regarding the width, android: layout_width Regarding the margins, the inner margin is managed by android: padding, and the outer margin is managed by android: layout_margin.

I want to move this content in View up, down, left and right; android: gravity The attribute that can be used when you want to move the View itself vertically and horizontally with respect to the parent element is android: layout_gravity

● Let's use Linear Layout You can format the code with "Option + Command + L",

In Activity_main.xml xmlns is a namespace specification that allows you to use various attributes starting with android: and tools :.

LinearLayout is a View group that arranges the contained elements vertically or horizontally. It is necessary to specify in which direction to arrange, and the attribute for that is It's called "android: orientation", and if you set it to "vertical", the included elements can be arranged vertically. android:orientation="vertical" If you set it to horizontal, it will line up side by side.

● Specify the height of the View. match parent means to fit the width of the parent element, wrap_content means to fit the width of the contents

android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"> This means that it should fit the same width as the contents @ string / hello_world (that is, Hello World).

android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello World!"> The width is the same as the width of the parent element.

● Let's understand the margins and how to put them together As mentioned above Regarding the margin, the inner margin is android: padding, The outer margin is managed by android: layout_margin

I want to make a margin on the outside android:layout_margin="60dp" I want to make a margin only underneath android:layout_marginButtom="100dp" I want to create a margin inside the element android:padding="30dp" I want to create a margin only at the bottom inside the element android:paddingButtom="30dp"

How to gather elements When you want to move the contents of the element up, down, left and right android: gravity android android:gravity="bottom"

When you want to move the element itself vertically and horizontally with respect to the parent element layout_gravity android:layout_gravity="right"

● Use android: layout_weight ... Attribute for allocating the margin created when arranging elements in LinearLayout to each element

For example, when you want to allocate the bottom margin to the second Button, On the second Button Specify android: layout_weight = "1". If layout_weight is not specified, its value will be 0, so If there are 4 Buttons, the margin allocation will be It becomes 0: 1: 0: 0.

However, there is one caveat to this layout_weight. layout_height, for vertical And in the case of horizontal, the layout_width specification has no meaning, so don't forget to set it to 0dp.

● Let's take a look at Relative Layout You can specify a number relative to the parent element or other child elements. The elements that are actually placed are relative to which element when specifying the position. Since we have to know how to specify it, we need to give each element an ID. To give an ID, add @ + id / to the id attribute and then give it any name you like. android:id="@+id/a" Meaning to give an ID of a

There are many attributes for positioning with elativeLayout. ex. Place in the center of the top and bottom It's OK if you set the attribute called android: layout_centerInParent to true android:layout_centerInParent="true"

ex.B is aligned with A on the left edge and placed below A android: layout_alignLeft = "@ id / a" ... align left with id / a android: layout_below = "@ id / a" ... Comes under id / a.

Ex.C is placed next to B with a slight space. android: layout_alignTop = "@ id / b" ... align with id / b android: layout_toRightOf = "@ id / b" ... Comes to the right of id / b. android: layout_marginLeft = "20dp" ... Leave a space of 20dp from the left.

● Let's use FrameLayout The included Views can be overlaid.

● Let's use TableLayout You can create a layout like a table. In the layout, Rows can be expressed by creating a ViewGroup called <TableRow.

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#f8bbd0" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1" />

Then, one button called 1 can be created in tabular format.

You can join adjacent columns It is possible to indicate that there are two columns with android: layout_span = "2".

When you want to leave a gap It is possible to open a space by specifying the number of columns in any table. android: layout_column = "2" moves the table to the second column (counting from 0).

When the width of the table becomes larger than the parent element, or conversely, it becomes insufficient. You can widen or narrow a particular row. When you want to spread android: stretchColumns = "2" Fills the extra margin with the second column.

When you want to narrow android: shrinkColumns = "0" Shrink only the 0th column.

Recommended Posts

Introduction to Android Layout
Introduction to Android application development
Introduction to Ruby 2
Introduction to web3j
Introduction to Micronaut 1 ~ Introduction ~
[Java] Introduction to Java
Introduction to migration
Introduction to java
Introduction to Doma
Introduction to JAR files
Introduction to bit operation
Introduction to Ratpack (6) --Promise
Introduction to Ratpack (9) --Thymeleaf
Introduction to Android Layout
Introduction to PlayFramework 2.7 ① Overview
Introduction to design patterns (introduction)
Introduction to Practical Programming
Introduction to javadoc command
Introduction to jar command
Introduction to Ratpack (2)-Architecture
Introduction to lambda expression
Introduction to java command
Introduction to RSpec 2. RSpec setup
Introduction to Keycloak development
Introduction to javac command
[Introduction to Android application development] Let's make a counter
Introduction to RSpec 5. Controller specs
Introduction to RSpec 6. System specifications
Introduction to RSpec 3. Model specs
Introduction to Ratpack (5) --Json & Registry
Introduction to Metabase ~ Environment Construction ~
Introduction to Ratpack (7) --Guice & Spring
(Dot installation) Introduction to Java8_Impression
Introduction to Micronaut 2 ~ Unit test ~
Introduction to JUnit (study memo)
Introduction to Spring Boot ① ~ DI ~
Introduction to design patterns (Flyweight)
[Java] Introduction to lambda expressions
Introduction to Spring Boot ② ~ AOP ~
Introduction to Apache Beam (2) ~ ParDo ~
[Ruby] Introduction to Ruby Error statement
Introduction to EHRbase 2-REST API
Introduction to design patterns Prototype
GitHub Actions Introduction to self-made actions
[Java] Introduction to Stream API
Introduction to Design Patterns (Iterator)
Introduction to Spring Boot Part 1
[Android] Connect to MySQL (unfinished)
Introduction to Ratpack (1) --What is Ratpack?
XVim2 introduction memo to Xcode12.3
Introduction to RSpec-Everyday Rails Summary-
Introduction to Design Patterns (Strategy)
[Introduction to rock-paper-scissors games] Java
Introduction to Linux Container / Docker (Part 1)
Introduction to swift practice output Chapter5
[Introduction to Java] About lambda expressions
Introduction to algorithms in java-cumulative sum
[Introduction to Java] About Stream API
Introduction to Functional Programming (Java, Javascript)
Introduction to Ruby processing system self-made
Introduction to algorithms with java-Shakutori method