Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

Android Studio: Layout Inspector

 

 
Peter-John Welcome
Mobile Engineering Lead, Google Developer Expert for Firebase, Photographer
Published: July 01, 2020
Tweet
Share
 

Photo by Erwan Hesry on Unsplash

 

Android Studio 4.0 was recently released to the stable channel and it came with many new features. A feature I’ve been looking forward to has been the Layout Inspector. I’ve been doing mobile development for a while, including iOS development, and when debugging iOS apps, especially when it came to UI bugs, Xcode had a great tool for this. It was called Debug View Hierarchy. This tool allowed developers to capture a screen running on your simulator or on device and inspect all the elements, constraints and attributes of the view.

 

 

I always wanted this in Android and i’m happy that it’s now be released in the latest version of Android Studio.

 

Getting Started

NB: You need to be on Android Studio version 4.0 or higher to use this tool.

If we open Android Studio, at the bottom right we will see a tab for the Layout Inspector. Once we have an app running either on an emulator or on a real Device we can open this tab and should start seeing our app we running show up in the inspector.

 

 

The Layout inspector has 3 parts to it: Component Tree, Inspector, Attributes. Let’s go through these sections and look at them in more detail.

 

Inspector

The inspector is our visual canvas of the current screen displayed on our emulator or device. This visualization is interactive, so we can click on our components to inspect different attributes.

The inspector also has a few options of its own. We have “view options” which allows us to show borders for each view component and “view label option” that shows us the id we have named that view component.

We then have the load overlay option which is great if you have designs from your UI designer. You can overlay these on your captured screen so that you can get your designs pixel perfect. This feature is awesome as it will help with reducing visual bugs from design to develop. It has an alpha value slide so you can see either the overlay or developed UI and in between too.

 

 

We then have “live update”, which will be streaming what is happening on your device to the inspector view. This allows us to see how our app behaves while we navigate through our application. Something to note though, when I had “live update” on, I saw drops in frames and jitter in my app. When disabling live update, things worked smoothly, so this could make your app look like its dropping frames but it’s maybe just the streaming of the data to Android Studio.

Lastly, we have the Layer Spacing slider which separates our view hierarchy and shows us each layer that makes up our component tree. The slider separates each layer so it’s easy to see which components belong to which layer. If we click move our mouse to the left or right over the inspector view, you will see the inspector view give us a 3D view of our layout which is really cool.

 

 

 

Component Tree

The component tree is the view on the left. This will show you each view component that makes up your view a specific time. This is great because it can show you in real time what your hierarchy looks like. We always want our layout hierarchy to be as flat as possible. This is an easy way for us to find elements on the screen and what values have been assigned to it like a buttons text or what text is being displayed in a text view.

 

 

In the component tree we can also hide and show specific views. We can right click on any element and tell the inspector to only show us only that element by saying “Show only Subtree” or you could hide that specific element or view group by selecting “Hide SubTree”. This is useful if you want to deep dive into one view and not see the views of the rest of the screen in the inspect.

 

 

Attributes

The attributes view is on the left of the inspector. This allows us to get insights to each of the components on the screen. If we select any component we will see the attributes view populate with all the values associated with that view. We can now see in real time dimensions of our view, margins we might have put in place and other more specific attributes to that view such as text colors, click listeners and many more.

 

 

This helps us see the state of a view component at any point in our interaction with that view. This will go a long way in making the view behave as they should.

 

Final thoughts

This is a very welcomed tool to have part of Android Studio. It will help many developers be more productive in debugging views and UI imperfections. I have been using it for just over a week now and it’s been fantastic. I hope it will be everyone else. For more information on the layout inspector you can refer to the documentation.

https://developer.android.com/studio/debug/layout-inspector

If you have tried it and have any experience with the tool, comment down below.

Stay in touch.

https://twitter.com/pjapplez

 

 

Tags: Android, Android App Development, Programming, Android Studio, Tools

 

View original article at: 


 

Originally published: June 05, 2020

Android News
Evolution of Android Update SystemEvolution of Android Update System
Evolution of Android Update SystemEvolution of Android Update System

By Ivan Kuten

So, how can you update Android on mobile devices? While developing software for Smart TVs and Android-based set-top boxes, we’ve narrowed it down to four ways, discarding some very exotic options:

By ProAndroidDev -
Android News
Happy Railway
Happy Railway

By Hadi Lashkari Ghouchani

This post is on the tail of Railway Oriented Programming in Kotlin by Antony Harfield. So you need to read it first and continue here. As it’s obvious I really liked it and tried it out. It needs every process have a result like

By ProAndroidDev -
Android News
Unit Tests and Concurrency
Unit Tests and Concurrency

By Stojan Anastasov

Once Retrofit added RxJava support, RxJava became my go-to concurrency framework for writing Android apps. One of the great things about RxJava is the excellent testing support. It includes TestObserver, TestScheduler, RxJavaPlugins so you can switch your schedulers in tests.

By ProAndroidDev -
Android News
When Compat libraries will not save you
When Compat libraries will not save you

By Danny Preussler

And why you should avoid using the “NewApi” suppression! The idea of “Compat” libraries was probably one of the key aspects of Android dominating the mobile space. Other than with iOS, Android users often could not update their operating system after a new version launch, simply as their phones won’t allow them to, the Android problem of fragmentation.

 

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One