How to keep background image size when software keyboard show

Question

When the software keyboard shows, it resizes my layout and thus squeezes the background image together. My question is basically a duplicate of this question, which is explained in a very good way:

Software keyboard resizes background image on Android

However, that question was closed when they found a hack to solve it. I cannot use this hack. My entire layout is inside a ScrollView, and I need to be able to use this scrollview properly at all times. By using android:windowSoftInputMode="stateVisible|adjustPan" the user will not be able to scroll down and see the bottom of the screen while the keyboard is showing, since the layout will partly exist behind the keyboard. Thus the solution is unacceptable to me. Are there any better solutions out there?

Cheers,

score 32 · Answer 1 · edited Sep 14 '12 at 17:31

32

I actually ran into a similar problem not too long ago. I stumbled upon the correct answer with a bit of work, though.

In your android manifest for this project, attached to the specific activity that you are using, use the line android:windowSoftInputMode="adjustPan|stateVisible" in the activity tag.

adjustPan basically means that your activity will not resize itself to fit the soft keyboard, and stateVisible means that the soft keyboard will show when requested (this can be stateAlwaysVisible, etc if necessary)

source : Android Dev for Activity tags

edited Sep 14 '12 at 17:31

Jeremy

3,620
9
43
75

answered Oct 03 '11 at 21:42

syklon

187
6
9

8

This doesn't solve the OP's problem. He specifically mentions this solution doesn't work for his case because he needs the bottom of his `scrollview` visible/reachable. Imagine trying to type a long message without being able to see what you're typing after a few lines. With this solution since the activity won't resize itself you will be missing the last few lines as they are hidden behind the keyboard. – Tony Chan Feb 23 '12 at 20:15

score 28 · Accepted Answer · answered May 20 '11 at 14:54

After days of hardcore hacking I finally managed to construct a solution so advanced it might actually hurt to read it. I place an ImageView with the background behind the scrollview, and set scaleType="matrix" so it does not shrink when the keyboard is shown.

<?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:background="@color/black"
    >
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/mah_kewl_background"
        android:scaleType="matrix"
        />
    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true"
        >
        <RelativeLayout
            android:id="@+id/smsLayout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="PLUNX"
                />
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

We can't put matrix as a scale type, it affects the image scaling property whereas in my case I need fitCenter. — Ready Android, Jun 22 '17 at 12:01

score 23 · Answer 3 · answered Aug 12 '13 at 15:46

23

You can use the windowBackground property, which makes the drawable fit the whole screen. To do that you need to:

1- Create a style:

<style name="Background" parent="@android:style/Theme.NoTitleBar">
    <item name="android:windowBackground">@drawable/you_bg_drawable</item>
</style>

2- Set your activity style in the AndroidManifest.xml

<activity
    android:name=".ui.your_activity"
    android:theme="@style/Background"/>

answered Aug 12 '13 at 15:46

aglour

924
8
15

2

Looks like the finest solution, thank you. It works for me just fine. – ernazm Jun 24 '14 at 15:18
This one really worked for me without any side effects. Thanks! – myforums Nov 10 '14 at 22:32
After a day of searching I applied your solution and it works fine. A little notice: change parent="@android:style/Theme.NoTitleBar" to "AppTheme" or another one written in your styles.xml file. In other case an exception occurs. – CoolMind Aug 14 '15 at 08:35
sorry my ignorance but, where did I put this background image, or how do I link it, I'm using cordova and I'm not sure if it is a trivial situation if you develop native. – Luiz Rossi Dec 04 '19 at 21:07

score 8 · Answer 4 · answered Mar 27 '14 at 14:57

I was googling for a solution to this exact problem when I came across this, and after doing some research I found a solution I think is slightly better. Instead of hacking with a ImageView you can use this from your activity:

      getWindow().setBackgroundDrawableResource(R.drawable.bg_my_background);

Hope it helps anyone else searching for a solution for this.

score 7 · Answer 5 · edited Sep 18 '17 at 13:24

Maybe there's another (really simple!) solution: In styles.xml: create a new style like this:

<style name="Yourstyle" parent="AppBaseTheme">
    <item name="android:windowBackground">@drawable/mybackground</item>
</style>

AppBaseTheme is your normally used theme for your app. Then you add in Manifest.xml:

<activity 
    android:name="com.your.app.name.Activity"
    android:theme="@style/Yourstyle">
</activity>

So you have the same style but with a background.

Important: don't set any backgrounds in your normal .xml file!

It's my first post and I hope it helps and sorry for my English.

So, your first post is very helpful. – CoolMind Aug 14 '15 at 08:39 — CoolMind, Aug 14 '15 at 08:39

score 7 · Answer 6 · answered Jun 24 '11 at 02:10

I can't comment on your answer but I'd like to add something.

I understand your dilemma and why the solution you linked to isn't a complete solution for your situation (since you can't scroll to the bottom of the view). I have a similar situation with a large scrollable EditText box. When the soft keyboard pops up I don't like my background getting squished.

I have tried your solution and while at first glance it appears to work, there are some situations where it might not be ideal:

If you allow your app the have a landscape mode, the background will not resize/stretch
If you run your app on a device with a larger screen or dpi, your background may not fill the screen

Basically it seems that when you set the scaleType to matrix you're telling Android to draw the background 1:1 and not to scale. So what's happening when you open the soft keyboard using your solution is, your scrollView and imageView are all getting resized as usual, but the image src you set remains 1:1 thus continues showing the same area.

So if for example your background image was set to a specific size (e.g. 480 x 800) and it perfectly fills your Nexus One, the moment you rotate to landscape you will have a black area along the right.

This is moot, of course, if your background is simply a repeating pattern, in which case you can make it extremely large and hopefully compensate for various screens (maybe even tablets).

Or you can also supply different backgrounds for different screen sizes/densities/orientations, but this still doesn't account for scaling.

In a vain effort to try and solve this, I stumbled upon a View attribute called android:isScrollContainer. This attribute tells certain views whether or not they are allowed to resize upon display of the soft keyboard. This is also mentioned by someone in your linked solution. I have tried setting this (to false) on the ViewGroup containing my background, but any child element that scrolls seems override it causing the squishing again.

As of right now I don't think there is a complete solution for our situation. Your's definitely works in some instances and I thank you for the effort. Hopefully Google will offer a solution in the future, but I don't think they would consider this a problem/priority.

score 6 · Answer 7 · answered Dec 17 '11 at 02:25

6

in Androidmanifest in activity tag use:

<activity ... android:windowSoftInputMode="adjustPan" ></activity>

check Android Developer reference

answered Dec 17 '11 at 02:25

xhandros

69
1
1

score 1 · Answer 8 · answered Mar 31 '14 at 06:23

1

How about a solution where the 'background' is a Layout. Can we inflate a layout, make it the entire window size, then insert it as a window background?

answered Mar 31 '14 at 06:23

James Barwick

438
3
8

score 0 · Answer 9 · edited Dec 17 '14 at 18:51

0

After a lot of time searching...

Put android:windowSoftInputMode="adjustPan|stateVisible" in each Activitys

edited Dec 17 '14 at 18:51

julienc

19,087
17
82
82

answered Dec 17 '14 at 18:34

Erick Alves

9
2

if you have edittext bottom padding, adjustpan remove this padding – famfamfam May 17 '21 at 15:57

How to keep background image size when software keyboard show

9 Answers9

Linked

Related