outline views for design testing/debugging

Question

Is there a simple way to outline views with a border in some color when you run an app to see how the position and size is for the views? Like you could outline elements on a webpage in firefox with the addon "web developer".

Right now I have some "shape drawable" xml files for different colors that I use on different views. But its not optimal to need to add and remove all these shape drawable to the views in the layout xml files just to turn the outline on and off.

One solution I though of that maybe could work (but suppose there is better ways) is, if it is possible to add all "shape:s" in one single xml and still be able to "link" to each separate from the layout xml files? In that case I could just have two xml files, one with the "stroke" in the "shape", and one without (just empty "shape:s") and just change the name between them, to turn outlining on and off.

Right now every shape file looks like this (ex drawable/test_border_red.xml)

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <stroke 
    android:width="1dp" 
    android:color="#ff0000" 
    />
  <padding 
    android:left="1dp" 
    android:top="1dp" 
    android:right="1dp"
    android:bottom="1dp" 
    />   
  </shape>

and then adding...

android:background="@drawable/test_border_red"

to each interesting view in the layout xml file.

If its possible to have all "shape" in one xml file, how should the code look like?

Usually, people use Hierarchy View for this sort of debugging, as it tends to be more informative and requires no code changes. The biggest downside is that you need to test your app on an emulator to use Hierarchy View. — CommonsWare, Oct 21 '11 at 18:15
1+ good question i am looking after that answer too and here is the question i have posted http://stackoverflow.com/questions/9521889/how-to-turn-on-show-outline-for-all-views you will see this in my question i have posted images where you can easily turn on/off the outline but i am not sure. — Nick Kahn, Mar 02 '12 at 01:46

score 5 · Answer 1 · answered Sep 02 '16 at 20:08

5

No code needed:

On the device you are using for testing go to settings -> developer options and turn on Show layout boundaries

Problem solved

answered Sep 02 '16 at 20:08

Stuart Clark

611
8
13

jmhostalet · Answer 2 · 2014-11-01T20:43:18.457

Try this recursive method using the root view of the activity

private void outlineViews(View parent){
    if (!(parent instanceof ViewGroup)){
        return;
    }
    ViewGroup vg = (ViewGroup) parent;
    for (int i=0; i<vg.getChildCount(); i++){
        View view = vg.getChildAt(i);
        GradientDrawable gd = new GradientDrawable();
        gd.setStroke(3, Color.RED);
        view.setBackgroundDrawable(gd);
        outlineViews(view);
    }
}

you may also select "Dump view Hierarchy" from the Devices tab, it will dump your current layout with all the information about the view

enter image description here

score 0 · Answer 3 · answered Mar 02 '12 at 10:03

One possible solution is that you can have some custom layouts, e.g. you can extend LinearLayout, and override the onDraw method,

In your new custom layouts's onDraw method, you can get the positions of all child views and draw strokes on them recursively

outline views for design testing/debugging

3 Answers3