MAP524/DPS924 Lecture 4

Layouts

Layouts are a way to arrange your widgets on the screen semi-automatically, so that your app looks normal regardless of screen size and resolution, android version, theme in use, font size, etc.

In most cases you will not be referencing your layout from code, since Android will handle everything you'd expect a layout manager to do. It's the contents of the layout that you care about.

No matter which layout you choose to use at first it will take you time to figure out the combination of android:layout_* attributes to make it look exactly as you want. We'll try a few experiments in class today, and you should spend a few hours playing with them also.

LinearLayout

Puts all its contents in one line: either horisontal or vertical. Though very simple this can be used to create nearly any kind of layout you like, especially since you can put one layout inside another one.

You can use layout_weight to decide how to allocate space to each View in the layout. If only 1 View has a layout weight then it will automatically fill the rest of the LinearLayout in that dimension.

Scrolling

In order to make the contents of the LinearLayout scrollable you have to do something a little strange: you make the layout a child of a ScrollView. Android will handle everything else, including creating and showing/hiding the scroll bar.

RelativeLayout

The default layout but it's quite a bit more complicated than LinearLayout. Instead of everything being in one line, every View in this layout is arranged relative to some other view (or a side of the layout).

For example if you have two buttons you can arrange Button1 to align with the layout it's in using android:layout_alignParent* and align Button2 under Button1 using android:layout_below. See the XML Attributes section of RelativeLayout.LayoutParams

This layout also can be used to create pretty much any imaginable layout, but I find it much harder to maintain.

Views

Depending on how advanced your application is you may need to make your own views, but in most cases you'll be able to work with the existing ones.

All these views are usually defined in your layout XML file, and most of them will be controlled in some way from code. In the last lecture we saw how to get a reference to an XML-defined element in your java code.

• TextView: Used to show text. Can change attributes like the text size and colour. Can't be used for complex text but can be made to contain clickable links.
• Button: obvious enough.
• CheckBox: obvious enough. Can be [un]checked from code at any time.
• RadioButton: When you want it to work like a real radio button you need to add more than one to a RadioGroup. See the documentation.
• EditText: Like the AutoCompleteTextView you used in the last lab, but without the auto complete feature. Can be made read only, be restricted to one line, and using the addTextChangedListener callback you can do very interesting things. Also note by changing android:inputType you can change the keyboard that's presented to the user.
• ImageView: Show an image from your resources (or the Android resources). Use the an android:src attribute to set the source of the image.
• ProgressBar: By default isn't actually a bar, it's a spinning wheel. To make real use of it you really need something running in the background (a thread or AsyncTask). See the documentation.
• NumberPicker: Lets the user choose a number. Needs to be configured in java before it works to have a minimum and maximum value using setMinValue() and setMaxValue().
• Spinner: Like the number picker but with any strings as values to pick from. You'll need an Adapter similar to the one you used with the AutoCompleteTextView in the last lab, otherwise it will show nothing.

Fragments

Were introduced with 3.0 and made things much more complicated. But if you're developing for phones and tablets they actually make things easier.

The Android Developer overview of fragments is expansive but it's a good place to start if you intend to use one.

Implementing your own

Follow these steps to make a simple app with fragments:

• Create a default app named FragmentExample. Set your Minimum SDK to API 15 and choose a Blank activity.
• Add two new Java classes that extend Fragment, each with their own layouts. This is easy to do with Android Studio by selecting New -> Blank Fragment. Name the classes FragmentOne and FragmentTwo. Do not include fragment factory methods or interface callbacks and set the layout names to fragment_one and fragment_two.
• Inside your activity_main.xml layout, insert a LinearLayout group view after the TextView. Make the ID of the LinearLayout "fragView".
• Now in your MainActivity.java class, onCreate method, you'll need to get a reference to the activity fragment manager like this:

FragmentManager manager = getFragmentManager();

• Next get a reference to a fragment transaction like this :

FragmentTransaction transaction = manager.beginTransaction();

• Now create two new fragment objects by instantiating your two fragment classes like this

FragmentOne fragOne = new FragmentOne();
FragmentTwo fragTwo = new FragmentTwo();

• Add the two fragments to your transaction like this:

transaction.add(R.id.fragView, fragOne, "Fragment1");
transaction.add(R.id.fragView, fragTwo, "Fragment2");

• Now commit your transactions like this:

transaction.commit();

• The code above is strange even for the Android programming world, but that's the way it is. You could also add fragments via XML but that won't give you as much flexibility (which is what you're going for if you're using fragments).
• Modify the two fragment layout files so that each TextView contains a unique string - for example "hello From Fragment One" and "Hello From Fragment Two".
• Also, change the background colours of the two fragments so they can be easily identified - for example "#550000" and "#005500" which are red and green. You can also change the background of the main activity to blue "#000055".
• You can now run your app. However you'll notice that fragment one is sitting on top of fragment two so fragment two is not visible.
• In your activity_main.xml file, change the height of the LinearLayout view group to wrap_content and run your app again. Now it should show both fragments.