StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to use different background images for different resolutions in Android?
text
Body
copied!<p>I'm doing an Android App for Android <strong>tablets</strong> that has a <strong>full image background</strong> but <strong>I can't use a 9-patch</strong>, so I need the background to be as close as posible as the window size.</p> <h2>What I have tested:</h2> <p>I've tested using the <code>drawable-ldpi</code>, <code>drawable-mdpi</code>, etc... folders but as I want the images to fit the window, it doesn't work that well. </p> <p>Now I'm trying with the <code>drawable-wxxxdp</code>, folders to have images with sizes that are <em>close</em> to the real window size. </p> <p>So I have this folder structure (each folder with a different image, i.e: images of same size are different on different folders):</p> <pre><code>drawable-w800dp-mdpi // 800x600px image drawable-w800dp-hdpi // 800x600px image drawable-w1024dp-mdpi // 1024x600px image drawable-w1024dp-hdpi // 1024x600px image drawable-w1280dp-mdpi // 1280x800 image drawable-w1280dp-hdpi // 1280x800 image drawable-w1280dp-xhdpi // 1280x800 image </code></pre> <p>The <strong>problem</strong> is that when I test the App on different tablets <strong>it doesn't always take the image from the expected folder</strong>.</p> <p>For instance: in a <strong>1280x800px and 160 dpis tablet</strong>, that reports (using <code>DisplayMetrics</code>) a <strong>window size of 1280x752</strong>, it uses the 1280x800px image from the <code>drawable-w1280dp-mdpi</code> folder and cuts a bit of the image from the top and the bottom. But on a <strong>1280x800px and 213dpis tablet</strong> that reports a <strong>window size of 1280x736</strong> it takes the image from the <code>drawable-w800dp-hdpi</code>... I would expect to take it from other folder like one of the drawable-w1024dp folders... but not from that one...</p> <p>On the other hand if I try on the emulator with a configuration like <strong>1024x600px and 160dpis</strong> that reports a <strong>window size of 1024x552</strong> it gets the image from the <code>drawable-w1024dp-hdpi</code> folder but it <strong>scales it down and centres it on the screen</strong> so I end with very <em>big border all around the image</em>.</p> <h2>Files:</h2> <p>The testing layout I'm using is:</p> <pre><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" > <ImageView android:id="@+id/appBackground" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="center" android:src="@drawable/background_image" tools:ignore="ContentDescription" /> </RelativeLayout> </code></pre> <p>and on my Manifest file I have:</p> <pre><code><uses-sdk android:minSdkVersion="13" android:targetSdkVersion="15" /> <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true"/> </code></pre> <p><strong>Update:</strong> My activity code:</p> <pre><code>public class ScreenTest extends Activity { private int width; private int height; private int dpis; private String sdpis; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Ask for a full screen window requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_screen_test); } /* (non-Javadoc) * @see android.app.Activity#onCreateView(java.lang.String, android.content.Context, android.util.AttributeSet) */ @Override public View onCreateView(String name, Context context, AttributeSet attrs) { return super.onCreateView(name, context, attrs); } /* (non-Javadoc) * @see android.app.Activity#onStart() */ @Override protected void onStart() { // TODO Auto-generated method stub super.onStart(); // Get the info about the screen Display display = getWindowManager().getDefaultDisplay(); width = display.getWidth();// size.x; height = display.getHeight(); DisplayMetrics outMetrics = new DisplayMetrics(); display.getMetrics(outMetrics); dpis = outMetrics.densityDpi; sdpis = ""; switch (dpis) { case DisplayMetrics.DENSITY_DEFAULT: sdpis = "160"; break; case DisplayMetrics.DENSITY_HIGH: sdpis = "240"; break; case DisplayMetrics.DENSITY_LOW: sdpis = "120"; break; case DisplayMetrics.DENSITY_XHIGH: sdpis = "320"; break; default: sdpis +=dpis; break; } Log.d("DPIs", "dpis: " + dpis + " sdpis: " + sdpis + " width: " + width + " height: " + height); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_screen_test, menu); return true; } } </code></pre> <h2>Summary:</h2> <p>So I don't know <strong>how to predict from wich folder is the App going to take the image?</strong> and <strong>what it will do with it?</strong> (scale, crop...)</p> <h2>Extra Background:</h2> <p>I've checked all the questions on the <a href="https://stackoverflow.com/questions/tagged/android-resources">android-resoruces</a> tag, I've read several times the official documentation:</p> <ul> <li><a href="http://developer.android.com/guide/practices/screens_support.html" rel="nofollow noreferrer">Suporting Multiple Screens</a></li> <li><a href="http://developer.android.com/guide/topics/resources/providing-resources.html#BestMatch" rel="nofollow noreferrer">Providing Resources: Best Match</a></li> </ul> <p>and some related questions: </p> <ul> <li><a href="https://stackoverflow.com/questions/9630639/android-how-to-findout-the-best-match">How to findout the best match</a></li> <li><a href="https://stackoverflow.com/questions/10685466/android-resources-best-match-fallback-logic">Android resources “best match” fallback logic</a></li> <li><a href="https://stackoverflow.com/questions/9621540/dynamic-bitmap-drawable-in-android">Dynamic Bitmap drawable in android</a> </li> <li><a href="https://stackoverflow.com/questions/11231533/why-android-uses-resources-from-the-higher-resource-instead-of-a-lower">Why Android uses resources from the higher resource instead of a lower?</a></li> </ul> <p><strong>Update:</strong> fixed typos in the folder names.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload