Layout Editor-in-Chief – 98 of 100 Days of Code
The Layout Editor gave me some hacks for building apps moving forward.
I made the Birthday Card app following the Android Basics in Kotlin tutorial. Along the way, I learned about the Layout Editor. It’s a tool for, well, exactly what it sounds like. Editing a layout!
For more on this, watch the video a the bottom of the page. You can also find my source code HERE.
I’ve used a few IDEs over the years, but I’m not too familiar with tools specific to Android Studio. This tutorial gave me a way to explore this uncharted territory. Plus I got a refresher on some of the UI basics for Android.
VIEWS vs VIEWGROUPS
View Groups are a group of Views, and Views are the UI elements users can see. Buttons, text, etc, all these are Views.
ConstraintLayouts, RelativeLayouts, these are examples of ViewGroups. This is similar to the hierarchy of Containers and Widgets in Flutter. All this information can be found in the res/activity_main.xml file.
LAYOUT EDITOR
The layout editor is like a workbench for building layouts. It comes with three views: Code, Design, and Split.
Code allows you to edit the code in project files while Design lets you edit individual UI elements. The Split view allows you to see both and work with them at the same time.
Pro Tip: Shift + Alt + Right/Left keys will allow you to cycle through these views
COMMON ATTRIBUTES
Common Attributes are a set of attributes you can alter to style the UI. This area includes basic settings like text size, color, font, the works. After making these changes, you can restart your app to see them go live.
Pro tip: If you want to learn how to code certain Views, you can add them in the Design view. After you position them, switch to the Code view to see the new code!
The last thing I covered was setting constraints for Views. Constraints are used to position a View relative to the top/bottom/left/right sides of the screen.
This seems to be everything I need to start building interfaces. There are more advanced tools I’ll learn later down the line. But this is a good refresher.
Now I know how to add Views, position them on screen, and style them to my liking. I’ll add more notes as I work through these tutorials.
For more on this, watch the YouTube video below.
Join the mailing list to see updates like this every week!
Coding Fanatic
