(Android Studio) App Background Image Doesn't Fill Screen

Question

I'm new to app programming and require some assistance. I am building a simple app on Android Studio, but my app's background image (I named it "green_background") doesn't entirely fill the screen. I can't provide a screenshot because I don't have 10 reputation on Stack Overflow.

Here is my app's activity coding. I have only added 1 piece of text, 2 buttons, 2 chronometers and 1 image view:

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/imageView"
    android:layout_alignRight="@+id/button2"
    android:layout_alignEnd="@+id/button2"
    android:contentDescription="@string/background_1"
    android:layout_alignParentEnd="@+id/button"
    android:layout_alignParentRight="@+id/button"
    android:background="@drawable/green_background"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />



<TextView
    android:text="@string/revision"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="60sp"
    android:id="@+id/textView"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

<Button
    android:layout_width="150dp"
    android:layout_height="80dp"
    android:text="@string/button_work"
    android:id="@+id/button"
    android:textSize="30sp"
    android:clickable="true"
    android:textColor="#ffe7e7e7"
    android:background="#d1131110"
    android:layout_alignTop="@+id/button2"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<Button
    android:layout_width="150dp"
    android:layout_height="80dp"
    android:text="@string/button_break"
    android:id="@+id/button2"
    android:textSize="30sp"
    android:clickable="true"
    android:textColor="#ffe7e7e7"
    android:background="#d1131110"
    android:layout_below="@+id/textView"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginTop="59dp" />

<Chronometer
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/chronometer"
    android:textSize="50sp"
    android:layout_below="@+id/button"
    android:layout_alignLeft="@+id/button"
    android:layout_alignStart="@+id/button"
    android:layout_marginTop="180dp" />

<Chronometer
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/chronometer2"
    android:textSize="50sp"
    android:layout_alignTop="@+id/chronometer"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

How do I make my background image (green_background) completely fill the phone screen?

make one layout and inside layout you can put all this code and for the layout give width fill parent, height also give fill parent and give background for that layout as (green_background). — Hanuman, Apr 26 '15 at 11:05
I did what you suggested, but the app fails to render because it "failed to convert green_background into a drawable because "green_background" is an empty body. Do you know how I fix this? Here is what I changed, as I thought you suggested: — Tom James, Apr 26 '15 at 11:13
green_background is not as an image, what is green_background?where you are getting this one? what is "grass_background" — Hanuman, Apr 26 '15 at 11:14
My apologies, I had been changing the size of "green_background" to see if it made a difference. During this, I changed the "green_background"'s name to "grass_background" so I could differentiate them, but I didn't consider it impacting you. Please consider "green_background" and "grass_background" the same thing during my question. green_background is in my "drawable" folder in "res". It's file type is a png. — Tom James, Apr 26 '15 at 11:21
is frame layout is the parent or child if it is parent it will work otherwise remove padding or margin of parent layout try it — Hanuman, Apr 26 '15 at 11:24

nvinayshetty · Accepted Answer · 2015-04-26T11:31:08.157

I think It's happening because of the padding present in the Top level container..that is relative layout in your case If your Relative Layout looks like the below code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" >

or some thing very similar to that, remove these 4 lines of code

android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"

Which applies some padding to your layout so the background is not completely visible.

If the only use of that image View is to show the background..here is the simpler and preferred way of giving background to your layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/green_background"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:text="revision"
    android:textSize="60sp" />

<Button
    android:id="@+id/button"
    android:layout_width="150dp"
    android:layout_height="80dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignTop="@+id/button2"
    android:background="#d1131110"
    android:clickable="true"
    android:text="button_work"
    android:textColor="#ffe7e7e7"
    android:textSize="30sp" />

<Button
    android:id="@+id/button2"
    android:layout_width="150dp"
    android:layout_height="80dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/textView"
    android:layout_marginTop="59dp"
    android:background="#d1131110"
    android:clickable="true"
    android:text="button_break"
    android:textColor="#ffe7e7e7"
    android:textSize="30sp" />

<Chronometer
    android:id="@+id/chronometer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/button"
    android:layout_alignStart="@+id/button"
    android:layout_below="@+id/button"
    android:layout_marginTop="180dp"
    android:textSize="50sp" />

<Chronometer
    android:id="@+id/chronometer2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/chronometer"
    android:textSize="50sp" />

Note that the image view is removed and background for the entire layout is applied by the single line of code android:background="@drawable/green_background" in the relative layout

This fixed my issue, my background image now fills the screen. Thank you! Although my app will be very basic, do you think this code removal will effect other features? — Tom James, Apr 26 '15 at 11:29
Thanks for your edit, I will use the preferred method. I really appreciate your time. — Tom James, Apr 26 '15 at 11:36
That only adds padding to the layout..so removal of that won't effect other features unless you particularly want the padding in your layout..please check the updated code — nvinayshetty, Apr 26 '15 at 11:36

(Android Studio) App Background Image Doesn't Fill Screen

1 Answers1