Tutorial details

Layout-file for Activity. XML Representation. Changing screen orientation | App Code for Sale | Preview

Layout-file for Activity. XML Representation. Changing screen orientation | Android Tutorial

How Activity knows which specific file to read

Overview PAGE TOP

In the last lesson we have learnt that Activity reads a layout-file and displays what is configured in it. Now let’s find out how Activity knows which specific file to read.

In this lesson we will rotate the screen. The 2.3.3 version emulator, which we have successfully used and will be using for testing our applications further, has a bug. It doesn’t rotate the screen correctly.That’s why, please remember lesson 3 and create one more emulator of version 2.2, for instance. When creating a project specify Android version 2.2 as well. Screenshots are made on version 2.3.3 - don’t pay attention to this.

Let’s create a new project:

Project name: P0051_LayoutFiles

Build Target: Android 2.2

Application name: LayoutFiles

Package name: ru.startandroid.develop.LayoutFiles

Create Activity: MainActivity

In development, every Activity has a corresponding java-class (subclass of android.app.Activity). When the application runs and the system has to display Activity and to work further with it, it will invoke methods of this class. And Activity behaviour depends on the content of these methods.

When creating a project we specified that Activity named MainActivity must be created.

When using the old wizard it looked like this:

startandroid.5.1.jpg

In the new wizard - slightly different. Tick on one screen, name on the other:

undefined.jpg

We asked to create an Activity and Eclipse has created a corresponding class for us (we will learn to create them by ourselves soon).

Let’s observe this class: double click the file src/ru.startandroid.develop.LayoutFiles/MainActivity.java

startandroid.5.3.jpg

In our class we can see that onCreate method is implemented - it is invoked when the application creates and displays the Activity (ignore onCreateOptionsMenu for now). Let’s have a look at the implementation.

First line: super.onCreate(savedInstanceState); - superclass constructor that performs all the required procedures, we do not touch it.

We are interested in this code: setContentView(R.layout.main);

Method setContentView(int) sets the content of Activity from the layout-file. As an argument we specify not a path to our layout file (res/layout/main.xml), but a constant, which is the layout file ID. This constant is generated automatically here gen/ru.startandroid.develop.LayoutFiles/R.java.

startandroid.5.4.jpg

You can open and view this file, but you shouldn’t change it. In the R class all the generated IDs for all project resources (from res/* folder) will be stored, so we could refer to them. Names of these constants are the same as resource file names (without extensions).

Let’s open res/layout/main.xml and see what’s inside

startandroid.5.5.jpg

Let’s run the application and see what happens

startandroid.5.6.jpg

Everything is correct - Activity displays what is specified in main.xml.

Let’s try to display the content of another file. Let’s create one more layout-file, myscreen.xml for instance. To do so, select a res/layout folder in our project and click the button for creating a new file.

startandroid.5.7.jpg

The wizard will open

startandroid.5.8.jpg

In the File field enter the name of the file: myscreen.xml and click Finish.

New layout file should open instantly. Add a TextView and change its text to "This screen is described not in main.xml, but in myscreen.xml" in Properties.

Now Eclipse will underline this text in yellow and complain saying something like this: [I18N] Hardcoded string "...", should use @string resource. It is disturbed by hardcode here. It wants us to use resource files for all the inscriptions. But for now, we don’t know how to do this, so ignore this warnings.

startandroid.5.9.jpg

It is obligatory to save the file for the new constant to appear for this file - R.layout.myscreen.

Now let’s configure Activity to use new myscreen.xml file instead of main.xml. Open MainActivity.java and change setContentView method argument. Change "R.layout.main" for "R.layout.myscreen" (ID of the new layout-file). It should be like this:

startandroid.5.10.jpg

Save and run the application. We can now see that it displays the content of myscreen.xml, because we explicitly specified it in setContentView method, which is invoked when Activity is created (onCreate).

![startandroid.5.1148.jpg](/images/tutorial/startandroid.5.1148.jpg

Layout-file in XML representation PAGE TOP

When you open main.xml you see it’s visual representation. It’s some kind of preview of how it will look on the screen. Below you can see two tabs - Graphical Layout and main.xml. Open main.xml

startandroid.5.1211.JPG

We see quite readable xml-description of all View elements in our layout-file. Names of xml-elements are classes of View-elements and xml-attributes are parameters of View-elements, which we change in Properties tab. You can also make changes right here and they will be displayed in the Graphical Layout. For example, change a text in a TextView. Instead of link to a constant, specify your own text "Some text".

startandroid.5.13.jpg

Save the file. Open Graphical Layout and view the changes.

startandroid.5.14.JPG

Usually, book authors present the content of layout-files in xml representation. It is convenient - you can just copy the fragment and use it, and you don’t have to add View-elements manually and to look through Properties and configure everything manually. I will do the same way in my projects.

Layout-file when changing screen orientation PAGE TOP

By default we configure layout-file for vertical screen orientation. But what will happen if we rotate the smartphone and horizontal orientation turns on. Let’s have a look.

Change myscreen.xml Let’s add a vertical row of buttons and change the inscription.

xml-code (you can copy and paste it into your file)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
<TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Vertical screen orientation">
</TextView>
<LinearLayout
 android:id="@+id/linearLayout1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">
<Button
 android:id="@+id/button1"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button1">
</Button>
<Button
 android:id="@+id/button2"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button2">
</Button>
<Button
 android:id="@+id/button3"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button3">
</Button>
<Button
 android:id="@+id/button4"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button4">
</Button>
</LinearLayout>
</LinearLayout>

Note that I’ve added vertical LinearLayout and put four buttons inside. We will discuss it in the next lesson in more detail.

Run the application. Everything is fine in vertical orientation.

startandroid.5.15.jpg

Press CTRL+F12 in the emulator, screen orientation changed to horizontal and our buttons do not fit the screen any more (version 2.3.3 emulator has glitches and screen orientation change doesn’t always work).

startandroid.5.16.jpg

So we need one more layout-file, which will be made for horizontal orientation and in our case will display buttons horizontally.

But how can we notify Activity, that in vertical orientation it has to use one layout-file and in horizontal - another? Android creators have already solved this issue for us. We must create a res/layout-land folder, and create a layout-file inside with the same name as in res/layout folder. This file will be used in horizontal orientation.

Create a folder: right click on res, New > Folder, Folder name = layout-land, click Finish.

Then we will create res/layout-land/myscreen.xml file and configure it for landscape orientation. Identically as the first time, click the button for file creation. The wizard will open.

Enter the name of the file: myscreen.xml

startandroid.5.17.jpg

The wizard can complain that the destination file already exists - The destination file already exists. That’s because it looks at earlier created res/layout/myscreen.xml file. We have to specify that the new file must go into res/layout-land folder, not res/layout. Click Next.

And here just manually add the suffix -land to get res/layout-land

startandroid.5.18.jpg

As a variant, we were able not to add the suffix manually, but to add Orientation attribute from the left column and specify it the value Landscape. Wizard would have understood everything right and added the -land suffix by itself.

We have added the path manually and wizard added the attribute to the right.

Click Finish and the file is now ready.

startandroid.5.19.jpg

Put this xml-code into the file and save it to get the same screen as above.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
<TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Horizontal screen orientation">
</TextView>
<LinearLayout
 android:id="@+id/linearLayout1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
<Button
 android:id="@+id/button1"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button1">
</Button>
<Button
 android:id="@+id/button2"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button2">
</Button>
<Button
 android:id="@+id/button3"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button3">
</Button>
<Button
 android:id="@+id/button4"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:text="Button4">
</Button>
</LinearLayout>
</LinearLayout>

Run the application. Activity reads the layout-file, which we specified as a parameter in setContentView - myscreen.xml and displays its content. Switch the orientation CTRL+F12. Activity understands that it is in horizontal orientation now, it looks for myscreen.xml in the layout-land folder and uses it.

startandroid.5.20.jpg

In this lesson we:

explored how Activity knows which layout file to read and configured Activity to read another file observed layout-file from the other side - XML found out, which layout-file is used when screen orientation changes (horizontal/vertical)

Reference PAGE TOP

http://startandroid.ru/en/lessons/complete-list/203-lesson-5-layout-file-fo-ractivity-xml-representation-changing-screen-orientation.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.