Android FrameLayout Example

 

FrameLayout is essentially used to represent layers of the screen, especially when adding multiple components to it. So using FrameLayout you can make watermarks in your Android App.

Unlike other layouts which displays new components below or next to the previous component, Android FrameLayout always positions all its child components from top-left i.e. x=0, y=0 co-ordinate – starting of the screen. You will see all this in our current Android FrameLayout Example.

 



Download
Source Code : FrameLayout.zip


Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) FrameLayout which you might have downloaded from above or you can follow the scripts below by copying it to implement  in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/FrameLayout/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

 

1. activity_main.xml : Layout file

Explanation of above Code :

  • Line 1-4  Let us start with adding a FrameLayout in our project filling up the whole screen with layout height-width set to fill_parent, which will extend upto Line-28, so everything we add between this will become child of our FrameLayout. The components which we add first to FrameLayout will be referred as elder child & newer components as the youngest child.
  • Line 7-11  We have added an ImageView as our 1st child to FrameLayout, which will start from (0,0) coordinate over the screen. Since it is an eldest child it will be sent to back-layer of the screen.
  • Line 14-18  Now we add a TextView inside existing FrameLayout after the ImageView. You will see that our TextView will also start from (0,0) coordinate i.e. it starts from top-left of the screen. Our TextView being second child to FrameLayout it will be younger one & hence it will get placed to one of the front-Layer of the screen.
  • Line 21-25  We have added our 2nd ImageView right after the TextView. Again this ImageView will also start from (0,0), but due to the property layout_gravity, it is supposed to align itself in center.You will also note that our small image-icon will overlap the previous image, since our Current ImageView is in front-layer being the youngest child to FrameLayout.

 

 

2. MainActivity.java

 

 

Output :  Android FrameLayout

Android FrameLayout Example

 

Try it yourself :

  • Exchange position of 1st ImageView with TextView. You will see that TextView will be hidden by ImageView. The reason is that TextView at that time being elder child will be sent to back-layer compared to ImageView which will be in front-layer.
  • Using 2 ImageView try watermarking. It is same as we did with our 2 ImageView for our Project FrameLayout.

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.