Frame layouts in android

Android Frame Layout

Frame Layout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other.

You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

Frame Layout

FrameLayout Attributes

Following are the important attributes specific to FrameLayout −

This is the ID which uniquely identifies the layout.

This defines the drawable to draw over the content and possible values may be a color value, in the form of «#rgb», «#argb», «#rrggbb», or «#aarrggbb».

Defines the gravity to apply to the foreground drawable. The gravity defaults to fill. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc.

Determines whether to measure all children or just those in the VISIBLE or INVISIBLE state when measuring. Defaults to false.

Example

This example will take you through simple steps to show how to create your own Android application using frame layout. Follow the following steps to modify the Android application we created in Hello World Example chapter −

Sr.No	Attribute & Description
1

Step	Description
1	You will use Android studio IDE to create an Android application and name it as demo under a package com.example.demo as explained in the Hello World Example chapter.
2	Modify the default content of res/layout/activity_main.xml file to include few widgets in frame layout.
3	No need to change string.xml, android takes care default constants
4	Run the application to launch Android emulator and verify the result of the changes done in the application.

Following is the content of the modified main activity file src/com.example.demo/MainActivity.java. This file can include each of the fundamental lifecycle methods.

Following will be the content of res/layout/activity_main.xml file −

Following will be the content of res/values/strings.xml to define two new constants −

Let’s try to run our modified Hello World! application we just modified. I assume you had created your AVD while doing environment setup. To run the app from Android Studio, open one of your project’s activity files and click Run icon from the toolbar. Android Studio installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window −

Источник

FrameLayout

FrameLayout является самым простым типом разметки. Обычно это пустое пространство на экране, которое можно заполнить только дочерними объектами View или ViewGroup. Все дочерние элементы FrameLayout прикрепляются к верхнему левому углу экрана.

В разметке FrameLayout нельзя определить различное местоположение для дочернего объекта. Последующие дочерние объекты View будут просто рисоваться поверх предыдущих компонентов, частично или полностью затеняя их, если находящийся сверху объект непрозрачен, поэтому единственный дочерний элемент для FrameLayout обычно растянут до размеров родительского контейнера и имеет атрибуты:

Также можно использовать свойства Gravity для управления порядком размещения.

FrameLayout можно использовать для интересного эффекта, когда верхняя часть (TextView) остаётся неизменной, а основной контент прокручивается.

Поочередная смена картинки

Создадим разметку, когда на экран динамически выводится только одно изображение.

Теперь код для активности, где при нажатии на изображении, оно будет заменяться на другое.

В разметке мы указали, что один из компонентов ImageView должен быть невидимым. Если бы мы этого не сделали, то увидели, что компоненты просто накладываются друг на друга в стопку. И если элементы разных размеров, то можно увидеть, как одно изображение частично перекрывает другое.

Имейте в виду, что размер компоновки FrameLayout определяется наибольшим элементом в контейнере. Поэтому более маленькое изображение может растянуться.

Если часть элементов сверху стопки являются невидимыми, то могут наблюдаться проблемы с выводом на экран. В этих случаях рекомендуется вызывать метод setMeasureAllChildren() с аргументом true (аналог метода — атрибут android:measureAllChildren=»true»).

Источник

Android User Interface Design: Frame Layouts

Frame layouts are one of the simplest layout types used to organize controls within the user interface of an Android application.

Understanding layouts is important for good Android application design. In this tutorial, you learn all about frame layouts, which are primarily used to organize individual or overlapping view controls on the screen. When used correctly, frame layouts can be the fundamental layout upon which many interesting Android application user interfaces can be designed.

What Is A Frame Layout?

Frame layouts are one of the simplest and most efficient types of layouts used by Android developers to organize view controls. They are used less often than some other layouts, simply because they are generally used to display only one view, or views which overlap. The frame layout is often used as a container layout, as it generally only has a single child view (often another layout, used to organize more than one view).

TIP: In fact, one place you’ll see frame layouts used is as the parent layout of any layout resource you design. If you pull up your application in the Hierarchy Viewer tool (a useful tool for debugging your application layouts), you’ll see that any layout resources you design are displayed within a parent view-a frame layout.

Frame layouts are very simple, which makes them very efficient. They can be defined within XML layout resources or programmatically in the application’s Java code. A child view within a frame layout is always drawn relative to the top left-hand corner of the screen. If multiple child views exist, then they are drawn, in order, one atop the other. This means that the first view added to the frame layout will display on the bottom of the stack, and the last view added will display on top.

Let’s look at a simple example. Let’s say we have a frame layout that is sized to control the entire screen (in other words, layout_width and layout_height attributes are both set to match_parent). We could then add three child controls to this frame layout:

• An ImageView with a picture of a lake.
• A TextView with some text to display towards the top of the screen.
• A TextView with some text to display towards the bottom of the screen (Simply use the layout_gravity attribute to have the TextView “sink” to the bottom of the parent).

The following figure shows what this sort of layout would look like on the screen.

Defining an XML Layout Resource with a Frame Layout

The most convenient and maintainable way to design application user interfaces is by creating XML layout resources. This method greatly simplifies the UI design process, moving much of the static creation and layout of user interface controls and definition of control attributes, to the XML, instead of littering the code.

XML layout resources must be stored in the /res/layout project directory hierarchy. Let’s take a look at the simple frame layout introduced in the previous section. Again, this screen is basically a frame layout with three child views: an image that fills the entire screen, upon which two text controls are drawn, each with the default, transparent background. This layout resource file, named /res/layout/framed.xml, is defined in XML as follows:

Recall that, from within the Activity, only a single line of code within the onCreate() method is necessary to load and display a layout resource on the screen. If the layout resource was stored in the /res/layout/framed.xml file, that line of code would be:

Defining a Frame Layout Programmatically

You can also programmatically create and configure frame layouts. This is done using the FrameLayout class (android.widget.FrameLayout). You’ll find the frame-specific parameters in the FrameLayout.LayoutParams class. Also, the typical layout parameters (android.view.ViewGroup.LayoutParams), such as layout_height and layout_width, as well as margin parameters (ViewGroup.MarginLayoutParams), still apply to FrameLayout objects.
Instead of loading a layout resource directly using the setContentView() method as shown earlier, you must instead build up the screen contents in Java and then supply a parent layout object which contains all the control contents to display as child views to the setContentView() method. In this case, your parent layout would be the frame layout.
For example, the following code illustrates how to reproduce the same layout described earlier programmatically. Specifically, we have an Activity instantiate a FrameLayout and place one ImageView control followed by two TextView controls within it in its onCreate() method:

The resulting screen looks exactly the same as the figure shown previously.

When to Use Frame Layouts

With other powerful layout types like linear layouts, relative layouts, and table layouts at your disposal, it’s easy to forget about frame layout. The efficiency of a frame layout makes it a good choice for screens containing few view controls (home screens, game screens with a single canvas, and the like). Sometimes other inefficient layout designs can be reduced to a frame layout design that is more efficient, while other times a more specialized layout type is appropriate. Frame layouts are the normal layout of choice when you want to overlap views.

Looking at Similar Controls

FrameLayout is relatively simple. Because of this, numerous other layout types and view controls are based upon it. For instance, ScrollView is simply a FrameLayout that has scrollbars when the child content is too large to draw within the bounds of the layout. All Home screen app widgets reside within a FrameLayout.
One notable addition to all FrameLayouts is that they can take a foreground drawable in addition to the normal background. This is done via the android:foreground XML attribute. This could be used for, quite literally, a frame around the underlying views.

Conclusion

Android application user interfaces are defined using layouts, and frame layouts are one of the simplest and most efficient layout types available. The child control(s) of a frame layout are drawn relative to the top left-hand corner of the layout. If multiple child views exist within the frame layout, they are drawn in order, with the last child view on top.

Источник

Основы верстки для нативных андроид приложений

( пользоваться не рекомендуется, deprecated )
AbsoluteLayout — означает что каждый элемент верстки будет иметь абсолютную позицию относительно верхнего левого угла экрана задаваемую с помощью координат x и y. Т.е. верхнийлевый угол экрана при AbsoluteLayout имеет координаты x = 0, y = 0.
Позиция указывается в атрибутах элемента android:layout_x и android:layout_y.
Пример кода:

FrameLayout

FrameLayout — тип верстки внутри которого может отображаться только один элемент в строке. Т.е. если внутри FrameLayout вы поместите несколько элементов, то следующий будет отображаться поверх предыдущего.
Пример кода:

LinearLayout

LinearLayout — тип верстки при котором область верстки делится на строки и в каждую строку помещается один элемент. Разбиение может быть вертикальное или горизонтальное, тип разбиения указывается в атрибуте LinearLayout android:orientation. Внутри верстки возможно комбинировать вертикальную и горизонтальную разбивки, а кроме того, возможна комбинация нескольких разных типов верстки например использование LinearLayout внутри FrameLayout.

Пример вертикальной разбивки LinearLayout:

Пример горизонтальной разбивки LinearLayout:

Комбинация нескольких LinearLayout:

RelativeLayout

RelativeLayout — тип верстки при котором позиционирование элементов происходит относительно друг друга и относительно главного контейнера.
За то, каким образом будут позиционироваться элементы отвечают следующие атрибуты:
Атрибуты позиционирования относительно контейнера

• android:layout_alignParentBottom – Низ элемента находится внизу контейнера
• android:layout_alignParentLeft – Левая часть элемента прилегает к левой части контейнера
• android:layout_alignParentRight – Правая часть элемента прилегает к правой части контейнера
• android:layout_alignParentTop – Элемент находится в верхней части контейнера
• android:layout_centerHorizontal – Элемент позиционируется по центру относительно горизонтального размера контейнера
• android:layout_centerInParent – Элемент позиционируется по центру относительно горизонтального и вертикального размеров размера контейнера
• android:layout_centerVertical – Элемент позиционируется по центру относительно вертикального размера контейнера

Атрибуты позиционирования относительно других элементов.
В качестве значений этих атрибутов ставятся id элемента относительно которого будет производится позиционирование.

android:layout_above – Распологает элемент над указанным
android:layout_below – Распологает элемент под указанным
android:layout_toLeftOf – Распологает элемент слева от указанного
android:layout_toRightOf – Распологает элемент справа от указанного

Выравнивание относительно других элементов.

android:layout_alignBaseline – Выравнивает baseline элемента с baseline указаннго элемента
android:layout_alignBottom – Выравнивает низ элемента по низу указанного элемента
android:layout_alignLeft – Выравнивает левый край элемента с левым краем указанного элемента
android:layout_alignRight – Выравнивает правый край элемента с правым краем указанного элемента
android:layout_alignTop – Выравнивает верхнюю часть элемента в соответствие с верхней частью указанного элемента

TableLayout

TableLayout — табличная верстка.
Организует элементы в строки и столбцы таблицы.
Для организации строк служит таг

Alternate Layouts

Alternate Layouts — альтернативная верстка. Позволяет использовать различную верстку для различных ориентаций экрана.
XML для альтернативной верстки помещается в папки проекта:

res/layout-land – альтернативная верстка для landscape UI
res/layout-port –альтернативная верстка для portrait UI
res/lauout-square – альтернативная верстка для square UI

и перед тем как получить макет из res/lauout система проверяет наличие файлов в этих папках.

И в завершении немного о стилях.

Стили

Во первых стили элемента могут быть описаны в атрибутах самого элемента.
Например:

Кроме того стили можно вынести в отдельный xml файл и сохранить его в папке res/values/
Напимер:

Если мы вынесем стили в отдельный файл, то для описания стилей элемента будем использовать атрибут style.

Источник