I'm trying to put a small ImageView on top of a button, but somehow it stays under it. I don't understand why as this sort of layout work perfectly with other views.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now"
android:id="#+id/but_book_now"
/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I've tried with different background for the button, but the image can be seen only when it is transparent. I also tried to replace the ImageView with a colored View, still doesn't work.
Any idea? Thx
EDIT:
There is a confusion in answers I get, I mean to make the ImageView on top of the Button in its Z-order, not y-axis.
EDIT 2 :
I don't want to use an image button, the image is just a "pin" on the button that will appear/disappear.
I don't want to use a drawable on the button, I need to place it where I want exactly.
Using FrameLayout instead of RelativeLayout doesn't change anything.
Using imgView.bringToFront() doesn't work.
EDIT 3 :
The problem doesn't appear on device before Lollipop. On KitKat, the layout works as intended.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="80dp" >
<Button
android:id="#+id/filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#0000FF"
android:gravity="center"
android:paddingBottom="25dp"
android:paddingTop="25dp"
android:text="Sort"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:paddingTop="-10dp"
android:scaleType="fitStart"
android:src="#drawable/ic_launcher" />
</FrameLayout>
Try it,though I haven't tested it.
Try
findViewById(R.id.img_bookmark).bringToFront();
You need to set the button below the imageview so:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:layout_below="#+id/img_bookmark"/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
EDIT
I noticed now that you wanted an image ON TOP of a button not ABOVE so don't care to my code above and use ImageButton:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:src="#drawable/ic_action_bookmark_full"/>
</RelativeLayout>
Sample code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/img_bookmark"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/but_book_now"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/img_bookmark"
android:text="Test" />
</RelativeLayout>
Note :
Edit the text and src, for your needs
If you want image view with button :
<Button
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</RelativeLayout>
If you want image view without button :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</LinearLayout>
You can define a RelativeLayout as a Button and add ClickEvents on it, add a child View with color or a child ImageView with a PNG, or whatever or both, to put images or color over it.
Example
<FrameLayout android:id="#+id/buttonTextFillColor"
android:layout_width="#dimen/mini_icon_width"
android:layout_height="#dimen/mini_icon_height"
android:background="#drawable/input_button_background"
android:clickable="true">
<View
android:id="#+id/colorTextFillColor"
android:layout_width="23dp"
android:layout_height="23dp"
android:background="#FFFFFF"
android:layout_gravity="center" />
<ImageView
android:layout_width="23dp"
android:layout_height="23dp"
android:src="#drawable/button_fill_text"
android:layout_gravity="center"/>
</FrameLayout>
You get a union of elements:
How will you see it?
please add the layout_below for Button attribute
Related
I have a ScrollView
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".LoginActivity">
<RelativeLayout
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:focusableInTouchMode="true"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_margin="55dp"
android:src="#drawable/sss" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/helvetica_neue_cyr_roman"
android:padding="4dp"
android:text="#string/title_email"
android:textColor="#color/colorWhite"
android:textSize="14sp" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText"
app:hintEnabled="false"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#color/colorAccent">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="46dp"
android:backgroundTint="#color/colorWhite"
android:fontFamily="#font/helvetica_neue_cyr_medium"
android:hint="#string/hint_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/colorWhite"
android:textColorHint="#color/colorHint"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/helvetica_neue_cyr_roman"
android:padding="4dp"
android:text="#string/title_password"
android:textColor="#color/colorWhite"
android:textSize="14sp" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText"
app:hintEnabled="false"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#color/colorAccent">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorWhite"
android:fontFamily="#font/helvetica_neue_cyr_medium"
android:hint="#string/hint_password"
android:imeActionId="6"
android:imeActionLabel="#string/action_sign_in"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/colorWhite"
android:textColorHint="#color/colorHint"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/sign_in_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_shape"
android:fontFamily="#font/helvetica_neue_cyr_medium"
android:text="#string/action_sign_in"
android:textAllCaps="false"
android:textColor="#color/colorWhite"
android:textSize="16sp" />
</LinearLayout>
</RelativeLayout>
And i have some issues with showing what i exactly need.
This is how view looks by default
not scrollable
Clicking on email editText
scrollable
Password editText click
scrollable
And this is the screenshot i want the app to look like
By saying that i mean - i need my view to move upper to the same position if i click on editTexts. And after keyboard disappears i need view to come to default position.
I dont need to scroll view after keyboard is open.
I've been trying to make that happen with adding
android:windowSoftInputMode="adjustResize"
and
android:windowSoftInputMode="adjustPan"
to manifest
Is it even possible to make?
Thank you.
I believe with the correct layout configuration(maybe just a constrain layout instead of the scroll?), you can hide the logo with Visibility.GONE programmatically when one of the fields is clicked and bring the logo back when the field lose focus.
I just create simple grid view like this
all I need as you see the texts with long name I want it to complete the text in a new line not going to the other relative layout as I need also the relative layout with id/rlTXTnme with a green color but with transparent green color for example thats the image view in the parent relative layout should be showed like this grid item Example
and this is my XML File
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:background="#ffffff"
android:layout_height="125dp"
android:layout_width="125dp"
tools:layout_conversion_absoluteX="5dp"
tools:layout_conversion_absoluteY="5dp"
tools:layout_conversion_absoluteWidth="170dp"
tools:layout_conversion_absoluteHeight="170dp"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ssttll"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="65dp"
android:layout_alignParentBottom="true"
android:background="#dcffbc"
android:id="#+id/rlTXTnme"
android:layout_toStartOf="#+id/relativeLayout">
</RelativeLayout>
<RelativeLayout
android:layout_width="35dp"
android:layout_height="75dp"
android:background="#f9762f"
android:id="#+id/relativeLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_below="#+id/button">
</RelativeLayout>
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25dp"
android:text="0"
android:textColor="#ffffff"
android:textStyle="bold"
android:layout_marginTop="15dp"
android:layout_below="#+id/button"
android:layout_alignStart="#+id/relativeLayout" />
<Button
android:id="#+id/button"
android:layout_width="50dp"
android:background="#ff2f2f"
android:layout_height="75dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:text="-"
android:layout_alignStart="#+id/relativeLayout"
android:layout_above="#+id/rlTXTnme" />
</RelativeLayout>
<TextView
android:id="#+id/menuTVGrid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="TextView"
android:textColor="#000000"
android:textSize="10dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.601" />
</android.support.constraint.ConstraintLayout>
Sorry for my bad Englishand sorry if any thing is unclear
You can use a linearLayout and set weights to the layouts.
And for the transparency of the background, android accepts colors in AARRGGBB format where AA is the percent value of transparency needed. A good doc for percent-to-hex conversion can be found on this SO post.
Posting the edited layout in sometime
For transparency: if for 20% transparency:
android:background="#33dcffbc"
I am stuck in an issue. I'm a junior android developer. I want to change the height of my custom action bar on a click event. But I'm not able to find a way
how to change actionbar's height. I saw other related posts, but didnt find exactly what I need.
I want to toggle a hidden layout part of action bar, upon click event. The height of action should fit to the content size each time.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/header_bg"
android:orientation="horizontal"
android:padding="5dp"
android:visibility="visible"
android:weightSum="5" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2.69"
android:src="#drawable/header_image" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:contentDescription="Seperator"
android:src="#drawable/header_seperator" />
<ImageView
android:id="#+id/iv_show_searchbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:contentDescription="search"
android:src="#drawable/header_search" />
<ImageView
android:id="#+id/iv_hidesearchbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:contentDescription="search"
android:src="#drawable/header_search_active"
android:visibility="gone" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:contentDescription="Seperator"
android:src="#drawable/header_seperator" />
<ImageView
android:id="#+id/iv_header_navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.6"
android:contentDescription="navigation"
android:src="#drawable/header_navigation" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="57dp"
android:background="#F0F0F0"
android:orientation="horizontal"
android:padding="4dp"
android:weightSum="5"
android:visibility="gone" >
<EditText
android:id="#+id/editText1"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginRight="10dp"
android:layout_weight="3"
android:background="#drawable/fields"
android:ems="10"
android:hint="Keyword"
android:padding="15dp"
android:textSize="20sp" >
<requestFocus />
</EditText>
<Spinner
android:id="#+id/spinner1"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="2.0"
android:background="#drawable/header_language"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</LinearLayout>
</LinearLayout>
On a click event, i want to toggle the second inner linear layout. Is It possible? or should i use fragments in activity?
If what you mean is that you want make the 2nd LinearLayout (the one that has visibility:"gone") be visible on a click event. You have first to set an id for that layout and do something like this:
LinearLayout yourLinearLayout =(LinearLayout)findViewById(R.id.yourLinearLayoutId);
and inside your click event
yourLinearLayout.setVisibility(View.Visible);
that will make your layout appear and because the father has layout_height="wrap_content" it will fit to the size of the child when it is visible.
Please have a look at the following code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#373734"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backToLanguageSelectionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:paddingTop="5dp"
android:src="#drawable/thunderbolt" />
<ImageView
android:id="#+id/internetButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/globe_small_2" />
<Button
android:id="#+id/giveUpButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="350dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="Button" />
</LinearLayout>
This is a common layout code which I am using for all the android activities. The problem is the button, I want it to move to the most right corner. Margin thing not seems to work properly because in different devices the button is in different places.
How can I move this to the most right corner which will be displayed same in all the devices?
I believe you could add a view between your second ImageView and your button, and set it to layout_width="0dp", layout_weight="1".
And remove the left margin of your button.
User Relative layout instead. And apply android:layout_alignParentRight="true" to your Button.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#373734"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backToLanguageSelectionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:paddingTop="5dp"
android:src="#drawable/social_share" />
<ImageView
android:id="#+id/internetButton"
android:layout_toRightOf="#+id/backToLanguageSelectionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/social_share" />
<Button
android:id="#+id/giveUpButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="Button" />
have you tried android:layout_gravity="right"?
Use RelativeLayout and set its height to be as small as you want. This way a small part of your screen will be filled. When you use RelativeLayout, you can use android:layout_alignParentRight="true" to put any item at right. Now, instead of button, you can use image and set its android:scaleType="centerInside" if there are problems with the buttons scaling.
I was having the same problem as you and I sove it using RelativeLayout.
It can be done with RelativeLayout
<Button
android:id="#+id/giveUpButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="350dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="Button"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true" />
I want to have a picture all at the bottom of one of the screens of my app, I finally achieved this, but eclipse automatically adds a bar on the top and at the bottom of my picture. I don't want this to be, could you please help?
If you need any more information from me, please say :P.
Edit: activity_main.xml:
`
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/metro" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_toLeftOf="#+id/imageButton1"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/syllabus" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton1"
android:layout_toRightOf="#+id/imageButton1"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/bus" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:height="20dp"
android:textColor="#FFFFFF"
android:width="175dp" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_toLeftOf="#+id/imageButton3"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/supermarkt" />
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton2"
android:layout_below="#+id/imageButton2"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/restaurants" />
<ImageButton
android:id="#+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton4"
android:layout_toRightOf="#+id/imageButton4"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/geldautomaat" />
<ImageButton
android:id="#+id/imageButton7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton4"
android:layout_toLeftOf="#+id/imageButton6"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/kaartrome" />
<ImageButton
android:id="#+id/imageButton8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton6"
android:layout_alignTop="#+id/imageButton7"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/italiaans" />
<ImageButton
android:id="#+id/imageButton9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton7"
android:layout_toLeftOf="#+id/imageButton7"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/telefoon" />
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageView
android:id="#+id/Skyline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/skyline" />
</RelativeLayout>
`
It's hard to say what's happening if you don't have your relevant code posted.
If you're using an ImageView and writing your layout in XML the code should look something like this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical" >
...other views for the screen...
<ImageView
android:layout_width="match_parent"
android:layout_heigth="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/some_img" />
</LinearLayout>
Assuming you're using a LinearLayout with vertical orientation, this should add your image to the layout, make it exactly the width of it's parent (the screen if it's parent is the root layout), and scale the length appropriately. The gravity makes the picture drop to the bottom of the layout (unless something is laid out under it).
There should be no bars at all.
EDIT: Code is now posted.
You should have all the views in your XML part of a root view, like the RelativeLayout that your image at the bottom is in. If you move the head of the relative layout to the top of the XML and add the xmlns:android="http://schemas.android.com/apk/res/android" to it, the image should do exactly what you want. The header should look like this and be at the top of the XML file.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/InnerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
Have you gone through the android developer tutorials? They are extremely helpful.