Layout and Containers

Transcription

1 Geez, that title is freakin' huge. Layout and Containers This week, we'll mostly just be looking at how to better-arrange elements. That will include our first introduction into managed resources (even though that's the primary topic for next week). We'll also take our first look into making use of multiple Activities. Preparation First, let's get some basic stuff set up, before we add the 'fun' to it! Project I think we should make a new project. You're welcome to add onto last week's if you prefer, but I'll be starting fresh. Since I'm not likely to return to last week's any time soon, I'll probably delete the build and.gradle (note: not gradle!) folders from last week's project. Initial layout I'm going to start just like last week: make a project with a provided empty activity. Though it doesn't really matter what we call that initial Activity, I'll call mine Splash. I honestly don't care what the initial splashscreen looks like (feel free to put a picture or something). For mine, I'll change the default text to something else (e.g. Brock University, or Dealies. Probably the latter). However, we're not adding any functionality yet. First, we want another layout. That means another Activity... Let's create a new Activity. I'll call mine Relative. How do we do this? There are several ways, including directly creating the files you need, and adding the entry to the manifest yourself. But that's work. I'll go with: File New Activity Empty Activity Note that this will not be a Launcher Activity! There's one minor thing to watch out for: sometimes Android Studio is a bit odd for picking up the correct 'package name'. Make sure it hasn't changed it for you in this dialog. Ideally, it's now created the files we need, and also added an entry to the manifest. All done? Great! We now have two (trivial) activities! We'll decorate the new Activity in a moment; for now, just make sure it looks somehow different from your initial one (e.g. if you changed the text in the first, you're fine).

2 Starting new activities There'll be several ways to start new Activities. We'll be looking at the simplest for now. There's just one catch: we don't want our pseudo-splashscreen to load the next screen immediately. What's the alternative then? A Thread.sleep()? Some things to remember: An Activity is a view corresponding to the current mode or behaviour But it's also, basically, a UI UI's need to be responsive That means they can't just go to sleep for a while Even though we don't want our splash screen to response to anything, the Android system is designed such that an unresponsive system is treated akin to a crash Later on, when we have heavy lifting to do, we'll look into proper multiprocessing For now, we'll just be using a simple Handler to load the next Activity up The Handler will operate outside of the Activity's normal execution, so it doesn't hinder it Note that this is technically how you make a bad splash screen Checking we're all on the same page... We should all have the same setup at this point: An activity that acts as a main/launcher Another activity that currently has no way to starting Layouts for each (the contents don't matter, so long as they're different) Start the project as-is, and you should see your 'splash screen'. Making the splash screen splash We're not really talking about themes yet, so we won't worry about making the splash screen look like one. However, if you like, you can add the code: getsupportactionbar().hide(); to the end of Splash's oncreate() method. That should at least hide the title from the top. What matters most is launching the next Activity.

3 There are numerous ways to do this, but they'll generally involve a new Intent, and some variation of startactivity. What won't work We can't just create a new instance of our Relative Activity, and expect that to somehow display. What will work, but not usefully startactivity(new Intent(Splash.this,Relative.class)); This will definitely start the new Activity. However, there are two problems: You won't even get to see the splash screen at all If you press back on the new Activity, it will return to the splash screen (which is odd) The latter is easy to fix: Almost there startactivity(new Intent(Splash.this,Relative.class)); finish(); This tells it to dispose of the current Activity (because we're done with it). That means it won't be left on the Activity stack, and thus you can't return to it. If you're interested, there are actually some interesting things you can do, specifying parent Activities, and such, but that isn't necessary for this level. All that's left is the delay. We simply need to offload that delay into a separate Runnable. One (though not the only) solution new Handler().postDelayed(new Runnable() { public void run() { } }, 3 * 1000); startactivity(new Intent(Splash.this, Relative.class)); finish(); I'm sure we'll want to discuss the individual components of this. Remember: this isn't technically the best way to do a splash screen (or even necessarily good ). It's chosen because it's good for illustrative purposes. If you're interested in the topic from an actual development perspective, there's a nice (and quick) read here:

4 What we have now Humour me, and let's go through the checklist again: We have an Activity that acts as a splash screen, and automatically starts the program proper We have an Activity, called Relative (or whatever), that's currently empty That Relative Activity is effectively the starting point, as backing out will close the program Before we continue We're probably going to be re-executing our project frequently. If you don't feel like sitting through that long splash screen delay, feel free to either shorten it; remove it; or add an intent filter to the Relative Activity, and edit the project's run configuration to jump directly to Relative. Different layouts The current default layout for Android Studio is the ConstraintLayout. We've already looked at it a little, but didn't really get into its more powerful features. Constraint-solving is actually very important, and in fact is a major tool for effective development and UIs. However, this is an introductory course, and it's left to you to decide if you want to go into UI/UX. In other words: it's neat; it's powerful; if you're interested, Google is your friend. RelativeLayout This layout used to be the default, before ConstraintLayout, and the similarities will be quickly apparent. Let's start our first example by replacing the provided layout for our Relative Activity: <?xml version="1.0" encoding="utf 8"?> <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="10dip" android:paddingright="10dip" android:paddingtop="10dip" android:paddingbottom="10dip" tools:context=".relative" android:background="#a0a0ff" > </RelativeLayout> Note that much of this is highly inappropriate, design-wise. We haven't covered resources and themes yet.

5 Let's add a few Views: android:layout_width="200dip" android:layout_height="140dip" android:text="it's all Relative... Layout" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="next" android:id="@+id/relativenext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="click for Next" Naturally, if we try viewing it, as-is, everything will overlap. What can we do about that? Let's focus on the first TextView for now: android:layout_width="200dip" android:layout_height="140dip" android:text="it's all Relative... Layout" android:layout_centerinparent="true" Okay, that's a start. Note that, because the View itself it centred, but the text isn't centred within the View, the text isn't centred within the display area. What if we wanted control over that? android:gravity="center" will centre it just fine. What if we wanted the text in the bottom right? android:gravity="right" android:gravity="bottom" is less friendly. And we can see why pretty easily: we have two, conflicting, definitions. Easy solution, though: android:gravity="right bottom" gives us what we need. Okay then, howsabout we fix that Button? Personally, I'd like it right in the bottom-centre. How can we do that? Pretty easily, actually: <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_centerhorizontal="true" android:text="next" android:id="@+id/relativenext" So that's no big deal. The catch will be aligning the text label for the button. I want that one to be to the right of the Button. How do we do that? Huh... the Button has an id. Wonder if we can use that...

6 android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="click for Next" And now we finally see why it's called a Relative Layout. All positioning is done relative to some other existing element; whether that be the enclosing parent container, or another explicitly-identified View. Thanks to the wonders of code-completion, you can actually just browse the options pretty easily. Assuming we all understand up to this point, let's continue on to the next one, but first... Starting the next Activity While although we don't have the next Activity to start yet, we should still set up the Button to invoke it, just so we can complete this exercise before starting the next. You can set up whatever click-handling mechanism you like. Since we know we'll only have one Button behaviour, I'll just use the onclick property. The code is simple enough: public void linearnext(view button) { startactivity(new Intent(Relative.this,Linearity.class)); } Note that I didn't bother adding finish(), since I could, hypothetically, wish to return to this Activity. Interjection Neither here nor there, but try adding this to the new Linearity Activity listing within the manifest: android:parentactivityname=".relative" See if you can spot what it does. LinearLayout Ostensibly, LinearLayout is one of the less-powerful layout containers. It certainly doesn't have many features. It's designed with the assumption that you simply want to dump in multiple Views, which will all flow in the same direction. If you want to have many items, flowing in different directions, simply have LinearLayouts within LinearLayouts (or, of course, you can mix'n'match different Layouts within each other). Let's start simple:

7 <?xml version="1.0" encoding="utf 8"?> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="10dip" android:paddingright="10dip" android:paddingtop="10dip" android:paddingbottom="10dip" tools:context=".linearity" android:background="#a0a0ff" android:orientation="vertical" > android:layout_width="120dip" android:layout_height="80dip" android:text="first!" android:layout_width="120dip" android:layout_height="80dip" android:text="second!" android:layout_width="120dip" android:layout_height="80dip" android:text="third!" android:layout_width="120dip" android:layout_height="80dip" android:text="fourth!" <EditText android:layout_width="120dip" android:layout_height="80dip" android:layout_width="120dip" android:layout_height="80dip" android:text="next!" android:onclick="donelinear" </LinearLayout> I realize that's a lot, but note the opportunities for copy&paste.

8 Okay, so what's new? Most notably, we include a 'hint' that it should arrange them not only linearly, but vertically Before we continue... Let's do a bit of prep for when we'll be going to the next Activity. All we need to do is to add a donelinear method. I know I'm going to want to pass along the data from the EditText to the next Activity, so I'll just add a Toast as a placeholder for now: public void donelinear(view b) { EditText textfield=(edittext)findviewbyid(r.id.textdata); Toast.makeText(this,"Received: "+textfield.gettext(),toast.length_short).show(); } By the way, if you didn't notice, I didn't actually use a Button there. You can set onclick events for other Views as well. And now we resume... What happens if we rotate the screen?... oh no... ohhh no... We have to fix that! The problem here is that we have a portrait-friendly landscape, but nothing to guarantee that it's only displayed in portrait! There are two basic solutions for this: Only allow portrait mode, if that makes sense for the task Provide an alternate layout for when displaying in landscape We'll be going with the latter. If you switch to the Design view, one of the buttons has a Create Landscape Variation button (as well as a couple other variations). Try using it, and then let's briefly leave Android Studio to inspect the folder structure of the project. Ain't that neat?!? Anyhoo, let's redesign the layout for being landscape-friendly. While we're at it, there's also another problem to address: manually stating the sizes of Views is a terrible way to make them 'fill up the screen' better. So we'll address both issues. (Sorry for the blank space, but I want to start this on another page)

9 Our landscape version <?xml version="1.0" encoding="utf 8"?> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="10dip" android:paddingright="10dip" android:paddingtop="10dip" android:paddingbottom="10dip" tools:context=".linearity" android:background="#a0a0ff" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="2" android:orientation="horizontal" android:padding="10dip"> android:layout_width="0dip" android:layout_height="match_parent" android:background="#00ff00" android:layout_weight="1" android:text="first!" android:layout_width="0dip" android:layout_height="match_parent" android:background="#00ff00" android:layout_weight="1" android:text="second!" android:layout_width="0dip" android:layout_height="match_parent" android:background="#00ff00" android:layout_weight="1" android:text="third!" </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1" android:orientation="horizontal" android:padding="10dip"> android:layout_width="0dip" android:layout_height="match_parent"

10 android:layout_weight="1" android:text="fourth!" <EditText android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:layout_margin="20dip" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:text="next!" android:onclick="donelinear" </LinearLayout> </LinearLayout> Uh, wow. That's a lot, eh? Let's see what's new: First, we can easily have a Layout within a Layout, which is how we'll be handling pretty much any layout of reasonable complexity Some Linear Layouts are vertical; others horizontal The layout_weight is how it performs relative spacing between different elements within the same LinearLayout. If they're all the same number, they all get equal portions; otherwise, it's done according to the stated ratios (however, the actual values themselves don't really matter; just the relative ratios) A layout weight only works in a single dimension:e.g. if it's a horizontal linear layout, then the weights indicate width (conversely, for vertical, they determine per-element height) When you're using a weight, you should set the corresponding layout_width/layout_height to 0dip, since it would be overridden anyway We also used a bit of margins and padding, even though doing it this way is poor form Well, that was certainly interesting! Next, let's just go ahead and click that button again to... oh consarnit... What went wrong? Anybody care to venture a guess?

11 What went wrong Hopefully you gave it some thought, rather than jumping to the answer. The problem is that the EditText in the landscape version is missing its id. Of course, if you made all of the changes manually, rather than copying&pasting the example from above, you might not have had the problem arise anyway. This is something to watch for: when we specify more than one file, we run the risk of them not matching each other. In any event, just add to the EditText (to match the portrait version), and we're good to go on the next part. Sending information from one Activity to the next That Toast was just a placeholder, so now let's replace it with code to start the next Activity. The new Activity will be called Griddle in my version. Beyond simply starting it, we want to add some additional data. Thankfully, this is mostly just a combination of what we've learned this week, and last. My new version of the onclick code was: public void donelinear(view b) { String textdata=((edittext)findviewbyid(r.id.textdata)).gettext().tostring(); Intent gridintent=new Intent(this,Griddle.class); gridintent.putextra("textdata",textdata); startactivity(gridintent); } In our Griddle Activity, we'll have something like: String received=getintent().getstringextra("textdata"); Toast.makeText(this,received.equals("")? "Nothing there":received,toast.length_short).show(); GridLayout The GridLayout layout is an interesting one. Up to, and including, API 20, it was of limited use. The idea is to arrange elements in (huge surprise) a grid. Basically, each position is now indexable. Lollipop introduced a useful feature for it: the weights from the LinearLayout. However, if you're going to support API versions before Android 5.0, realize that it may render entirely differently from how it does on your screen. In any event, as mentioned above, we'll be making our new Activity: Griddle.

12 Naïve version In theory, we could just go with this: <?xml version="1.0" encoding="utf 8"?> <GridLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".griddle" android:rowcount="6" android:columncount="3" > android:text="first" android:text="second" android:text="third" android:text="fourth" android:text="fifth" android:text="sixth" android:text="seventh" </GridLayout> However, that looks terrible, and relatively pointless. Let's see what we can do with it! <?xml version="1.0" encoding="utf 8"?> <GridLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".griddle" android:rowcount="6" android:columncount="3" > android:text="first" android:layout_row="0" android:layout_column="0" android:layout_columnweight="1" android:background="#4040ff" android:layout_rowspan="2" android:layout_gravity="fill_vertical"

13 android:text="second" android:layout_row="5" android:layout_column="2" android:layout_columnweight="3" android:background="#4040ff" android:text="third" android:layout_row="0" android:layout_column="1" android:layout_columnweight="2" android:text="fourth" android:layout_row="1" android:layout_column="2" android:layout_columnweight="3" android:text="fifth" android:layout_columnweight="1" android:text="sixth" android:layout_row="4" android:layout_columnweight="2" android:text="seventh" android:layout_column="2" android:layout_columnweight="3" android:text="eighth" android:layout_columnweight="1" </GridLayout> A few things worth noting: If you don't specify the coordinates of a cell, it assumes it's just assigning them in sequence If you start setting row/column weights in a direction for one element, you'd best set them all Trying to set weights as well as layout_gravity (disposition relative to parent) fills tends to yield confusing results Final thought on orientation What if we don't want it to be able to rotate? One solution is to add android:screenorientation="portrait" in the manifest. We could also take direct control over the geometry-related callbacks, but... let's not.

14 Additional Layouts Of course, there are many more layouts. However, there's really only so many we can go through at once before it all starts becoming a blur. A few noteworthy ones: AbsoluteLayout this one is deprecated, and for good reason. Please don't use it TableLayout a tabular layout, we may come back to this later for forms FrameLayout a simple container, for when you just want to display one thing (though that single thing can change) This is all in addition to 'views' (not to be confused with Views. sigh).