Full Screen Background Image in an Activity

Full screen background image in an activity

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"

Android Studio Fullscreen Background Image with android:background

Any images other than icons should not be placed in the mipmap folder.

According to the official Android blog:

It’s best practice to place your app icons in mipmap- folders (not the
drawable- folders) because they are used at resolutions different from
the device’s current density. - (source)

You will need to move background.png to the relevant drawable folder.

How to have a Fullscreen Background Image (with center-crop) that doesn't Resize

try this LayerDrawable (res/drawable/backlayer.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
    <item>
        <shape>
        <solid android:color="#f00" />
        </shape>
    </item>
<item>
        <bitmap
        android:gravity="top" android:src="@drawable/back1">
        </bitmap>
    </item>
</layer-list>

and set it to your top level layout: android:background="@drawable/backlayer"

UPDATE: try this BitmapDrawadle, set it to top level layout (setBackgroundDrawable()), if simpleMapping == true is good enough you can remove "else" branch:

class D extends BitmapDrawable {
    private Matrix mMatrix = new Matrix();
    private int moldHeight;

    public D(Resources res, Bitmap bitmap) {
        super(res, bitmap);
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        if (bounds.height() > moldHeight) {
            moldHeight = bounds.height();
            Bitmap b = getBitmap();
            RectF src = new RectF(0, 0, b.getWidth(), b.getHeight());
            RectF dst;

            // if simpleMapping is good enough then remove "else" branch and
            // declare "dst" as:
            // RectF dst = new RectF(bounds);
            boolean simpleMapping = true;
            if (simpleMapping) {
                dst = new RectF(bounds);
            } else {
                float x = bounds.exactCenterX();
                dst = new RectF(x, 0, x, bounds.height());
                float scale = bounds.height() / src.height();
                float dx = scale * src.width() / 2;
                dst.inset(-dx, 0);
            }
            mMatrix.setRectToRect(src, dst, ScaleToFit.CENTER);
        }
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawColor(0xaa00ff00);
        canvas.drawBitmap(getBitmap(), mMatrix, null);
    }
}

What's the best way to add a full screen background image in React Native

You can use flex: 1 styling on an <Image> element to have it fill the whole screen. You can then use one of the Image resize modes to have the image completely fill the element:

<Image source={require('image!egg')} style={styles.backgroundImage} />

Style:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

I'm pretty sure you can get rid of the <View> wrapping your image and this will work.

Fill an image to full screen keeping the aspect ratio

I've had a similar issue, the solution is to make CoordinatorLayout the root layout, and then inside of it add your former layout root.

Also, removing this part in Style v21 might help too:

<item name="android:statusBarColor">@android:color/transparent</item>

Android background Image to fill screen

Add a scale type to your imageview. There are several types. The one you need is

android:scaleType="center"

This page will help explain all the different types.

Android - Making activity full screen with status bar on top of it

I know that the guy asking the question may have found his own solution but for the people who are still looking for a solution this is a very simple solution but one thing it has a limitation till Kitkat so a condition is added

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

    getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                      WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

---

Related Topics