Overview of basic graphics components

Here you will find the most commonly used basic graphics components. On the screen, I glued a few such items and below each one I describe.

 

The first component from the top. Used to display text. The application user cannot modify its content. On the component palette we have various variations – including LargeText, MediumText, and SmallText. In fact, these three different types are the same class, but with varying font size parameters. Available in the palette in the Form Widgets panel.

button

The second element from the top. Button. We can program in Java how it behaves when pressed. Available in the palette in the Form Widgets panel.

EditText

An edit box in which an application user can enter text. Available in the palette in the TextFields panel. There are also several variants of this component, such as only numbers or dates. These are all objects of the EditText class, but with different set parameters for display and input.

ImageView

Third element from below. Used to display images. Available in the Images & Media palette.

ImageButton

Visible under ImageView. It’s something between Button and ImageView. We can display the image on it, but at the same time we can program its behavior by clicking on it. Available in the Images & Media palette.

Checkbox

Allows you to select or deselect an option (for example, accepting rules). Available in the palette in the Form Widgets panel.

Using visual components in code

Placing components on application screens is usually done by dragging them to the screen (which actually generates the XML in the layout file) or manually defining them in the layout file. Except that they are listed as XML objects, there is no link to them in the code of activity. If we want to use some of these components, we need to reference references in the activity class.

We start by sticking to the screen some sample components:

 

When we look at the layout file, we’ll see that some additional code associated with these new components has been generated:

 

Now let’s move on to the activity code. In order to use the stuck components, we must primarily have class objects that are components. I’m defining them on lines 12 and 13. I could do well on the onCreate (triggered at startup) method, but such a global declaration would have access to these objects also in other methods. In lines 19 and 20 I attach to these objects a reference to the components. The findViewById method is used. As its parameter, I give a pointer to the defined component. Note that each compiler specified in the layout file has an android: id parameter. That is, he uniquely identifies the component. Our button for this example is named “button1”. So in order to hook a reference to this object I write in the parameter findViewById “R.id. “And after that I give the component ID that I want. From this point on I can set or read the parameters of the already attached visual components.

Once launched it looks like this:

 

Support and configuration of basic graphics components.

Basically, each of the items discussed in this publication can simply be dragged from the palette to the screen. By discussing individual elements, I will also point out how to place them directly through the layout XML file. This is to better understand the operation and parameterization of components. Just remember that this is only one possibility.

TextView

<TextView

android: id = “@ id / textView1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “read-only text”  />

The text to be displayed on the component can be set using the android: text parameter in the layout file, as shown in the example above, or by the setText method of the TextView class, as shown below:

TextView tv = (TextView) findViewById (R.id. TextView1 );

tv.setText (“Read only …”);

 

button

<Button

android: id = “@ + id / button1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “Button”  />

The text to be displayed on the component can be set using the android: text parameter in the layout file, as shown in the example above, or by the setText method of the Button class, as shown below:

Button b = (Button) findViewById (Rid. Button1 );

b.setText (“Button inscription”);

 

The click event on components (not just the button) is described in a separate publication – it’s a pretty big deal.

EditText

<EditText

android: id = “@ + id / editText1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “Input field”  >

The default text to display on the component can be set using the android: text parameter in the layout file, as shown in the example above, or by the setText method of the EditText class, as shown below:

EditText et = (EditText) findViewById (R.id. EditText1 );

et.setText (“Default text”);

Text entered by the user can be retrieved using the getText method of the EditText class:

EditText et = (EditText) findViewById (R.id. EditText1 );

Stringed = et.getText () + “”;

Because the getText method returns an Editable object (and not as we would expect – String), I added a + “” for implicit conversion to String. Without this application will not compile.

ImageView

<ImageView

android: id = “@ id / imageView1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: src = “@android: drawable / star_on”  />

The path of the image to be displayed is set using the android: src parameter in the layout file. The image to be displayed is thrown to any of the drawable-xxxx directories that are subdirectories of the res directory, and then referenced by the pointer built on this principle: @android: drawable / filename_file

ImageButton

<ImageButton

android: id = “@ id / imageButton1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: src = “@android: drawable / sym_action_email”  />

The path of the image to be displayed is set using the android: src parameter in the layout file. The image to be displayed is thrown to any of the drawable-xxxx directories that are subdirectories of the res directory, and then referenced by the pointer built on this principle: @android: drawable / filename_file

Checkbox

<Checkbox

android: id = “@ + id / checkBox1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “CheckBox”  />

The text to be displayed next to the selection box is determined using the android: text parameter in the layout file or using the setText method of the CheckBox class, as shown below:

CheckBox cb = (CheckBox) findViewById (R.id. CheckBox1 );

cb.setText (“I have read and accept the Terms of Service”);

We can check the status of the selection using the isChecked method of the CheckBox class, as shown below:

CheckBox cb = (CheckBox) findViewById (R.id. CheckBox1 );

if (cb.isChecked ()) {

// marked

} else {

// not checked

}

Text resources – use strings.xml file

Imagine that situation. I pour a form such as this one down. Similar screens in the application are, for example, 30. In each, the “Accept” and “Cancel” buttons appear. Some say “Name:”, “Name”, etc.

 

Now we have to do a German version of the program, or even change all the names to lowercase ….

I like this text I define “rigidly” in the layout file, as shown below (lines 15,25,34), doputy I will have to change every modification of the layout file of each activity that change.

 

A better solution would be to find the strings.xml file located in the values directory res directory of the res directory and take advantage of the possibilities.

 

When we edit it, we should see the content:

 

Let’s add some elements here. From now on the texts that appear on the form will be defined here. Each phrase is assigned a name, for example, to the phrase “Name:” is assigned the name “name”:

Now in the “android: text” element instead of writing stiffly the text to appear, I’m writing a reference by name to strings.xml entries (lines 15,25,34):

 

We can do this in all layout files. By doing so, changing the text on all buttons to validate the form, or even making an alternate language version of the application, will require changes in one place and without changing the same text multiple times in different layout files.

Color templates

If you would like to use some color in our application, or for example make a two-color application, we can code in code like # FF0033, or create a template and refer to the color of the “color_tla”. The color code for “color_type” is in a separate xml file. Thanks to this solution we can quickly modify the colors in the whole application, eg if we want to make a Christmas skins for our program.

We start by creating an xml file in the values directory that is a subdirectory of the res directory. Click on it PPM → new → new Android XML file. He pops up a window like that. Enter the file name and confirm.

There should be entries similar to these:

 

This is a color assigned to the name. Anyway, in the app I’m referring now to @ color / barbie, I get color # CC66FF. It’s also easier to change the color of the application – just change the color code in this XML file, and the change will apply to all elements where I refer to the file name. We will test the operation. To the screen I stick the button:

 

And in the layout file of this activity, I refer to these colors in the following way: @ color /

Take a look at limbs 9 and 20. I referred by the names to predefined colors in the color.xml file. In line 9 I set the background for the screen, in line No. 20 I set the color for the button.

I switch now to the graphic design view and I see this:

It’s awful, although I believe that somewhere in the world there are people who have a house decorated in such colors. Fortunately for Android apps (as opposed to home), it’s easy and fast to change.

Component Styles

Suppose I have this situation, I have three subtitles on the screen and for all I want to specify the same font color, font size, or other parameters.

 

I could do this separately for each component by setting the parameters in the layout file of the activity. It’s more work than worth it, and if I wanted to change something, I would have to change it for each component separately. Anyone who has written a single page in HTML should be perfectly aware of what the item is. As in HTML, here and here we can define styles and use them for specific properties for multiple components at once. The philosophy is similar to that used when creating web pages for CSS files.

I’m starting with creating an XML file with style. I click the PPM in the values directory which is the subdirectory of the res directory. I choose new -> Android XML File. I get this window:

I give the file name in which I describe the component style. I called it style_script. Now I make some changes in the file. I add two different styles of subtitles. The content of my style file:

xml version = “1.0”  encoding = “utf-8” ?>

<resources xmlns: android = ” http://schemas.android.com/apk/res/android “ >

<style name = “big_napis” >

<item name = “android: textSize” > 50dpitem>

<item name = “android: textColor” > # 0000FFitem>

style>

 

<style name = “maly_napis” >

<item name = “android: textSize” > 20dpitem>

<item name = “android: textColor” > # FF0000item>

style>

 

resources>

I can see the size and color of the fonts. There are two styles – for big blue letters and smaller red ones. Of course, you can specify a lot more things – such as the width and height of the component, the inscription on it, and even the method that handles the component click. In the layout file for the activity, I add a new style parameter to the components, and I specify a style name before the time of the created file:

<TextView

android: id = “@ id / textView1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: layout_alignParentLeft = “true”

android: layout_alignParentTop = “true”

android: layout_marginLeft = “25dp”

android: layout_marginTop = “35dp”

android: text = “Number 1”

style = “@ style / big_name”

/>

<TextView

android: id = “@ + id / textView2”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: layout_alignLeft = “@ + id / textView1”

android: layout_below = “@ + id / textView1”

android: layout_marginTop = “22dp”

android: text = “Number 2”

style = “@ style / maly_napis”

/>

Styles can be used for all components, not just for captions.

Background of the application screen

We will start by setting the background color, it is by far the easiest. I created a new project. The whole thing is to set the parameter android: background (line 9) in the XML layout file.

If you want to choose a color, you can find a color scheme for HTML (eg here:  http://www.kurshtml.edu.pl/html/good_color.html ) I set the random color code FF0044 and it came out to me like this (fuj) :

The background can also be a picture. I dropped the image into the drawable-hdpi subdirectory:

 

This time, instead of giving the color code, I put in the layout file in the android parameter: background pointer to the image (we look at line 9):

Effect:

 

We stretched out a little. Depending on the size and aspect ratio of your screen, you will have larger or smaller, leaner or thicker wallets. This does not always have to look good. Would it be better to have the background image repeat? To achieve this effect, we need to create an XML file that will describe the presentation of the image. To do so, click PPM on the drawable-hdpi directory and select New -> Android XML File. You will see this window:

 

We mark “bitmap” and enter the name of the xml file:

 

Confirm. The content of the file should be supplemented so that it looks like this:

xml version = “1.0”  encoding = “utf-8” ?>

<bitmap xmlns: android = ” http://schemas.android.com/apk/res/android “

android: src = “@ drawable / doge”

android: tileMode = “repeat”

>

bitmap>

Of course, in the android: src parameter we give a pointer to our image. The android: background parameter in the layout file is modified to point to our newly created XML file rather than the image file:

 

After these actions, the program screen after startup looks like this:

 

Setup your own menu

On most Android devices (phones, tablets) we have a menu button available. It would be worthwhile to program what happens when it is pressed. We can insert such an option in the program settings, the author information, or help. If we look at the auto-generated class by default, we’ll see that it includes the onCreateOptionsMenu method:

The file contains a description of the contents of the menu. The above (default) entry points to the main.xml file in the menu directory that is the subdirectory of the res directory:

We can tailor it to our needs, or create a new one and convert the onCreateOptionsMenu method to point to the newly created. By default, its content looks like this:

 

We have one option in the menu, with the string strings.xml in the res -> values directory under the name “action_settings”. We look at him:

 

We see that the text on this option in the menu is “Settings”. Now we will change the main.xml file to make our own menu options. There is nothing we can do to create a separate file, we just have to remember to change the settings in the onCreateOptionsMode activity method. I add one entry to the strings.xml file:

 

Next, I modify the contents of the main.xml file according to my own needs:

 

Each element is another option in the menu. I made three elements with captions directly in this file, and one with strings.xml strings.xml specifies the android: title parameter. The android: orderInCategory parameter specifies the order of display in the top menu. The android: id option is the identifier for the option in the menu. We need to make sure they are different for each menu item, otherwise we will not be able to distinguish which option was selected later. At this moment the menu after launch looks like this:

 

If you prefer, you do not need to define menu content in an XML file. You can do this directly in Java code:

The add method for a Menu object (that is, our menu) invoked here has 4 parameters. In order: Group number, item number, the sequence of display, string. The code in action:

 

However, I am returning to the old method with an XML file. Now we’ll add click support. I am using the onOptionsItemSelected method which is automatically invoked each time the user clicks on the menu. The parameter of this method is passed to the object of the menu item that was clicked. I can get his ID, but it will not be an option “option1”, “option2”, as I defined it in main.xml, and a numeric id, which I can only compare with the numeric identifiers of my menu options. So, unfortunately, we have to do about:

 

Depending on the ID, I display the appropriate text. I also display a numeric identifier. I clicked on the first menu option, then the third. So what are the effects?

 

Different layouts in different orientations

Since phones and tablets are generally not square, and our applications can work both vertically and horizontally, it would be worth considering these two possibilities. Contrary to recent trends, in this case, we have only two orientations;) The layout of the components on the screen is designed for vertical orientation, most likely “going away” when we turn the screen to the vertical orientation. We have the ability to do different layouts that will be used depending on how we hold the device. If we remain at the default one layout file, it will be used in both cases. To distinguish the layout of components depending on how you hold the phone, simply add a directory named layout-land and place an alternative layout file. Everything is done automatically.

In the vertical position, the layout will be loaded from the layout directory, in the case of a horizontal layout-layout. Just remember that the onCreate method of the activity is pointing to the name of the layout file, so if we want it to work the way we do, we need to make sure that both layout files are the same.

setContentView (R.layout. activity_main );

Turns off the screen rotation in the application

As you rotate the screen, the onPause, onSaveInstance, onStop, and onRestoreInstance and onResume methods are automatically called. Basically, the contents of fields such as the EditText classes will not “clean”, everything will return to its original form after the screen is rotated. This does not apply to fields such as TextView or variable declared by us. Everything is reset to the same form as when you started the application. Of course, we can implement the onSaveInstance and onRestoreInstance methods, and then pass on the data to be retrieved by the Bundle object, but with more variables, it can be time-consuming. Another option is to disable the ability to rotate the screen. Behavior like resetting an application will not take place at all. Some applications require some specific screen position without turning it. For example, it would be strange to watch a movie displayed on a vertically aligned screen. The whole thing is to add an entry

android: screenOrientation = “portrait”

In the Application tab in the manifest file. The portrait setting blocks the screen vertically and can be set to landscape. Preview on the application element, ie how it is assembled whole:

<application

android: allowBackup = “true”

android: icon = “@ drawable / ic_launcher”

android: label = “@ string / app_name”

android: theme = “@ style / AppTheme”  >

<activity

android: name = “com.example.gpsinfo.MainActivity”

android: label = “@ string / app_name”

android: screenOrientation = “portrait”

>

<Intent-filter>

<action android: name = “android.intent.action.MAIN”  />

<category android: name = “android.intent.category.LAUNCHER”  />

The intent-filter>

activity>

application>

Arrays of elements on the screen – types of layouts

The distribution of elements on the screen is described in the xml layout file. We can edit it manually, or stick to the “drag and drop” compilers. The way in which the position of individual elements depends on the layout is determined. The common types of layouts are described below. First, we need to find the right layout file for the activity that the layout of the elements wants to change. I created a new “ApplicationTableLayout” application. In its directory res -> layout there is an xml file in which the layout of our main activity will be described. If you create a project by default, you will be called activity_main.xml

Table layout

Since you took the Android programming, I assume that things like the basics of HTML are trivial for you. This type of layout is very similar to the table element known as HTML. We define individual rows and columns. Delete all the contents of your layout file and paste such code:

xml version = “1.0”  encoding = “utf-8” ?>

<TableLayout xmlns: android = ” http://schemas.android.com/apk/res/android “

android: id = “@ id / tableLayout1”

android: layout_width = “fill_parent”

android: layout_height = “fill_parent”  >

<TableRow

android: id = “@ + id / tableRow1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: padding = “5dip”  >

<TextView

android: id = “@ id / textView1”

android: text = “Column # 1” />

<Button

android: id = “@ + id / button1”

android: text = “Column # 2”  />

TableRow>

 

<TableRow

android: id = “@ + id / tableRow1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: padding = “5dip”  >

<EditText

android: id = “@ + id / editText1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “column 1” />

<EditText

android: id = “@ + id / editText2”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “column 2” />

TableRow>

 

TableLayout>

The next elements determine the rows in the table. The columns will be as many as the elements in the row where there are the most elements – exactly as in HTML.

By default, a form of drag & drop elements is displayed. To go to edit a manual file, click the “activity_main.xml” tab at the bottom.

After pasting the code you can go back to the drag & drop screen and you should see this view:

 

You can drag items from the menu on the left, then modify them manually, or place items using the code and move them graphically. It does not matter, since all the changes happen in the XML file – the graphics editor is just an overlay 🙂

Linear Layout – Linear Layout, Objects Layered Below or Below

This type of layout is based on the principle that the elements are placed sequentially or side by side. As before, create a new project and replace the contents of the layout file with this code:

xml version = “1.0”  encoding = “utf-8” ?>

<LinearLayout xmlns: android = ” http://schemas.android.com/apk/res/android “

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: orientation = “horizontal”  >

<TextView

android: id = “@ id / textView1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “Item # 1”  />

<TextView

android: id = “@ + id / textView2”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “Item # 2”  />

<TextView

android: id = “@ id / textView3”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “Item # 3”  />

LinearLayout>

We have specified 3 text display fields. Take note of the element:

android: orientation = “horizontal”

The Horizontal tag specifies that the elements will be next to each other, not under each other. Once launched, the application looks like this:

 

As part of the experiment, I added two more TextView settings. As you can see, it does not look good. Such effects can occur, for example, on phones with smaller screens or resolution:

 

I now modify the LinearLayout element, specifically the orientation from horizontal to vertical:

<LinearLayout xmlns: android = ” http://schemas.android.com/apk/res/android “

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: orientation = “vertical”  >

This change will make the elements are not adjacent to one another and one to the other. Effect:

 

RelativeLayout – position of elements relative to other elements

If you place items on the activity by dragging components from the palette, by default, their positions will be set as the position relative to another item. For example, I have glued two components:

The system sets RelativeLayout by default. Here the contents of the generated layout file:

<RelativeLayout xmlns: android = ” http://schemas.android.com/apk/res/android “

xmlns: tools = ” http://schemas.android.com/tools “

android: layout_width = “match_parent”

android: layout_height = “match_parent”

android: paddingBottom = “@ dimen / activity_vertical_margin”

android: paddingLeft = “@ dimen / activity_horizontal_margin”

android: paddingRight = “@ dimen / activity_horizontal_margin”

android: paddingTop = “@ dimen / activity_vertical_margin”

tools: context = “.MainActivity”  >

<TextView

android: id = “@ id / textView1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: layout_alignParentLeft = “true”

android: layout_alignParentTop = “true”

android: layout_marginLeft = “31dp”

android: layout_marginTop = “46dp”

android: text = “TextView”  />

<Button

android: id = “@ + id / button1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: layout_below = “@ + id / textView1”

android: layout_marginLeft = “3 7 dp”

android: layout_marginTop = “30dp”

android: layout_toRightOf = “@ + id / textView1”

android: text = “Button”  />

RelativeLayout>

As you can see, the position of the TextView element is indicated as the distance from the top and left margins, and the position of the Button as the relative distance from the TextView. This approach is understandable when dragging elements, but such deployment using manual coding would not be particularly convenient. It is important to know this layout type only because of the possibility of applying manual fixes to automatically generated code. It’s about situations when we drag graphics components, but we can not set elements as we would like it, because we all “rozjeżdż”.

AbsoluteLayout – position on the rigid

AbsoluteLayout is a kind of layout where we rigidly set x and y the top left of the element. Create another project and insert the following in place of the existing code in the layout file:

<AbsoluteLayout xmlns: android = ” http://schemas.android.com/apk/res/android “

android: layout_width = “fill_parent”

android: layout_height = “fill_parent” >

 

<Button

android: layout_width = “100dp”

android: layout_height = “wrap_content”

android: text = “Absolute”

android: layout_x = “50px”

android: layout_y = “261px”  />

<Button

android: layout_width = “100dp”

android: layout_height = “wrap_content”

android: text = “Layout”

android: layout_x = “225px”

android: layout_y = “120px”  />

AbsoluteLayout>

After running the application:

On the one hand, the layout of elements does not “go away”, but on the other hand, the position of the element coordinates applies to both the vertical and horizontal position of the screen. It is also independent of the size and resolution of the screen. It may turn out that some phones, or when the screen is rotated, are part of the component outside the visible area.

Wrap_content vs fill_parent

When we stick an element like a button, an entry for the object is added to the layout file. Like this:

<Button

android: id = “@ + id / button1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: layout_alignLeft = “@ + id / textView1”

android: layout_below = “@ + id / textView1”

android: layout_marginTop = “32dp”

android: text = “Button”  />

The marginTop parameters or text are clear, but we have a layout_height layout and a layout_width not specified as you would expect in pixels, and as “wrap_content”. This setting is the default, and it means that the item is as wide and tall to fit the text (or image for an imageView or other content for other components). The visual effect looks like this:

Alternatively, instead of wrap_content we can type fill_parent:

<Button

android: id = “@ + id / button1”

android: layout_width = “fill_parent”

android: layout_height = “wrap_content”

android: layout_alignLeft = “@ + id / textView1”

android: layout_below = “@ + id / textView1”

android: layout_marginTop = “32dp”

android: text = “Button”  />

This setting means that the component needs to adjust the width / height to the container in which it is located (in this case, on the screen at all). I set the parameter fill_parent to width.

The effect is as follows:

Again I make a change in the configuration. This time I set fill_parent also for component height:

<Button

android: id = “@ + id / button1”

android: layout_width = “fill_parent”

android: layout_height = “fill_parent”

android: layout_alignLeft = “@ + id / textView1”

android: layout_below = “@ + id / textView1”

android: layout_marginTop = “32dp”

android: text = “Button”  />

We have a large button:

 

Scroll View – scrolling screen

Sometimes it is not enough for us to display all the elements that we would like to put. For example, we have an application with lots of buttons in the selection menu. Buttons are too long for the screen to fit. In such cases, a scroll view is used, which is a kind of layout that allows you to scroll. Enter the settings menu on Android and you’ll understand what’s going on. To prepare this look, I first change the layout in the layout XML file to the scroll view:

<ScrollView xmlns: android = ” http://schemas.android.com/apk/res/android “

android: layout_width = “fill_parent”

android: layout_height = “wrap_content”  >

 

<TextView

android: id = “@ id / textView1”

android: layout_width = “wrap_content”

android: layout_height = “wrap_content”

android: text = “”  />

 

Scrollview>

I also put a text element to which I throw some text, so that you can see the effect of screen shifting. In the activity class, I add a piece of code that inserts the next number in the following lines into the predefined text element: