Monday, August 9, 2010

Overlay on Android Layout

This will help you to create custom Layout and add Overlay on a LinearLayout. The concept can be reused on other Layout classes i.e. RelativeLayout, FrameLayout etc.

I have added a popup Selection Palette, containing "Map Pin" and "List" icons. You can minimize the popup by clicking on the section in Green on the left side bottom corner of the screen.
 

How can I do that-
You need to follow 4 steps-
1. Override LinearLayout
Create a Class MyLinearLayout.java which should overwrite LinearLayout

2. Drawing
You need to overwrite dispatchDraw(Canvas canvas) method. It gives control to the whole screen. Make sure you set android:layout_height="fill_parent" for the associated layout definition in XML. You can draw anything and anywhere on the canvas. dispatchDraw(Canvas canvas) gets called only after underlying views are drawn, so whatever you draw comes in the foreground.
 
3. Event Handling
You need to overwrite dispatchTouchEvent(MotionEvent e) method. onTouchEvent(MotionEvent e) doesn't work. Make sure you don't pass click event controls when user clicks on your specific drawing region.

4. Using your custom Layout on XML
You can now use your custom Layout class in Layout XML files (define your class name with package, see below example) -


You can download complete source code from here.

12 comments:

  1. Really great! Excellent help, thanks!

    ReplyDelete
  2. thanks for the post, however the download does not appear to be working

    ReplyDelete
  3. thanks for your comment.
    Due to limitation of Google Group File Share, you can't directly download resources from this page.

    1. Click on the resource link, which will open a new page
    2. Do "Save Link as.." on that new page
    Hope it helps!

    ReplyDelete
  4. Thanks for your post!
    it helps me a lot!

    ReplyDelete
  5. Thank you very much, very informative post

    ReplyDelete
  6. thank you very much, helped me a lot

    ReplyDelete
  7. Hello Prasanta,
    How to overlap 2 Imageview Using Relative Layout?

    ReplyDelete
  8. Hi, I am unable to obtain the source code which would greatly help me in this instance - is there anyway of finding it? It seems the link is dead, all I get is a copy of the webpage upon downloading.

    Thank you.

    ReplyDelete
  9. Dear All,

    I have hosted all sample code on code.google.com-
    http://code.google.com/p/android-java-sample-code/downloads/list

    Thanks,
    Prasanta

    ReplyDelete
  10. Hi Prasanta. Thanks for the wonderful tutorial... Just wanted to point out that the LayoutOverview.rar file seems to be damaged. I have tried several rar programs both on Mac and Windows and they all complain that the file is damaged. Any chance you could re-zip the source and publish it for download?

    Thanks a lot in advance,
    sanjiv

    ReplyDelete
  11. Great stuff! Really useful.

    ReplyDelete