Layers in Android Layout

Question

I have a screen with a background image and two buttons at the bottom. I am using code similar to this:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical">
    <LinearLayout android:layout_width="wrap_content"
        android:layout_height="0dip" android:layout_weight="1"
        android:orientation="vertical" android:background="@drawable/mainbg">

    </LinearLayout>

        <ImageButton android:layout_height="wrap_content"
        android:background="#FF000000" android:src="@drawable/button1"
        android:padding="5dp"
        android:id="@+id/ImageButton1" android:layout_width="fill_parent">
    </ImageButton>

    <ImageButton android:src="@drawable/button2" android:background="#FF000000" android:id="@+id/ImageButton2"
        android:layout_width="fill_parent" android:focusable="true" android:saveEnabled="false" android:layout_height="wrap_content">
    </ImageButton>

    <TextView android:text="mywebsite.com" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>

In this code, the background screen is smashed up to fit in the remaining screen space not used by the bottons. in other words, the two button consume 20% of screen space, then the image is smashed into the remaing 80%.

My Question: Is there a way to make some kind of layering effect so that my buttons are on a layer above the background image?

Check your main container i.e your main layout is that which is containing your namespace "xmlns" tag and contains all your views inside it, so better to set background inside this layout to get full screen background of your drawable image. — Manish Sharma, Sep 26 '14 at 09:57

score 1 · Answer 1 · answered Oct 31 '11 at 16:13

I'm not positive I am understanding your question. But it seems that the image, "manbg" is a sibling of the buttons. If you want it to be the background of the entire view, you should make that image be the drawable of the PARENT linear layout.

I think this will do what you want:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical" android:background="@drawable/mainbg">


        <ImageButton android:layout_height="wrap_content"
        android:background="#FF000000" android:src="@drawable/button1"
        android:padding="5dp"
        android:id="@+id/ImageButton1" android:layout_width="fill_parent">
    </ImageButton>

    <ImageButton android:src="@drawable/button2" android:background="#FF000000" android:id="@+id/ImageButton2"
        android:layout_width="fill_parent" android:focusable="true" android:saveEnabled="false" android:layout_height="wrap_content">
    </ImageButton>

    <TextView android:text="mywebsite.com" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>

btw, how are you designing your UI. Netbeans has a really slick UI GUI. it would make these sorts of problems trivial.

hope this helps.

I will try Netbeans. I have some really nice apps. But my UI's need help! Is this free software? — Stephen McClendon, Oct 31 '11 at 16:16
yes it is free. I believe you will have a bit of configuring to do to make it all work with android sdk. but I remember it not being too hard. good luck. http://netbeans.org/features/java/swing.html — b3bop, Oct 31 '11 at 18:33

score 1 · Answer 2 · edited Mar 06 '17 at 16:18

Take a RelativeLayout and set the background using android:background.

Now to put buttons at bottom part, take a LinearLayout and take 2 image buttons inside the same. Mention android:width="0dp" and android:layout_weight="1dp" to both the buttons.

Exact XML layout that you want:

<RelativeLayout 
    android:id="@+id/scrollView1" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/round_red">

    <LinearLayout 
        android:id="@+id/layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

           <ImageButton
            android:id="@+id/button1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:src="@drawable/icon"
            android:layout_weight="1">
           </ImageButton>

            <ImageButton
            android:id="@+id/button2"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:src="@drawable/icon"
            android:layout_weight="1">
           </ImageButton>
    </LinearLayout>

</RelativeLayout>

Update:

Why I suggest to use RelativeLayout? I suggest to you to use RelativeLayout as you can adjust and display the views based on the Relative position of the parent/child views. If you are confident enough then you don't have to take more sub-layout while designing UI in android using RelativeLayout.

score 1 · Accepted Answer · edited Oct 06 '16 at 14:28

maybe <RelativeLayout/> will be better than <LinearLayout/> for your design

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:background="@drawable/mainbg" >

        <ImageButton
            android:id="@+id/ImageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button1"
            android:layout_above="@id/ImageButton2"
            android:layout_centerHorizontal="true" >
        </ImageButton>

        <ImageButton
            android:id="@+id/ImageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button2"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="10dp"
            android:layout_centerHorizontal="true" >
        </ImageButton>

    </RelativeLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="mywebsite.com" >
    </TextView>

</LinearLayout>

score 0 · Answer 4 · edited Aug 28 '19 at 08:52

0

This is i think pretty simple. you can set the background image of the parent Layout which is main layout. so the main layout is having the background image and other has nothing.

android:layout_height="0dip"

so this will occupy the height only of image height. so you need to work on this also.

edited Aug 28 '19 at 08:52

mate00

2,727
5
26
34

answered Oct 31 '11 at 16:11

Dinesh Prajapati

9,274
5
30
47

I think I tried that. If I put the image in the background, my buttons move to the top of the screen. – Stephen McClendon Oct 31 '11 at 16:17

Layers in Android Layout

4 Answers4

Update: