Android Layout obstacle

Question

HI All,

I m working on one application in android. On the Home screen i have 6 buttons.

enter image description here

like this. on the buttons a have one transparent view which shows the current date.

Problem:

I can not design the layout for the same.
I am not getting how to overlap two views on the same window.
if i make six buttons and after that if i take another layout the background layout is hiden and it is not shown at all.

This thing i know is we need two views on one view i can display 6 buttons and on anthoer view i can display date. but how?

Thanks in advance

score 1 · Answer 1 · answered Mar 22 '11 at 11:26

The key here is FrameLayout. Children of a FrameLayout stack on top of each other vertically.

Something like

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <!-- The relative layout contains all of your buttons -->
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >

        <Button
            android:id="@+id/button1"
            android:text="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <Button
            android:id="@+id/button2"
            android:text="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/button1"
            />

        <Button
            android:id="@+id/button3"
            android:text="3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/button1"
            />

        <Button
            android:id="@+id/button4"
            android:text="4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/button2"
            android:layout_toRightOf="@id/button3"
            />

        <Button
            android:id="@+id/button5"
            android:text="5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/button3"
            />

        <Button
            android:id="@+id/button6"
            android:text="6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/button4"
            android:layout_toRightOf="@id/button5"
            />

    </RelativeLayout>

    <!-- Your overlay -->
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:id="@+id/overlayText"
            android:text="Overlay"
            />

    </RelativeLayout>

</FrameLayout>

You might want to use a few nested LinearLayouts (although try and avoid it) if you can't quite get the styling you want with a single RelativeLayout to align your buttons.

score 0 · Answer 2 · answered Mar 22 '11 at 11:25

0

From what I understand, you need to 'overlay' one view on top of another?

To do this you need to merge the views and make the top view transparent. Have a look at this article... Layout Tricks: Merging Layouts

answered Mar 22 '11 at 11:25

Squonk

48,735
19
103
135

score 0 · Accepted Answer · edited May 23 '17 at 10:32

check this layout it must help you to solve your problem

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <RelativeLayout
    android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <Button
   android:text="Hello"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_alignParentLeft="true"></Button>
  <Button
   android:text="Hello"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:layout_alignParentLeft="true"></Button>
   <Button
   android:text="Hello"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_alignParentLeft="true"></Button>
   <Button
   android:text="Hello"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_alignParentRight="true"></Button>
    <Button
   android:text="Hello"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:layout_alignParentRight="true"></Button>
    <Button
   android:text="Hello"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_alignParentRight="true"></Button>
  </RelativeLayout>
  <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"

        android:src="@drawable/icon"/>
  </FrameLayout>

to make image transparent see this

Android Layout obstacle

3 Answers3