Lessons

Lesson Info

Styling the Text Area and the List

All right, Step three. Starting the text area and a list. So this is gonna be more of the same. Um, and you can see that the improvements just keep on getting better. Um, that's a much better looking text area. I think I am H o in my humble opinion and definitely a Bush better looking list item, I think with a nice little Grady in there, I think looks pretty clean. So that's what we're gonna be doing here to style the edit text component and the list item and the list component. So the close this guy down and go look at to step three, uh, text area and a list. And this is we're probably going a lot faster through this one because it's a lot pretty much the same. So, um, the first thing to note about styling the list Let's look, let's go through the list. First is inside the status detail. XML inside resource is layout status. T. I'm sorry. Not stash Main Main XML is where the list resides. You have to do a little bit of styling in the layout itself. Um, where did I, uh, actually, no no...

thing list. I'm sorry. That was for edit text. Well, let's go look at the edit text in a second here. Well, since I started off that way, actually, no. Sorry. Let's look at the text. First you have to do a little bit of styling yourself. It text. Um, Texas. Here we go. OK, text for you. Style. I noticed this. This is weird for the for the This is for the label that sits on top of the text of you or the edit text. Actually, I have to define the style of this text appearance myself because this is not picking up. This is the only way to, ah to say that on this screen. I want this title to be, um, with the title style. What's weird is you don't say android colon style. You say style. So keep that in mind, because that's been me a few times. I'm saying that the see here this style right here of this tale is this style text appearance dot title. I think we've already looked at that with us looking that one more time beside values styles, said the XML text appearance style. Want that to be experience title story I want to text out to be bold. So that's that's That's actually what I wanted to show that you sometimes have to do a little bit styling right inside the layout. So that's how I start this this title to be this text. All right, so now on to the edit text, um, edit text. I want this guy to be, ah, styled to be a little bit different from showing up right now in this version, which has the default orange outline and kind of this different. Just a shadow sitting at the top. So let's look at the definition inside the themes or edit text. So inside themes open that up. Um, in the components section, you see, they have added two new styles. Two theme one for the edit textile and one for the list of you style. And those are widget not at attacks. On which of that list of you, respectively back in the styles. Um, file. I have widget that edit text, and we did not list of you to find out online 47 to 58 the text appearance of the edit text, his text appearance, not at a text. The background is draw bowled out a text and the gravity is top. I set this in here, so if I switch back to the emulator, you can see that the the the insertion point or the cursor here is blinking red in the middle. It's kind of annoyance. Um, it's weird that that that's the default, um, for to be centered. But if I set the gravity to top that will show up at the at the top, you'll start type. When you start typing and won't be centered in the middle, it'll be centred at the top, our center, that it'll be aligned at the top, which is what we want now for the list of you. There's a few extra weird things here. The list selector is defined, um, here and you can see that it's a drop ball. So what that is is that is the the selector. So the set of styles for the different states of each individual list item Um, that's what that's style is defined. We'll look at that in a second. Now let me talk a little bit about this cash color hand. So when I'm scrolling, if I hit the back button here. Switch back to the landscape or portrait. It's very once these tweets were loaded here. We can see when I'm looks like Twitter's down or something. You need to fix that error message. So when I'm scrolling through this list here, Android has to draw a whole lot of things. Has to make a whole lot of changes to the list items that are showing up on the screen. Um, what it does, especially if you have some complex background like we're gonna have in a little bit, is cash the color and sort of hint at the color that that should be drawn as the background there? Um, as as an optimization. So it's not completely drawing all these list items Every time they scroll past that foul. It's actually hinting up the cash, hinting using that cash color as it's scrolling through the list so you can define what that color hand it is. If I was to change this to black, then things would look black as I'm scrolling through here, or they would look. It's possible that they would look a little bit weird. You want to make sure that that cash color hint is matched with your theme. Otherwise, you're gonna look, look a little bit weird there. Um, you're also able to, as you can see, online 56 defined the draw bowl for the divider between the list items, which is the guy that shows up right here between these list items. Um, uh, which makes it a little bit more cohesive to this style. And you can also online 57 here, change the divider height to see that you can have. Maybe if you want your list night. It was a little more spaced out. You can You can do something interesting there. I didn't do much interesting, though. Let's ah, look at that. That's the most simple drop ball. Uh, list. I have divider. So if I got a drop ball list item divider XML, you can see that I have drawn that as a shape A rectangle shape with just a simple ingredient, um, which has an angle of zero. So this is going to draw from, I believe left to right has a start color, a center color and an end end color. So this goes from a leg, a light gray to a darker gray to a lighter grey, um, split into even thirds across From what I believe, left or right. If I'm wrong, it's right toe left. But in any case, it's gonna be horizontal, not vertical. Um, Alright. So back to the styles. Let's look at the list selector background because that's that gets a little bit more complex. List selector. Background is my background for each list item. Look at that guy. The list selector background is a selector with a few items. Um, now here's something that I have to do, which is a little interesting. I'm I'm setting the Windows state focused false drop ball to the color transparent. So here's another interesting point about draw balls. You can. Any trouble can be an XML file defining some sort of shape or something, or it can be a pink file, or it could be a color so you can you can use any one of those. Resource is at any one of those points, so you could just say I want the draw able to be black, and it will do that. You have to go don't have to go through creating a separate file to store the fact that you want there background to be black. Um, let's see what I've got here. Let me Let me let me read my comment here. So I know what I'm talking about. Even though the these two point to the same resource have two states of the drop ball will invalidate itself. One coming out of the press aide. Okay, so this is actually not my comment. I copy this directly out of the code, Um, that I looked at for the android style. So I just, um I took this to be the gospel truth coming from Google. Um, you have to define state focus. True state enabled. False state pressed true and state focus true and state enabled. False without the pressed, um, attributes being defined. You won't even if they're the same, um, drop ball. I guess so. That, um, the drop ball will invalidate itself. One coming out of the press states so that it's coming straight from Google. I can't really give you much more explanation. Explanation From what? For? Why, that is the fact I just make sure that you define those just a zai have online nine and line 12 for those states. but otherwise for the Focus ST and the press state for focus falls pressed true Focus true press true and focused. True. I've got these, um, other definitions here. So focused. Let's look at focused. What? I did there first because that's the least complex. What I did for focused is I want, um I don't like that big orange splash color on there. I want it to be just sort of outlined instead. So what I've got is ingredient. Um, that is the default ingredient that I have. You know what? I never looked at the default one. Let me look at the default background really quickly for the first item, that is standard list on background standard. So I just have a rectangle shape with the great aunt that goes up 90 degree angle. Um, dark delight to light. Which is how I was able to do kind of a micro radiant start color center color. And Carl, er, um, that's another way to do. Ah, kind of and less than a, uh, let's see, I'm not really sure to describe this and go look at the keynote. So when I zoom in like I said, I can't zoom here the switch area to keep out. This way, you can see that the Grady Int shows mawr white than it does dark, with a little bit of highlighting here from the one above it. So that's the way I did that instead. And I think you get a little bit more control with the way that I they showed the center. Why Before? Um so this is this is another option that you can use this start color center, color and color to do a little bit more interesting drawing. So that's the standard. And what I wanted to do for focus was exactly the same thing. Except I just want a light or around the West item instead of completely changing the color when things are focused. So I put a stroke of Ford dependency pixels, um, with this button focused border color on the list item. So that's how focused and the standard works. But now for ST Focused, True and state press, true state focused faults and state pressed True. So in both cases, when the item is pressed, when I'm when I'm clicking on one of these list items, I have this item, the start of background transition, and that's a little bit more complex. So let's look at that state are listed on background transition. XML looks like this. It is a transition which, um, has to drop ALS. Basically, what I'm doing here is defining I, uh, transition from pressed to the standard state, um, and what? That Let's let's go look at the documentation for for that for and on Android calm. Let's look at the documentation for transition because it's a little weird what it does. It's a transition drop ball, and basically, it's sort of like an animation that animates between two, um, two different draw balls. So it's a drop ball itself that animates between, um, two different states defined by drop balls. Um, so basically what I'm doing is when this is clicked. See, you can also do this stuff in Charlotte. By the way, um, I'm switching between these two. Drop resource is, um, and it will be It will be what's called it. It'll be animated between those two drop goals by by android by something that's called a Tween animation. So you can go here to look at a little bit more of that But basically what you're doing is you're able Teoh, uh, to transition between these two states once the event takes place, that the user taps on it in this case. So let's go look at that, Actually, in action. Um, when I go down tear to step three and run the project, it happens really quickly, though. So this just sort of a subtle animation. You might not even be able to see it until you run the code yourself. Um, we're going to see a much better with side of background once this runs up and loads the tweets and we'll see that there will be a nice Grady int and then want to press It will be a transition between those two. So zoom in here a little bit. You can see that, Thea, the first of all the separators got a nice horizontal Grady in here it goes from a light gray or dark grey to white gray again. And now the last night of background has a radiant that's that's stays a little bit longer on the lighter color to dark color. And then when I press, it actually animates a little bit transitions between a suit troubles. Yeah, probably probably can't pick this up. Um, And then you could also see the focused state here yellow, which is a little bit different than, uh, haven't the way Andrew doesn't, which is to completely change the color so that I as a list of you, let's look really quickly at the edit text view. We went to the next step. The edit text view inside the Styles file is defined down online. 47 of styles. Do you have a text appearance of text appearance at a text? Um, and his background is the draw. Belinda texts and then the gravity's topic already mentioned. So at a text. A drop ball for at a text is, uh, at a text. There is, which is a selector with a bunch of different states and a bunch of different draw. Bulls text, field default, text field, disabled text, field pressed and text field disabled selected. So let's look at those for those different states. National makes sense by now. So text field default. Um, everything kind of builds off of this. Just is a rectangle shape the background radiant and a small one pixel stroke. Um, some padding and the corners air our ah six pixels around on each side. Um, there's only slight, slight changes for disabled. You can see that it's using a fill instead of a stroke with the This is disabled color and for pressed, you can see that it's using a probably transition hope. Just drawing a shape, um, with a focus border. And I think that I changed the start and end colors up so that the Grady in is backwards. You can kind of see that you pressed it. And then for this, uh, disabled selected, it's basically just like disabled with Phil, and then the stroke is using a different disabled focus border. So that's a lot of different definition, but it's all pretty much a theme on the same. There are variation of the same theme. Eso. When I go look at the the press menu and go to the post screen, you can see that there's a slightly different look to this text field when I press it here back when I press it, I get the text coming up, uh, that you get the keyboard coming up and you can see that it's ah, it's using my Well, I don't I don't think I really change that style much extreme except to change the size. So when I focused down to the button below, you can see that the one pixel line is in place instead of the yellow line. And so those are all the styles for the edit text. Oh, there's one more thing to tell you, though. That's important. And this is what I was trying to talk about at the beginning of the step. But I forgot to forgot what I was actually going to show you. Now I can actually show you the status list item. There's one thing that I need to do here to make this work. So moping up the layout status list item, you could see it. I've set the background to list item background on that. That that's a step that I found needs toe happen to get this list item to show up the way you want it to. You need to set because not all the states air in place, um, to actually make a show, because that's not how, um, Android. The android style works right off the bat. So to get this great and to show up right away. I need Teoh to set the Grady in two. All right? I need to get the background set upon each one of these list items just to make sure I understand that you're saying that in order to have the background of the list items show up properly when you first load it, you need to set the background in the layout and then the states are all defined in the separate themes. Yeah, because these states are not actually, I think coming into effect here and it's really weird. I don't I haven't found any documentation on this, and I'm not quite sure about why. Working that way. OK, but that's something I've sort of empirically found out that you need to do so Actually have. That is my summary everything. Everything. There was pretty much the same. But one thing to keep in mind is that the fully this style these list item gene did set the background in view as well as the list selector style on the list. If you're gonna go forward, if you're not gonna do like the way that android list set up, it doesn't really need that to happen because it's it's using a simple, flat background, I think the color foreground for the color background or something like that. Any case? Are there any questions about what we went through with, uh, styling list List items in the edit text? Yes, I have a couple on. Brian has a nerve agent one. So let him go. First. Your original design on the list. The list items had a three phase ingredient. Your sample does not show that. Can we go back and look at that Doing the three step radiant. You have a liner greeting of the top in a major Grady in at the bottom. You're talking about to recite a background standard. You mean with these three colors? Yeah. Okay, I'm I'm not saw that we're not seeing that from what I noticed, that the center in end color are both the same. Okay, I think that's an explanation. So that what? That's that's making okay. And also, I've got this greeting at 90 degrees acidity. So 273 suits coming up from the dark color. But since there's too of these, I'm just showing there's a There's a way to get a little bit more control about these colors. The center, color and color. Um, this is gonna basically split into thirds. And so I have the grain is actually showing a lot more white. And since it's transitioning from white toe white I'm sorry. The light color to the light color here, up at the top. Um, this does more of ah, the sort of a different texture than if it was just half in half. Since they're the same color, that's what I'm getting. Yes. So you're basically waiting the light color heavier, so it takes up more of that list item? Yep. Yep. OK. And noticing that I'm noticing too that the angle the 90 degrees basically said, Start from the bottom and go up. And the 2 70 you start from the top and goes down. Yeah, so? So I think I was right when I said that zero degrees would be from left to right, and that 90 degrees is bottom up. And then what comes next? 180 degrees would be from right to left, seventies bottom to top to bottom. Okay. And while you're on this emulator view, can you show pressing the button in this zoomed out state cause we had a hard time following when you're zoomed in. Okay? Yeah. Goto Webinar does not like zooming very much. Yeah, it looks great on the video recording, but it doesn't look good on the life. Okay. And you know what? Um I just noticed something here on the detail. I still haven't applied this style here for this texture to make the text link to be the red color. But I can go back and do that later. We could go through the next section. So any more questions, Brian? To give another one from the chat room? Uh, yes. I, um um we have a question about how we can make the transition duration last longer. I think you would want to use an animation, so I haven't actually showed an animation. But if I go to the documentation here, you can see that there's a and, um, animation. You would want to use a full on animation instead of issues in that transition. Um, you can see here if you go to this in the documentation, you can see what an animation is that all about. Um and I have not read off the top of my head. I don't know how to get this animation in place, but you can use this animation tag to define like, um, like a change between some fills. You can see her fill after Phil before, um, hot liberation, the animation, that kind of stuff. Um, that is what you would probably want to use their. And I'm not sure if it would actually fit into a style, but you can use it. I I think you can use it inside of a selector. So maybe that's something for the forms we can look into that that's a little bit more advanced styling.