Skip to content
Search

Android:Layouts

lastmod 2020-08-31created 2016-07-0215 edits

A summary of basic information on how to use Android Layouts.

List of Layout

Android's basic screen composition is done through xml files. (MFC uses .rc resource files, but Android implements it through xml tags.) You can compose a screen by putting one or more layouts inside each xml file. (Similar to HTML tags.)

Layouts are classified into several kinds by purpose. The representative layouts are listed below.

android.widget.LinearLayout
As the name suggests, a layout arranged along a single line (horizontal or vertical). Any other layouts or widgets placed inside this layout all sit on a straight line. In LinearLayout, a weight attribute can be given to child Views. This attribute determines the relative size of the View.
android.widget.RelativeLayout
As the name suggests, a layout implemented using relative positions. That is, you can specify a View's position relative to each screen boundary.
android.widget.AbsoluteLayout (Deprecated in API Level 3)
Unlike RelativeLayout, a layout implemented using absolute positions.
android.widget.FrameLayout
All layouts or widgets created inside the layout go in the top-left corner. On screen, the most recently loaded layout or widget is shown overlapping the others. (When there are multiple child views, they always stick to the top-left, so each is added in a way that covers the previous component.)
android.widget.TableLayout
A layout that can arrange items as a table. Rows/columns can be specified using options such as .
ScollLayout
Literally a layout with scrolling. If there is a lot of content, a scrollbar appears and it scrolls automatically.
android.widget.GridLayout
A grid-style layout.

Relative classes

Inheritance

Widgets

Minor

  • android.support.v4.widget.DrawerLayout
  • android.support.v4.widget.SlidingPaneLayout
  • android.support.v4.widget.SwipeRefreshLayout
  • android.support.design.widget.CoordinatorLayout

Merge

Creating resolution-independent layouts

When developing for Android, in most cases you set up a layout with an xml file and write code within it. At that point you set the coordinates, width, height, etc. of each view, and the values change depending on whether they are pixel coordinates, density coordinates, or some other coordinate system. Also, depending on the screen size or resolution of the device running the application, the screen may look awkward, or in severe cases appear broken.

I was developing with both a Galaxy S2 at 480x800 resolution and a 7-inch Galaxy Tab at 600x1024 resolution, and the GUI screen coordinates ended up displayed differently on each. I tried every trick I could think of. I tried specifying values in px, which are pixel coordinates, and also tried dip or dp, which are density coordinates. Wait a moment!! Let me first sort out px and dp before moving on. 

안드로이드는 160dpi를 기본으로 가정하고 있습니다. 이때 화면 해상도는 320x480이 됩니다.
해상도 320x480에서 가로폭이 160dp가 되기 때문에, 1dp의 크기는 320 / 160 = 2 pixel이라고 볼 수 있습니다.

하지만 요즘 단말기들의 해상도들은 WVGA인 480x800의 단말기가 많습니다.
픽셀 좌표를 이용해서 320x480 단말기에서 GUI를 구성하면 480x800인 단말기에서는 작은 화면으로 출력이 되고,
그 반대로 480x800에서의 GUI를 320x480인 단말기에서 출력하면 GUI가 잘려서 보여지게 됩니다.
심한 경우에는 깨진 GUI를 보이기도 하죠.

이 때를 대비해서 만든 것이 dip(density independent pixel) 단위입니다.
화면의 픽셀 밀도를 정의해서 만든 단위이기 때문에 같은 dip 값을 이용해서 레이아웃을 작성하면 
어느 해상도를 가진 단말기라고 하더라도 같은 비율로 이루어진 GUI 화면을 보여주게 됩니다. 
즉, 화면 해상도에 관계없는 균일한 GUI를 제공하는 어플리케이션을 제공할 수 있는거죠.

안드로이드에서 간주하고 있는 해상도 범주는 크게 3가지 입니다.
LDPI(저해상도), MDPI(중해상도), HDPI(고해상도) 이며, 각각의 밀도값은 LDPI가 120, MDPI가 160, HDPI가 240입니다.
(인치당 픽셀수를 의미합니다.)

And the conversion formula between pixel coordinates and dip coordinates is as follows. 

dip = px * (160 / density)

The formula above follows from Android using 160dpi as the baseline. If you compute it on a 480x800 device, since 480x800 is high resolution, HDPI, 

// 480x800 해상도에서 dip와 px 단위 환산
dip = px * (160/240) = px * (2/3)

is the result. So you can think of 480x800 px coordinates as 320x533 dip coordinates.

But how nice would it be if layouts that account for every resolution just came out smoothly using only px or dip? While developing with the Galaxy S2 and the 7-inch Galaxy Tab, I hit a major obstacle: these devices have the same dpi. The screen resolutions are 480x800 and 600x1024, but both are 240dpi.

That is, if I composed the GUI to fit the Galaxy S2, the Galaxy Tab showed a broken GUI. In the end, after considering various solutions, I chose to compose the screen using weight values in the layout. I agonized over px and dip all day yesterday, but using weight made the worries disappear at once.

Empty-space Layout

Check the example below. 

<view android:layout_width="0dp" android:layout_weight="7" .../> 
<view android:layout_width="0dp" android:layout_weight="3" ..../>

With the above, the left side becomes 70% and the right side 30%. If you want empty space, give the second view no value such as text and no background, and it will just take up space.

How to show an icon in a button layout

How to make a button containing both an image and text is shown below.

android:drawableTop, android:drawableBottom, android:drawableLeft, android:drawableRight
Places it above, below, left, or right of the text.
android:drawableStart, android:drawableEnd
Places it where the text starts or ends.
android:drawablePadding
Adjusts the spacing between the text and the image.

How to apply a Layout to an Activity manually

Layout XML is usually applied like setContentView(R.layout.activity_main);. A sample of applying a layout directly in code is shown below. 

final int kViewPixelWidth = 400; // 테스트용 임시너비.
final int kViewPixelHeight = 400; // 테스트용 임시높이.

RelativeLayout testview = new RelativeLayout(context);
RelativeLayout.LayoutParams testview_param = new RelativeLayout.LayoutParams(kViewPixelWidth, kViewPixelHeight);

CameraPreview cameraPreview = new CameraPreview(context);

testview.setGravity(Gravity.CENTER);
testview.setBackgroundColor(Color.WHITE);
testview.addView(cameraPreview, testview_param);

setContentView(testview);

Layout XML inside an empty RelativeLayout

How to attach a layout.xml file to an empty Layout. 

LayoutInflater mLayoutInflater;
mLayoutInflater= getLayoutInflater();
RelativeLayout mLayout= mLayoutInflater.inflate(R.layout.name, null);

What is tools:context?

It came about to make it easier to compose and add Layouts associated with one or more Activities. A selector for choosing an Activity appeared in the Graphic Layout properties, and selecting it changes the properties.

Favorite site

author Zer0 sitemap