Programming and Personal Development

Android Frame Layout

Frame Layout in android is useful layout for reserving an area of screen to display a single element.  Elements added

Simple android frame layout demo

Android Frame Layout Demo

subsequently to the layout are placed on top of each other like a deck of cards effectively hiding the elements below them unless they are transparent.  By default  the elements are placed on the top left corner of the layout . But you can control where are the elements are placed by using the android:layout_gravity property.  The size of the frame layout is based on the size of the largest element placed inside it. Lets see the frame layout in action with a simple example.

We ‘ll place a few TextView elements  within the frame layout and attempt to rotate it with each mouse click , similar to shuffling three cards one after the other. Just to show, we can override the position of  the elements within the frame layout, I have placed the TextView elements at different positions as shown. To simulate the rotation of cards, we use a Queue to hold the 3 elements and  manipulate the android:visibility property in the  View class to show and hide the relevant elements.

Lets look at the xml layout first. The properties mentioned below are highlighted   for easy reference.

  1. Create the Frame layout as the root  element and let it take the entire screen by setting the layout_width and layout_height properties to “fill_parent”
  2. Add three Text View elements to  layout one after the other and set their text sizes to 50 “scaled pixels” for better visibility
  3. Set the android:visibility property, available to all the Views, as  “visible”. The possible values for this property are “visible”, “invisible” and “gone”. The difference between the latexml layout for android frame layout demor two is, that “invisible” elements participate in the determining the size of the layout while the elements marked as “gone” do not. However you can override this by setting the measureAllChildren property to true.
  4. We replicate the same settings for the other two text view elements but make them invisible so that only the first element is displayed on the screen.

Now lets look at the Java code to simulate the rotation of cards with mouse clicks. Again the useful snippets are numbered for easier reference.

  1. Within the OnCreate() method get the references to the TextView elements declared in the layout file using the findViewById() method. The method takes in the id of the element as agument. This is the same id specified via the android:id property in the xml layout file.
  2. Create a Queue, a linked list in our case and hold the invisible text view elements. Since we want to display the first element, we don’t add it to the queue.
  3. We then add a listener object called ClickListener  that implements the View.OnClickListener interface to listen for mouse click events on each of the  TextView elements.  We pass the queue to the listener via the constructor.Sample code for android frame layout demo
  4. The OnClick() method within the listener is called whenever the user clicks on the any of the TextView element and a reference to the clicked element is passed in as a argument to the  method. We use this reference and make it invisible using the setVisibility() method. We then add the element to the queue.
  5. Take the next element out of the queue and make it visible.




Web Analytics