Android Base Views, Layouts & Resources

Base Input Controls Containers Style Theme Resources Example Base Views Download Full Example Base Views

Android UI

Similar to other technologies Android has a front language to build views, styles, themes, graphics resources and templates. In principle it could be similar to JS / HTML5 development. In fact we can use XML to build the user interfaces or Java for making this in run-time. The events of the visual components are managed also with java in the activities (or fragments that we can see in next chapters).

But we have some correlations between JS/HTML5  – Android Views:

JS/HTML5

HTML  page

Base components – input, label,

Div

style

Dinamic JS

Android UI

Layout

Base View , EditText, Textview, Button

ViewGroup like LinearLayout, RelativeLayout,..

style – themes

Java

 

Android define three levels:

View is a object that paint something on the screen, There are base views or widgets and containers.

ViewGroup holds views and apply a layout to paint it with different structures or organization on the screen, e.g. paint all views in horizontal line o relative each to others.

Pre-build  App Components more complex that offer a standard UI layout for which you simply need to define the content like  Adding the App Bar, Dialogs, and Status Notifications.

Android provides a base collection of both View and ViewGroup subclasses that offer you common input controls (such as buttons and text fields) and various layout models (such as a linear or relative layout).

Layouts

Android UI design can be done in XML or programmatically in the application. But the user interface designer of Android prefer mainly XML to define the user interface because it separates the presentation of the code and facilitates the viewing, administration, editing and debugging of the application.

The user interface for each component of your app is defined using an hierarchy of View and ViewGroup objects, as shown in figure 1. Each view group is an invisible container that organizes child views, while the child views may be input controls or other widgets that draw some part of the UI. This hierarchy tree can be as simple or complex as you need it to be (but simplicity is best for performance).

Figure 1. Illustration of a view hierarchy, which defines a UI layout.

To declare your layout, you can instantiate View objects in code and start building a tree, but the easiest and most effective way to define your layout is with an XML file. XML offers a human-readable structure for the layout, similar to HTML.

The name of an XML element for a view is respective to the Android class it represents. So a TextView element creates a TextView widget in your UI, and a LinearLayout element creates a LinearLayout view group.

For example, a simple vertical layout with a text view and a button looks like this:

When you load a layout resource in your app, Android initializes each node of the layout into a runtime object you can use to define additional behaviors, query the object state, or modify the layout.

For a complete guide to creating a UI layout, see XML Layouts.

 

User Interface Components

You haven´t to build all of your UI using View and ViewGroup objects. Android provides several app components that offer a standard UI layout for which you simply need to define the content. These UI components each have a unique set of APIs that are described in their respective documents, such as Adding the App Bar, Dialogs, and Status Notifications.

Concluding we have Group of Views these are the layouts and help us to structure the views and app components.

A base layout group is always necessary for save a complete view in XML, this is the contentView that we are going to associate to the activity (Controller).  The subject here is that the group views and the XML file  both are know like layouts. But the first is refereed  to the View Group component (e.g. <LinearLayout>) and the second is de XML that hold all complete view structure that the activity is going to show.

Following we are going to study the base views and the group views (layouts)

 

 

Base Input Controls

Base Input controls or widgets are the interactive components in your app’s user interface. Android provides a wide variety of controls you can use in your UI, such as buttons, text fields, seek bars, checkboxes, zoom buttons, toggle buttons, and many more.

Then we will see some, remember that in the area of ??examples will be in operation and with source code.

TextView

This control is used to show text to the user. A TextView has many attributes as it inherits from View, marked in blue the most important (in base level).

XML attributes

android:autoLink Controls whether links such as urls and email addresses are automatically found and converted to clickable links.
android:autoText If set, specifies that this TextView has a textual input method and automatically corrects some common spelling errors.
android:breakStrategy Break strategy (control over paragraph layout).
android:bufferType Determines the minimum type that getText() will return.
android:capitalize If set, specifies that this TextView has a textual input method and should automatically capitalize what the user types.
android:cursorVisible Makes the cursor visible (the default) or invisible.
android:digits If set, specifies that this TextView has a numeric input method and that these specific characters are the ones that it will accept.
android:drawableBottom The drawable to be drawn below the text.
android:drawableEnd The drawable to be drawn to the end of the text.
android:drawableLeft The drawable to be drawn to the left of the text.
android:drawablePadding The padding between the drawables and the text.
android:drawableRight The drawable to be drawn to the right of the text.
android:drawableStart The drawable to be drawn to the start of the text.
android:drawableTint Tint to apply to the compound (left, top, etc.) drawables.
android:drawableTintMode Blending mode used to apply the compound (left, top, etc.) drawables tint.
android:drawableTop The drawable to be drawn above the text.
android:editable If set, specifies that this TextView has an input method.
android:editorExtras Reference to an <input-extras> XML resource containing additional data to supply to an input method, which is private to the implementation of the input method.
android:elegantTextHeight Elegant text height, especially for less compacted complex script text.
android:ellipsize If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle.
android:ems Makes the TextView be exactly this many ems wide.
android:fontFamily Font family (named by string) for the text.
android:fontFeatureSettings Font feature settings.
android:freezesText If set, the text view will include its current complete text inside of its frozen icicle in addition to meta-data such as the current cursor position.
android:gravity Specifies how to align the text by the view’s x- and/or y-axis when the text is smaller than the view.
android:height Makes the TextView be exactly this many pixels tall.
android:hint Hint text to display when the text is empty.
android:hyphenationFrequency Frequency of automatic hyphenation.
android:imeActionId Supply a value for EditorInfo.actionId used when an input method is connected to the text view.
android:imeActionLabel Supply a value for EditorInfo.actionLabel used when an input method is connected to the text view.
android:imeOptions Additional features you can enable in an IME associated with an editor to improve the integration with your application.
android:includeFontPadding Leave enough room for ascenders and descenders instead of using the font ascent and descent strictly.
android:inputMethod If set, specifies that this TextView should use the specified input method (specified by fully-qualified class name).
android:inputType The type of data being placed in a text field, used to help an input method decide how to let the user enter text.
android:letterSpacing Text letter-spacing.
android:lineSpacingExtra Extra spacing between lines of text.
android:lineSpacingMultiplier Extra spacing between lines of text, as a multiplier.
android:lines Makes the TextView be exactly this many lines tall.
android:linksClickable If set to false, keeps the movement method from being set to the link movement method even if autoLink causes links to be found.
android:marqueeRepeatLimit The number of times to repeat the marquee animation.
android:maxEms Makes the TextView be at most this many ems wide.
android:maxHeight Makes the TextView be at most this many pixels tall.
android:maxLength Set an input filter to constrain the text length to the specified number.
android:maxLines Makes the TextView be at most this many lines tall.
android:maxWidth Makes the TextView be at most this many pixels wide.
android:minEms Makes the TextView be at least this many ems wide.
android:minHeight Makes the TextView be at least this many pixels tall.
android:minLines Makes the TextView be at least this many lines tall.
android:minWidth Makes the TextView be at least this many pixels wide.
android:numeric If set, specifies that this TextView has a numeric input method.
android:password Whether the characters of the field are displayed as password dots instead of themselves.
android:phoneNumber If set, specifies that this TextView has a phone number input method.
android:privateImeOptions An addition content type description to supply to the input method attached to the text view, which is private to the implementation of the input method.
android:scrollHorizontally Whether the text is allowed to be wider than the view (and therefore can be scrolled horizontally).
android:selectAllOnFocus If the text is selectable, select it all when the view takes focus.
android:shadowColor Place a blurred shadow of text underneath the text, drawn with the specified color.
android:shadowDx Horizontal offset of the text shadow.
android:shadowDy Vertical offset of the text shadow.
android:shadowRadius Blur radius of the text shadow.
android:singleLine Constrains the text to a single horizontally scrolling line instead of letting it wrap onto multiple lines, and advances focus instead of inserting a newline when you press the enter key.
android:text Text to display.
android:textAllCaps Present the text in ALL CAPS.
android:textAppearance Base text color, typeface, size, and style.
android:textColor Text color.
android:textColorHighlight Color of the text selection highlight.
android:textColorHint Color of the hint text.
android:textColorLink Text color for links.
android:textIsSelectable Indicates that the content of a non-editable text can be selected.
android:textScaleX Sets the horizontal scaling factor for the text.
android:textSize Size of the text.
android:textStyle Style (bold, italic, bolditalic) for the text.
android:typeface Typeface (normal, sans, serif, monospace) for the text.
android:width Makes the TextView be exactly this many pixels wide.

EditText

An editable text field. This is a basic and important view. It’s similar to TextView but editable.

EditText is a extend of a TextView that configures itself to be editable.

Next example with a “purple” “EditTextBox”. Great!

 

Example how load the EditText view on private class attribute, the layout with text and button show like this:

And the activity to handler the EditText, the next code show how to fill a TextView from an EditText when click a Button.

Interesting action to play with an EditText are:

Change the input types of an EditText,

Modify attributes such as hint, text size, line color, and more,

Handling Text Change Events with the TextWatcher Interface,

Change focus between multiple edit texts,

Customize the style Autocomplete an EditText,

Button

A push-button that can be pressed, or clicked, by the user to perform an action.

The view show an stylized “Hello” button

Next an example of handle a click event by code, remember that the easy way to link the event onclick of the button is directly from xml.

Control event onclick by code

Control event onclick  by xm layout 

Pay attention how the method has beed defined. It’s necessary to be public and included a View param to be called correctly. public void actionButton(View view)

 

Spinner

A view that displays one child at a time and lets the user pick among them. The items in the Spinner come from the Adapter associated with this view.

Resultado de imagen de spinner example

 

XML attributes

android:dropDownHorizontalOffset Amount of pixels by which the drop down should be offset horizontally.
android:dropDownSelector List selector to use for spinnerMode=”dropdown” display.
android:dropDownVerticalOffset Amount of pixels by which the drop down should be offset vertically.
android:dropDownWidth Width of the dropdown in spinnerMode=”dropdown”.
android:gravity Gravity setting for positioning the currently selected item.
android:popupBackground Background drawable to use for the dropdown in spinnerMode=”dropdown”.
android:prompt The prompt to display when the spinner’s dialog is shown.
android:spinnerMode Display mode for spinner options.

 


 

CheckBox

An on/off switch that can be toggled by the user. You should use check-boxes when presenting users with a group of selectable options that are not mutually exclusive.

A checkbox is a specific type of two-states button that can be either checked or unchecked. A example usage of a checkbox inside your activity would be the following:

 

ImageView

Displays an arbitrary image, such as an icon.

XML attributes

android:adjustViewBounds Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.
android:baseline The offset of the baseline within this view.
android:baselineAlignBottom If true, the image view will be baseline aligned with based on its bottom edge.
android:cropToPadding If true, the image will be cropped to fit within its padding.
android:maxHeight An optional argument to supply a maximum height for this view.
android:maxWidth An optional argument to supply a maximum width for this view.
android:scaleType Controls how the image should be resized or moved to match the size of this ImageView.
android:src Sets a drawable as the content of this ImageView.
android:tint The tinting color for the image.
android:tintMode Blending mode used to apply the image tint.

Android ImageView ScaleType

ImageView supports different configuration options with idea to show it on diferent scaleTypes. scaleType options are used for scaling the bounds of an image to the bounds of this view. Below are the listed scaleType configuration properties supported.

  • CENTER : Displays the image centered in the view with no scaling
  • CENTER_CROP : Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; centers the image in the view
  • CENTER_INSIDE : Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center
  • FIT_CENTER : Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view
  • FIT_START : Same as fitCenter but aligned to the top left of the view
  • FIT_END : Same as fitCenter but aligned to the bottom right of the view
  • FIT_XY : Scales the x and y dimensions to exactly match the view size. dDoes not maintain the image aspect ratio
  • MATRIX : Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image

ImageButton

Displays an arbitrary image, such as an icon specified on the src attribute. Note that the param src is used to indicate the drawable, as we will study nearness on the resources topic, drawables are the images and its behavior.

Only at the introductory level can we see an ImageButton with its drawable.

The drawable resource, basically specifies the image to load when different events are raised. Yes button_pressed, button_focused and button_normal are image located on the resource folder.

More in the example Example Base Views & Simple Styles.

ToggleButton

An on/off button with a light indicator. More in the example Example Base Views & Simple Styles.

RadioButton

The RadioButton has two states: either checked or unchecked. More in the example Example Base Views & Simple Styles.

ProgressBar

The ProgressBar view provides visual feedback about some ongoing tasks, such as when you are performing a task in the background.

TimePicker

The TimePicker view enables users to select a time of the day, in either 24-hour mode or AM/PM mode.

DatePicker

The DatePicker view enables users to select a date of the day

Containers

Following the Containers is a way to agroup base views / widgets; are buckets for Views that wrap dynamic content of specific kind of childred.

Remember that the Layouts are general purpose ViewGroups dealing directly with graphical views. They have no requirements on kind of children they can manage. We will see it next.

Then we will see some, again remember that in the area of ??examples will be in operation and with source code.

RadioGroup

Shows a group of radio buttons.

ListView

Shows list of views, e.g. TextViews.

GridView

Grid horizontal, vertical its content.

ScrollView

All its content is scrollable.

Webview

Let insert web content inside a bundle (embebed micro-browser).

 

Layouts

The layout defines the visual structure for your app. Are like templates, Android uses this structure to display the view elements on the screen.

LinearLayout

A design that organizes your children in a single column (vertical) or a single row (horizontal). The row address can be set by calling setOrientation (). You can also specify severity, which specifies the alignment of all child elements by calling setGravity () children. The default orientation is horizontal.

LinearLayout Example

 

RelativeLayout

Let work with positioning relative to other layouts, views or positions on the screen. It goes beyond the LinearLayout since it allows more complex templates based on references.

RelativeLayout Example

 

TableLayout

A layout that arranges its children into rows and columns. A TableLayout consists of a number of TableRow objects, each defining a row. Again will see in the examples area in action.

 

How defining a percentage for Layouts?

Android works generally with weights instead of percentages, the idea is to do a distribution of weights between the different elements, for example if we have two layouts and apply a weight of 0.5 each we are saying that we want a 50% distribution.

 

For those who come from the web world, is an unavoidable question. Currently you can define percentages, the something that Android has introduced

Let’s see the below example:

 

 To use the new percentage support library we need added to compile instruction on graddle.

 

 

Styles & Themes

Style

A style is a collection of properties that specify the appearance and format of a View or window. A style can specify properties, such as height, fill, font color, font size, background color, and more. Styles are defined in an XML resource that is separate from the XML that specifies the design.

For example, this way define an Style:


And here an example how use the style “button” on our layout button view:

 

Conceptually it does not differ what a HTML style would be. In Android styles are stored in the resource folder inside a file “styles.xml”

Custom Style

There are three ways to establish a style:

In an individual view: The style attribute is added to a view element in the XML of your design, like in

A complete activity the <activity> android: theme attribute in the Android manifest is added and associated to style name like in the before example AppTheme.

Over the complete application <application> element in the Android manifest.

 

How Android Draws Views

When an activity receives focus the Android system will handle the drawing procedure, but the activity must provide the root node of its design hierarchy. The drawing begins with the root node of the design. The view is asked to measure and draw the design tree. The drawing is handled by walking the tree and representing each view that intersects the invalid region. In turn, each ViewGroup is responsible for requesting that each of its children be drawn (using the draw () method) and each View is responsible for drawing itself. Because the tree is traversed in order, this means that the parents will be drawn before (i.e. behind) their children, with siblings drawn in the order they appear in the tree.
.

Ok, that’s is the draw phase, but don´t worry, for a base level when we are not building custom components, the only we have to remember is to assign the XML layout of the view with the activity, like this setContentView(R.layout.content_layout_id), and then Android system will be responsible for painting the layout.

 

It’s important to pay attention to the order in which views are added to your XML file. Further down in the file means higher up the Z axis.

Example on Z-order

Here we can see the Zorder paint of Android. The painting order is the one set in the script sequence, first paint a color gray view, after the pt 1 logo, the 2 logo, the logo 3 and finally the TextView “FrameLayout ZOrder”

The code of the view is the following:

Here The images:

Logo 1

Logo 2

Logo 3

 

Finally we can see how the views are painting in Z-order, Great!

 

Could you change the order of the view painting by code?

Yes you can,  from the official Android API we have:

bringToFront

Added in API level 1

Change the view’s z order in the tree, so it’s on top of other sibling views. This ordering change may affect layout, if the parent container uses an order-dependent layout scheme (e.g., LinearLayout). Prior to KITKAT this method should be followed by calls to requestLayout() and invalidate() on the view’s parent to force the parent to redraw with the new child ordering.

Theme

Like we said, a theme is a generic style that is assigned to a complete application or activity. This allows all components to follow the same pattern of design and customization to maintain consistency in the UI.

If we want to add a theme to an application, we should go to the AndroidManifest.xml file and add to the <application> element the theme attribute with the reference of the requested theme. Let’s see:

If it were an activity then we would do exactly the same thing:

How define a Theme?. Redefining System Styles

The theme is an style that can link with others item styles defined on the styles.xml

In the next definition we can watch style name=”MyTheme”, and how is compose by items taken from Android colors.xml  resources and from styles defined in the style file itself that set an style for all button in our app. This is the case of <item name=”android:buttonStyle”>@style/myThemeButtonStyle</item>, where the all buttons are going to have the same blue rounded style.

 

This is the effect, that archived by  android:background and the drawable which define the graphics resources by button states like normal, pressed, focus.

 

 System Themes &  Styles

The Android platform offers a wide collection of styles and themes that you can use in your applications. You can find a reference of all available styles in the R.style class.

To use the styles described there, replace all underscores with a dot in the style name.

For example, you can apply the theme Theme_NoTitleBar with “@android: style / Theme.NoTitleBar“. However, the R.style reference is not well documented and does not describe the styles in detail.

Therefore, if you consult the source code of these styles and themes, you will better understand the style properties provided by each one. For a better reference of Android styles and themes, see the following source code:

Inheritance

The parent attribute in the <style> element lets you specify a style from which your style should inherit attributes. You can use this to inherit attributes from an existing style and define only the attributes that you want to change or add. You can inherit from styles that you’ve created yourself or from styles that are built into the platform. For example, you can inherit the Android platform’s default text appearance and modify it:

For information about inheriting from styles defined by the Android platform, see Using Platform Styles and Themes.

If you want to inherit from styles that you’ve defined yourself, you don’t have to use the parent. Instead, you can use dot notation by prefixing the name of the style you want to inherit to the name of your new style, separated by a period. For example, to create a new style that inherits the CodeFont style defined above, but make the color red, you can create the new style like this:

 

Base Resources

Are those artifacts that are neither source code nor layouts, and are specified as modifiable resources, which allow us to maintain better code application quality, we can change the resources of our app without needing to change the source code, typical example: Modify, add translations. But there are more layouts, menus, colors, values ??or constants, styles, images or graphic elements, …

The style we have seen above are resources, but there are others that we will see below.

The resources are added into a res folders on  your Android Project. All are a group of folders each one for its mission…

You should always outsource the resources of the application, such as images and strings of your code, so you can maintain it independently. You must also provide alternative resources for specific device configurations, pools, and resource directories with a special name. At runtime, Android uses the appropriate resource based on the current settings. For example, you may want to provide a different UI design depending on the size of the different strings, depending on the language setting.

After the construction we can access the resources using the resource ID, that are generated in your project’s R class.

Layouts

XML files that define a user interface layout, as we said it’s the screen view of out app.

Here and example, in next chapter we can see how build diferentes layouts for diferents screen sizes,

 

More info Layout Resource.

Values

XML files that contain simple values, such as strings, integers, and colors.Arrays

Array

Colors

XML file saved at res/values/colors.xml:

This application code retrieves the color resource:

This layout XML applies the color to an attribute:

Dimension

Then in a layout you can set to use the dimensions:

Strings

This are a very useful and consist in the externalization for our literals. Instead of hard-code it, it is extracted to a file xml strings.xml, to be able to change it and to add new languages ??without needing to modify neither our layouts nor our source code.

We can add folders with each language necessary to translate.

More information about internationalization is viewed in the next multi-language chapter.

Next an example of the default string.xml file.

Then we can use the string for example

Styles

We are explain the style previously, here are the place where locate the style.xml resource.

Colors

A descriptor that defines state lists of colors and also the colors assigned according to the state of the visual elements depending on events. For example, if a button has been pressed or has the focus, we can assign different colors. For more information at official site.

 

Menus

XML files that define application menus, such as an Options Menu, Context Menu, or Sub Menu. See Menu Resource.

Drawables

 Behind this important concept is generalized everything that can be a graphic, so could be drawn on the screen, therefore they can be:
Image files type .png, .jpg, or .gif
Other XML that specifies basic shapes as squares or circles
An XML that defines states of the views and the image or associated form, similar to what we did previously with colors and
Other types of XMLs to define lists of images and shapes that we could use in animations

Once defined drawables can be used from the APIs as getDrawable (int) or from the base views in layaouts, for example from a button, we see a couple of interesting examples:

Example Drawables Shapes

Define the Drawables shapes

Normal state is a rectangle with rounded corners painting on a primary color. The primary color is defined on values resources folder:

The rectangle is defined on drawables resources, showed on the next picture and code:

Pay attention to difference in the state, the following is for the normal state and the pressed state. In the second we change the stroke, by the solid fill of the primary blue color.

Normal State Button

Pressed State Button

Finally we have to define the state list based on the before shapes:

The effect as we view before is:

 

Example Animation Drawables

An animation defined in XML that shows a sequence of images in order (like a film).

 

To play the animation we have to use an AnimationDrawable.

 

Animator

There is two principal types of animations:

Property animations, based on varying the graphical properties of objects between moments in time, for example position or size, is very much a speaker and allows to animate practically anything.

Tween animations or  view animation system can be used to perform tweened animations in Views. The Tween animation calculates the animation with information such as start point, end point, size, rotation, and other common aspects of an animation.

Animator resource folder is for XML files that define property animations.

Anim

XML files that define tween animations. (Property animations can also be saved in this directory, but the animator/ directory is preferred for property animations to distinguish between the two types.)

 

and to invoke the tween animation we can use the next code:

 

More information about animations is viewed on the advanced Android Training

Video Example Drawable, Transition & Tween Animation

Menu

Resources that define application menus, such as an Options Menu, Context Menu and Popup Menu.

Options Menu

The options menu is where you should include actions and other options that are relevant to the current activity context, such as “Search,” “Compose email,” and “Settings.

The options menu items are available in the application bar. By default, the system places all the items in the action overflow, which the user can reveal with the actions overflow icon on the right side of the application bar (or by pressing the Device Menu button, if available) .

(1) Icon & App Name, (2) Option Menus in action bar, (3) Rest of Option Menus without Room

Pay attention to how the app namespace is defined on xml header  xmlns:baseview=”http://schemas.android.com/apk/res-auto”, and then is also necessary to set  baseview:showAsAction=”ifRoom” to indicate how show the option with the icon and respect the app namespace to work.

The showAsAction possibilities are:

ifRoom Only place this item in the app bar if there is room for it. If there is not room for all the items marked "ifRoom", the items with the lowest orderInCategory values are displayed as actions, and the remaining items are displayed in the overflow menu.
withText Also include the title text (defined by android:title) with the action item. You can include this value along with one of the others as a flag set, by separating them with a pipe |.
never Never place this item in the app bar. Instead, list the item in the app bar’s overflow menu.
always Always place this item in the app bar. Avoid using this unless it’s critical that the item always appear in the action bar. Setting multiple items to always appear as action items can result in them overlapping with other UI in the app bar.
collapseActionView The action view associated with this action item (as declared by android:actionLayout orandroid:actionViewClass) is collapsible.
Introduced in API Level 14.
Menu.xml example

Java code necessary to create and handle the options:

 

Video Example of Options Menu working with the App Bar

 

Context Menu

A context menu provides actions that affect a specific item or context frame in the user interface.

There are two ways of providing contextual actions:

In a floating context menu. A menu appears as a floating list of menu items (similar to a dialog box) when the user makes a long click (hold down).

In contextual action mode. This mode is an implementation of the ActionMode system that displays a contextual action bar at the top of the screen with action elements that affect the selected element.

Popup Menu

A Popup Menu is a modal menu anchored to a view. It appears below the anchor view if there is room, or above the view otherwise. It is useful for provide an overflow style menu for actions related to specific content. Pay attention this is not the same as a context menu (but is similar), which is usually for actions that affect the selected content. For actions that affect the selected content, use the contextual action mode or the floating context menu.

Submenu

You can add a submenu to an item in any menu (except in a submenu) by adding a <menu> element as an <item> subfield. Submenus are useful when the application has many functions that can be organized into themes, such as items in a menu bar of a desktop application (File, Edit, View, etc.). For example:

 

Mipmap

Drawable files only for launcher icons. For more information on how to manage launcher icons with mipmap / folders, see Managing Project Overview.

Raw

Arbitrary files to save in their raw form. To open these resources with a raw InputStream, call Resources.openRawResource() with the resource ID,
which is R.raw.filename.

Example Base Views & Simple Styles

This base example with all code show Simple Views, Containers, Layout Groups, Context, Popup & Menu Bar, Animations and other interesting demos in action.

Let’s see!:

The main activity show us three choice at screen:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


To manage the navigation to the different demos we have an activity  with  options. We are using a VIEW_TO_LOAD parameter when call to a particular demo activity with the identificaton R.Layout id  to use when raise the intent intent.putExtra(VIEW_TO_LOAD, R.layout.random_views1); then in each demo activity we are using the same demo layout but changing the content thanks to  LayoutInflater inflator = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE); frame.addView(inflator.inflate(layout, null));

Pay attention how is the menu create from xml resource and how is controlled each the

The activity has to extend AppCompatActitivy in order to resolve the app Bar Menu.


 

Conclusions

The types of IU elements:

View is a object that paint something on the screen.

ViewGroup holds views and apply a layout to paint it with different structures or organization on the screen, e.g. paint all views in horizontal line o relative each to others.
Pre-build  App Components that offer a standard UI layout for which you simply need to define the content like  Adding the App Bar, Dialogs, and Status Notifications.

The structure and elements in Android development are similar to HTML5. We have got structure (layouts), styles/themes (style.xml) and program language (Java).

Styles and themes are very important resources, we can overwrite the android styles and define styles by default for a type of view (e.g. Button)

Drawable: Behind this important concept is generalized everything that can be a graphic, so could be drawn on the screen.

The resources as store into a folder, there could be strings, animations, values, strings, color, menu. It’s very important concept to separate this configurable items from java code or xml layout so let you to maintain the app more easily.

Download Full Example Base Views

BaseViews

All Downloads

https://bitbucket.org/keikisacademy/keikis-academy-android

git clone https://bitbucket.org/keikisacademy/keikis-academy-android.git

Info Links

Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

https://developer.android.com/guide/topics/ui/themes.html

https://developer.android.com/guide/topics/resources/providing-resources.html

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Social media & sharing icons powered by UltimatelySocial