Full screen background image in an activity

I see many applications that use a full-screen image as background. This is an example:

I want to use this in a project, the best way I've found so far to do this is to use an image with a large size, put it in a ImageView and use android: adjustViewBounds="true" to adjust the margins

The problem is that if a screen with a very high resolution, the image falls short.

Another option I thought of is to use the image in a FrameLayout, with match_parent in width and height as background... this stretches the image, but I think the result is not very good.

How would you do it?

stinepike

There are several ways you can do it.

Option 1:

Create different perfect images for different dpi and place them in related drawable folder. Then set

android:background="@drawable/your_image

Option 2:

Add a single large image. Use FrameLayout. As a first child add an ImageView. Set the following in your ImageView.

android:src="@drawable/your_image"
android:scaleType = "centerCrop"

Another option is to add a single image (not necessarily big) in the drawables (let's name it backgroung.jpg), create an ImageView iv_background at the root of your xml without a "src" attribute. Then in the onCreate method of the corresponding activity:

    /* create a full screen window */
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.your_activity);

    /* adapt the image to the size of the display */
    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    Bitmap bmp = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(
      getResources(),R.drawable.background),size.x,size.y,true);

    /* fill the background ImageView with the resized image */
    ImageView iv_background = (ImageView) findViewById(R.id.iv_background);
    iv_background.setImageBitmap(bmp);

No cropping, no many different sized images. Hope it helps!

Munish Kapoor

You should put the various size images into the followings folder

for more detail visit this link

ldpi
mdpi
hdpi
xhdpi
xxhdpi

and use RelativeLayout or LinearLayout background instead of using ImageView as follwoing example

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 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/your_image">

</RelativeLayout>

What about

android:background="@drawable/your_image"

on the main layout of your activity?

This way you can also have different images for different screen densities by placing them in the appropriate res/drawable-**dpi folders.

Syed

use this

android:background="@drawable/your_image

in your activity very first linear or relative layout.

If you want your image to show BEHIND a transparent Action Bar, put the following into your Theme's style definition:

<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>

Enjoy!

It's been a while since this was posted, but this helped me.

You can use nested layouts. Start with a RelativeLayout, and place your ImageView in that.

Set height and width to match_parent to fill the screen.

Set scaleType="centreCrop" so the image fits the screen and doesn't stretch.

Then you can put in any other layouts as you normally would, like the LinearLayout below.

You can use android:alpha to set the transparency of the image.

<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">

  <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/image"
    android:alpha="0.6"/>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"/>

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="There"/>

   </LinearLayout>
</RelativeLayout>

In lines with the answer of NoToast, you would need to have multiple versions of "your_image" in your res/drawable-ldpi,mdpi, hdpi, x-hdpi (for xtra large screens), remove match_parent and keep android: adjustViewBounds="true"

Add android:background="@drawable/your_image" inside your Relativelayout/Linearlayout Worked.

If you have bg.png as your background image then simply:

<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/bg"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"/>
</RelativeLayout>

Working. you should tryout this: