View Navigator is a tool that allows you to inspect and validate all the views of a screen individually.

Overview

🎇 View Navigator

Platform API

View Navigator is a tool that allows you to inspect and validate all the views of a screen individually, highlighting the margins and paddings of each component, in addition, it is possible to navigate in the hierarchy of views and analyze all the elements that make up your screen.

       

Features 💡

View Navigator Window
sample

Info button

This icon shows the information about margins and paddings

Metrics button

This icon shows the information about margins and paddings with their values

Expand/Collapse button

This icon expand/collapse the items

Close button

This icon close the window

Items section

This section is a list with all the child views

  • Prev button: This button indicates that we want to analyze the views of the parent, we will go back one level in the hierarchy;
  • Next button: This button indicates that we want to analyze the views of this ViewGroup, we are going to advance one level in the hierarchy;
  • Invisible icon: This icon indicates that the view is currently invisible.

OBS: All this views are clickable, once clicked, the view will be highlighted:

Setup 🔧

To use the View Navigator, add the Jitpack repository to your root build.gradle:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency:

implementation 'com.github.MarceloAlban:ViewNavigator:{last_version}'

How it works? 😕

View Navigator shows all components of a base root layout visually, all elements are clickable and when clicked they are highlighted with margins and paddings.

We can use the View Navigator in two ways:

For the entire application

In this case, the View Navigator will appear for all activities and fragments automatically, to do this, you must register the View Navigator in the Application class through the ViewNavigatorRegister class:

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        ViewNavigatorRegister().register(this)
    }
}

Registering in the Application, the View Navigator will be always visible in the screen and will refresh the views when you navigate to another Activity or Fragment.

For a single Activity or Fragment

In this case, the view navigator must be called manually, we can do this through the ViewNavigatorWindow class:

ViewNavigatorWindow(rootView).show()

Example

I want to inspect a specific layout in my xml

XML

...
<androidx.appcompat.widget.LinearLayoutCompat
    android:id="@+id/rootLayout">

    <com.google.android.material.textview.MaterialTextView/>
  
    <com.google.android.material.textview.MaterialTextView/>
  
</androidx.appcompat.widget.LinearLayoutCompat>
...

CODE

// With ViewBinding
ViewNavigatorWindow(binding.rootLayout).show()
// Without ViewBinding
ViewNavigatorWindow(findViewById(R.id.rootLayout)).show()

Thanks 😉

Thanks for using, I hope it helps your project!

You might also like...
Taxi - an example of how to create an introductory screen using Jetpack Compose
Taxi - an example of how to create an introductory screen using Jetpack Compose

Taxi - an example of how to create an introductory screen using Jetpack Compose

Clone of a onboarding screen📱animation originally created by @cuberto.

BubblePager Here I tried to clone an onboarding screen animation using Jetpack Compose. Download the apk file from the release page and try it yoursel

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen
Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen following Udemy course: Android 12 Jetpack Compose Developer Course - From 0 To Hero

 Yet another awesome Intro screen library 🔥
Yet another awesome Intro screen library 🔥

Compose-Intro ✅ Yes, I'm too bad in naming my libraries : ) Yet another Intro Screen library made with the love of Kotlin and Jetpack compose : ) ❤️ ✨

📊 A web tool to visualise and compare your android benchmark results
📊 A web tool to visualise and compare your android benchmark results

benchart A web tool to visualise and compare your android benchmark result ✨ Demo Screen.Recording.2022-11-26.at.2.36.55.PM.mov ✍️ Author 👤 theapache

😇Translation tool based on Jetpack Compose
😇Translation tool based on Jetpack Compose

📸 Screenshots   License Copyright 2020 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not u

A simple tool to display a text tree with Jetpack Compose🌲

A simple tool to display a text tree with Jetpack Compose🌲

TaskScheduler - A concise practical task management tool for scheduling tasks for Android

TaskScheduler A concise practical task management tool for scheduling tasks for

SvgToCompose - SVG path to Jetpack Compose tool

SvgToCompose SVG path to Jetpack Compose tool This tool can take the SVG path, and export it as a Jetpack Compose material icon path method calls. Exa

Releases(1.0.4)
Owner
Marcelo Alban
Marcelo Alban
⌨️ A tool that gives you a massive head start when building Compose Desktop apps. It saves you from time-consuming setup and configuration

?? create-compose-app A tool that gives you a massive head start when building Compose based apps. It saves you from time-consuming setup and configur

theapache64 466 Dec 21, 2022
⌨️ A tool that gives you a massive head start when building Compose Desktop apps. It saves you from time-consuming setup and configuration

?? create-compose-app A tool that gives you a massive head start when building Compose based apps. It saves you from time-consuming setup and configur

theapache64 468 Dec 30, 2022
SSJetpackComposeSwipeableView is a small library which provides support for the swipeable views

SSJetpackComposeSwipeableView is a small library which provides support for the swipeable views. You can use this in your lazyColumns or can add a simple view which contains swipe to edit/delete functionality.

Simform Solutions 60 Nov 18, 2022
Flippable - A Jetpack Compose utility library to create flipping Composable views with 2 sides

?? Flippable A Jetpack Compose utility library to create flipping Composable views with 2 sides. Built with ❤︎ by Wajahat Karim and contributors Demo

Wajahat Karim 298 Dec 23, 2022
OTPView is a view made in Jetpack compose. It is highly customisable and can be used to show OTP view with different length and shapes.

OTPView OTPView is a highly costumizable OTP view made in the Jetpack compose UI. Usage: CircleOtpView is a sample composable that calls the OtpView w

kunalsale 17 Aug 4, 2022
Instagram Profile Screen UI With Jetpack Compose

Instagram Profile Screen With Jetpack Compose In this repository, i made instagram profile screen. And i used jetpack compose. While i make this app,

Adem ATİCİ 10 Mar 6, 2022
An Android Jetpack Compose library for displaying on-screen messages

InfoBar Compose An Android Jetpack Compose library for displaying on-screen messages. Unlike the built-in Snackbar from the Compose Material library,

Radu Salagean 78 Dec 20, 2022
Compose-Instagram-Profile-UI - Instagram profile screen UI using android jetpack compose

Compose-Intsgram-Profile-UI Instagram profile screen UI using android jetpack co

TILLERN 1 Mar 8, 2022
ComposeLoginScreen - A sleek design of a simple login screen using Jetpack Compose

ComposeLoginScreen A sleek design of a simple login screen using Jetpack Compose

ComposeDesign 19 Dec 5, 2022
GameDetailScreenCompose - Game Detail Screen Compose With Kotlin

GameDetailScreenCompose Домашнее задание от Podlodka Crew. "Нужно сверстать экра

slartus 2 Feb 19, 2022