Android View Basics: Coordinates,Margin,Padding,Dip,Px



In this post,I am going to go for the basics of Android Views like its co-ordinates,difference between margin and padding and what is dip and conversion from dip to px and vice versa. In order to proceed,let’s first get some understanding about Android device Screen Size and Screen Density. For these two terms, I will take help from Supporting Multiple Screens

  1. Screen Size: This is simply the width and height of the device rectangular screen. So,when we say 480×800 device,we are referring to the screen size whose width = 480 px and height =800 px


  2. 480x800 screen

  3. Screen density: It means how many pixels are present in a given area of the screen. Let’s say we have 1 square inch of area (i.e. width=1 inch and height =1 inch) on 480 x 800 screen size device. The number of pixels on that 1 square inch of area determines the density of pixels. If that 1 square inch of area holds more number of pixels,then that screen has high density. Meaning greater the number of pixels,the greater is its density and if lower the number of pixels,lower its density . Look at the picture below to understand the concept visually (taken from BBC site ). This indicates that 480×800 device can be ldpi,mdpi or hdpi as per its screen density . But, if screen size is large,then large pixels can be accommodated compared to small screen size devices.
  4. pixel-density-1


Let us know more about dip now.
dip: We all know that Android devices comes with different density and screen sizes. While giving View attributes like layout_width,layout_height,layout_margin,padding etc we use values with dip unit. So when we say android:layout_width=45dip and android:layout_height=45dip,we are drawing a view with 45 width and 45 height. The analogy which I am going to present is not accurate,but it helps in understanding dip concept. Say to draw 45 width line 45 pixels is needed.And if there was no dip ,then on higher density device the width seems smaller( as more pixels are found in a given area) but on lower density the width seems larger( as less pixels are found in a given area). Take a look at the picture below where there is not dip usage

View without dip consideration


Now when we use dip values,Android automatically takes screen density into consideration and then distributes the value as per the density, such that the view appears more or less similar in all the screens. Take a look at the picture below where there is dip usage.

View with dip consideration

Now comes the role of px.Whatever value in dip we represent,it has to be converted on actual screen unit or pixel. So px is the actual dimension that a view holds in screen. This conversion is handled by Android system. Meaning ,whatever we write in dip,it will convert those values to its relevant px unit,so that it could be drawn on the screen.For this,it takes the screen density into consideration.

If you write 5 dip,its pixel value will be different on different screen density.Using online dp to px calculator ,we get following px values for 5 dip on different screen densities
dp to px calculator


If you want to look upon the formula involved for dp to px conversion and vice versa ,you can look upon this conversion gist
Just check view.getWidth() or view.getHeight() ,it will give you different values than that, you have written on your layout.xml. Meaning,if you have given width and height as 45 dip on your layout.xml file,then calling view.getWidth() or view.getHeight() ,you will receive their respective px values.

Let’s now focus on to Android View Co-ordinates.In Android ,all the co-ordinates will be represented on px values. Android Screen as well as its view coordinates origin is (0,0) i.e. it starts from top left corner. Moving right from origin is positive X-axis and moving down from origin is positive Y-axis. Take a look upon the figure below

Screenshot from 2013-12-10 16:39:29

Screenshot from 2013-12-10 16:34:54


Let us take a following

 
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/firstLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/secondLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:background="@color/color_yellow">

        <ImageView
            android:id="@+id/firstImageView"
            android:layout_width="48dip"
            android:layout_height="48dip"
            android:layout_margin="5dip"
            android:background="@android:color/darker_gray"
            android:padding="5dip"
            android:src="@drawable/ic_launcher" />

        <ImageView
            android:id="@+id/secondImageImageView"
            android:layout_width="48dip"
            android:layout_height="48dip"
            android:background="@android:color/black"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <ImageView
        android:id="@+id/thirdImageView"
        android:layout_width="48dip"
        android:layout_height="48dip"
        android:src="@drawable/ic_launcher"
        android:background="@android:color/black" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:id="@+id/thirdLayout"
        android:background="@color/color_orange">

        <ImageView
            android:id="@+id/fourthImageView"
            android:layout_width="48dip"
            android:layout_height="48dip"
            android:src="@drawable/ic_launcher"
            android:background="@android:color/darker_gray" />

        <ImageView
            android:id="@+id/fifthImageView"
            android:layout_width="48dp"
            android:layout_height="48dip" 
            android:src="@drawable/ic_launcher"
            android:background="@android:color/black"/>
    </LinearLayout>
</LinearLayout>
  

I am making all the test on my Samsung Galaxy S I8262 device which has a screen size of 480×800 px and screen density of 240 dpi. So, the values which I illustrate on px is equivalent to this device only and you may yield different values of px on your devices. If you look upon the layout.xml,I have used mainly two dip values, 48dip and 5dip. The respective value of them in px is 48dip=72px and 5dip=8px. So ,let us now calculate,the co-ordinate of each of the views. For that we must understand these terms view.getLeft(),view.getRight(),view.getTop(),view.getBottom(). These values are always taken in reference to their parent i.e. how far to the left and bottom of the viewgroup/parent is the view lying.Look upon the figure below
Screenshot from 2013-12-11 17:33:45
Figure A
Screenshot from 2013-12-11 19:19:18
Figure B
Screenshot from 2013-12-12 14:16:28
Figure C
Looking at the figure above,following points can be gathered

1) getLeft() : distance between leftmost edge of parent and leftmost edge of view
2) getRight(): distance between leftmost edge of parent and rightmost edge of view
3) getTop(): distance between topmost edge of parent and topmost edge of view
4) getBottom(): distance between topmost edge of parent and bottom most edge of view
5) View position or location inside parent: (getLeft(),getTop())
6) view width = getRight()-getLeft()
7) view height = getBottom()-getTop()

Look at Figure B and note down firstLayout getRight() and getBottom() values. We have 480×800 px screen,and firstLayout is our main layout, which has the freedom to occupy whole screen(look upon layout.xml). Here getRight()=480px and getBottom=690px. firstLayout fills entire screen and its width value equals width of screen. But is height=690px-0px != 800px. I am not running this sample on fullscreen mode,so while launching the app,I will have status bar and ActionBar (if I am running on Android 3.0 and above or if I am using ActionbarSherlock). In my case,I have both status bar and ActionBar. These two views also take portion on screen and in my case I am using portrait mode ,where status bar height=38px and actionbarHeight=72px. So

firstLayout getBottom() = screenHeight()-(status bar height+action bar height)
=800 -(38+72)
=690px


Look at the following figure,to understand more.
Screenshot from 2013-12-12 17:04:48
But If I had run my app on fullScreen mode,then firstLayout height would have been 800px. For calculating status bar height and action bar height,you can refer to following gists
status bar height:
action bar height:

getLeft(),getTop() gives view's position inside parent/viewgroup co-ordinates. But If you want to get the position or location of view in the screen you have to use

 int[] xy = new int[2];
 view.getLocationOnScreen(xy);
 int xPosition =xy[0];
 int yPosition= xy[1];						

Screenshot from 2013-12-12 16:40:25
I hope,all the explanation gives you idea about Android View Co-ordinates .
Lastly, I want to briefly explain about Margin and Padding . Consider the following

  <LinearLayout
        android:id="@+id/secondLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:background="@color/color_yellow">

        <ImageView
            android:id="@+id/firstImageView"
            android:layout_width="48dip"
            android:layout_height="48dip"
            android:layout_margin="15dip"
            android:background="@android:color/darker_gray"
            
            android:src="@drawable/ic_launcher" />

        <ImageView
            android:id="@+id/secondImageImageView"
            android:layout_width="48dip"
            android:layout_height="48dip"
            android:padding ="10dip"
            android:background="@android:color/black"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

which is visually seen as
Screenshot from 2013-12-12 17:22:38
Here both ImageView has width and height of 48 dip. firstImageView has layout margin=15dip and secondImageView has padding =10dip . By adding padding/margin , the view height and width remains same,there won’t be any change. While doing margin ,the view will be moved margin distance to left,right,top or bottom within parent view . So, while accessing view margin programmatically ,you have use view layoutParams . When we do padding, the view moves its content (in our case the ImageView src) to padding distance to left,right,top or bottom within the view itself. Maybe the pictorial representation,above would highlight this.
This is all,for now and if you are reading this,then probably you haven’t slept while reading this long blog list. The main reason,I wrote this post is that,I wanted to visually represent Android Co-ordinates and make understand basics of dip,px,margin,padding .
If you want to find out by yourself,the dimension represented on the figure(though value may differ as per screen density),you can play with this source at laaptu’s github.
Till next time have fun and enjoy 😉

Advertisements