From the course: Android Development Essential Training: The User Interface with Kotlin

Position views with LinearLayout - Android Tutorial

From the course: Android Development Essential Training: The User Interface with Kotlin

Start my 1-month free trial

Position views with LinearLayout

- [Tutor] An Android view group component is a container that manages and lays out child objects. Each view group is extended from a view group superclass that implements critical shared functionality. But then each specific view group has its own rules and logic. In this demonstration I'm working with a simplified version of my app. My MainActivity class has everything stripped out except a very simple onCreate function. The outer layout file activity main no longer has a floating action button and the nested layout content main also is empty. I'm going to start by showing one of the simplest and oldest of the view group components. The LinearLayout is one of Android's original container classes. It automatically lays out its child view objects from top to bottom. If its orientation is vertical or from left to right, if it's horizontal. I'll go to design mode in content_main.xml I'll go to the Layouts category and notice that there are two entries for LinearLayout. One labeled horizontal and the other labeled vertical. These create the same code but with one attribute that's different. The orientation attribute. I'll drag in a vertical LinearLayout and then I'll anchor that to the top and the left side of the container. The ConstraintLayout. Now I'll go to the text mode and I'm going to reformat this code. If I select code reformat code nothing happens but I'm going to make a change in Android studio's configuration. I'll go to Preferences on Mac or settings on Windows and under Editor XML I've chosen the Android tab. I'll check this option to use custom formatting settings for Android XML files and click OK and then I'll reformat again and minimally that removes extra line feeds depending on which version of Android Studio you're using. You might see other changes as well such as reordering the attributes. Now, I'm going to add two more constraints I'll add bottom to bottom of and I'll set that to parent and end to end of and I'll set that to parent as well. Next I'll go to design view and notice that the LinearLayout now expands to fill the screen and I'll go to the buttons category and I'll drag in a button. Notice that the button jumps to the top of the screen. I'll go back to text mode and notice that the layout width was automatically set as match parent. I'll change that to wrap content and that will cause the button to shrink down so it only accommodates the text in the button I'll also make a change to the LinearLayout. I'll change both the width and the height to 0dp and that's an instruction to say calculate those sizes automatically. I'll go to design mode and I see the button shrink down. Back in text mode, I'll now copy and paste that button component I'll get rid of the ID because that has to be unique then I'll select this code and I'll press Command + D on Mac or Control + D on Windows and that duplicates the selected code. I'll go back to design view and now the buttons are laid out from top to bottom I'll run the app on my physical device to verify that what I see in design mode matches what happens on the real device and there are the buttons laid out from top to bottom. Back in Android Studio go to text mode and I'll change the LinearLayout's orientation attribute from vertical to horizontal and once again I'll go to design mode and now the buttons are laid out from left to right. Back in code, I'll add another attribute called gravity. Now the gravity setting can either be set to center, center_horizontal or center_vertical. If I set it to center, and then look at design mode again. Now the buttons float in the center of the screen. If I change that to central horizontal they go to the top of the screen but they're still centered horizontally. You can combine these three attributes in various ways. For example center_bottom would mean center horizontally but push the components to the bottom of the layout and once again it's a good idea as you're experimenting to periodically run the application on a real device and verify that what you're seeing in design mode matches what happens when it's really running the LinearLayout container has many other tricks available. And even though it's a legacy component it remains useful for many layout tasks.

Contents