Full screen background image in an activity

Question

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

Full screen background image

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?

Don't believe this works on backgrounds, but it should work on images. `android:scaleType="centerCrop"` — EGHDK, Apr 21 '13 at 20:59
Related post - [Android splash screen image sizes to fit all devices](https://stackoverflow.com/q/10574363/465053) — RBT, Dec 30 '19 at 04:55

score 243 · Accepted Answer · edited Jan 04 '20 at 02:14

243

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"

edited Jan 04 '20 at 02:14

RBT

24,161
21
159
240

answered Apr 22 '13 at 03:39

stinepike

54,068
14
92
112

2

where do you store 'your_image'? – Arturo May 18 '14 at 13:20
5

In the res->drawable folders. There may be multiple - each stand for a different resolution (ex. low resolution/high resolution). If you don't have specific images for each resolution, any one will work. – krodmannix May 27 '14 at 23:52
5

The answer is good. But i wonder if someone found the typical phone sizes for each dpi group, which would be quite useful when preparing images. Edited: found - http://stackoverflow.com/questions/10574363/android-splash-screen-image-sizes-to-fit-all-devices/15744389#15744389 – fox Jun 19 '14 at 13:15
9

last option -> out of memory :D – Björn Ternes Jul 15 '14 at 17:15
Wouldn't mixing option 1 and 2 be the best option? – Lay González Oct 14 '14 at 15:46
1

OOM error here we come...if its a large image your going to need to scale up or down depending on screen size! in this case you will need to most likely load a bitmap via asynchronous task. – auracool Oct 30 '14 at 11:57
Best option is option #2. Use an image of 600x730 (width is important), scales very well on different devices. If you can use png's, use it and optimize it with tinypng.com. The image I made has a black background so use black as blackground color. You can use this 'trick' with any color ofcourse. – Codebeat Jun 14 '15 at 10:06
Forgot to mention: Don't use scaling! It can be very ugly when the image is upscaling (beter is downscaling). Use android:layout_gravity="center" instead of android:scaleType = "centerCrop" (<- this cause upscaling and image doesn't look that pretty and aligned). – Codebeat Jun 14 '15 at 10:17
Should we put the images in the different mitmap folders for option 2? Because mitmap isn't drawable – Ruchir Baronia Nov 11 '15 at 18:44
which one is better? – Pulah Nandha Apr 23 '16 at 13:37
1

I'm using Android Studio 3.4, android:src="@drawable/your_image" is not working in my case so I'm using android:background="@drawable/your_image" instead. – Silambarasan R Apr 26 '19 at 13:49

score 26 · Answer 2 · answered Aug 09 '14 at 13:43

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!

This is a useful solution, but remember to do bitmap processing off of the main thread: http://developer.android.com/training/displaying-bitmaps/process-bitmap.html — Kyle Ivey, Sep 22 '14 at 21:47

score 19 · Answer 3 · edited Jun 13 '15 at 18:06

19

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>

edited Jun 13 '15 at 18:06

natario

24,954
17
88
158

answered Apr 22 '13 at 06:16

Munish Kapoor

3,141
2
26
41

I'm getting an error that `Unexpected namespace prefix "xmlns" found for tag RelativeLayout` – CodyBugstein Jun 18 '14 at 11:59
This makes my Fragment so laggy. Can't figure out why. – Sermilion Sep 05 '16 at 09:20
use cache or load image with picasso( http://square.github.io/picasso/) hope will solve your problem – Munish Kapoor Sep 06 '16 at 01:14

smurph · Answer 4 · 2017-07-01T17:22:12.313

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>

score 7 · Answer 5 · answered Apr 21 '13 at 20:54

7

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.

answered Apr 21 '13 at 20:54

NoToast

98
5
15

score 7 · Answer 6 · edited Jan 04 '20 at 02:18

7

use this

android:background="@drawable/your_image"

in your activity very first linear or relative layout.

edited Jan 04 '20 at 02:18

RBT

24,161
21
159
240

answered Nov 12 '14 at 13:46

Syed

99
1
4

score 7 · Answer 7 · edited Nov 13 '19 at 08:48

7

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

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

Enjoy!

edited Nov 13 '19 at 08:48

Mimouni

3,564
3
28
37

answered Sep 01 '16 at 10:45

Jens

71
1
4

score 2 · Answer 8 · answered Apr 22 '13 at 04:29

2

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"

answered Apr 22 '13 at 04:29

sb_269

553
2
7
22

score 1 · Answer 9 · answered May 01 '17 at 13:19

1

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

answered May 01 '17 at 13:19

Mwongera808

880
11
16

score 0 · Answer 10 · answered Jan 03 '15 at 17:54

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>

score -1 · Answer 11 · answered Oct 15 '16 at 04:53

-1

Working. you should tryout this:

android:src="@drawable/img"

answered Oct 15 '16 at 04:53

mohammad vakili · Answer 12 · 2018-08-10T11:43:47.870

-1

three step for put background

1)you should choose your like picture. for example :enter image description here

2)Then you copy this picture in drawable. warning: you should choose types short for name picture.

enter image description here

3)you go to page xml Intended and write :

android:background="id picture" for example my picture id is @drawable/download.

enter image description here

finish.

edited Aug 10 '18 at 11:43

answered Aug 09 '18 at 13:23

mohammad vakili

11
1

score -2 · Answer 13 · answered Jun 22 '18 at 18:05

The easiest way:

Step 1: Open AndroidManifest.xml file

You can see the file here!

Step 2: Locate android:theme="@style/AppTheme" >

Step 3: Change to android:theme="@style/Theme.AppCompat.NoActionBar" >

Step 4: Then Add ImageView & Image

Step 4: That's it!

Full screen background image in an activity

13 Answers13

Linked