(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?

Answer 1

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