9 Patch image where center is 1:1

Question

I want to create a splash screen on Android with a small logo in the middle, but the logo is streched on larger devices. I thought I could use a 9 patch image, but it seems a 9 patch image works inversed to what I try to reach.

This is the logo that has to be in the middle.

This is what I get when I set the image as a 9 patch. The center is stretched out and the corners are intact. I need to opposite. I need a 9 patch that can define a center area that is always displayed in correct 1:1 proportion, and border areas at left, right, top and bottom that can be stretched if the image is smaller than the screen.

How can I do this? With or without 9 patch.

Answer 1

Here is an example of how you can do this. This is a 9patch, so save it like this: yourname.9.png and don't forget to set android:scaleType="fitXY" on your ImageView

Answer 2

You might want to mark 4 strech position See the following X mark, just put a dot instead of them. And use (if not already done) the 9path tool inside the SDK folder to have a preview of what will be generated by Android SDK

    X       X
  ************
X ************
  ************
  ****LOGO****
  ************
X ************
  ************

Answer 3

You have two solutions:

1. Set the splash to a RelativeLayout with a background of a blue color (that you are using). Add to this RelativeLayout a centered image.
2. Use a 9-patch the right way. You need 4 patches on each of the corners:

Answer 4

if it's just a logo in the center of a background color, you can try out this approach:

no need for 9-patch. Just use a normal image (called "splash_logo" here), and wrap it by creating a new drawable xml file (inside res/drawable) :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <color android:color="@color/default_background" />
    </item>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_logo" >
        </bitmap>
    </item>

</layer-list>

use this drawable on the imageView you wish to use.

If it's a full screen, you can go further and use a theme for the first activity, thus removing the need for any view to be created :

in styles.xml (or theme.xml) :

<style name="SplashTheme" parent="@android:style/Theme.NoTitleBar">
    <!-- Background color must match splash image borders ! -->
    <item name="android:windowBackground">@drawable/activity_splash</item>
    <item name="android:background">@null</item>
</style>

and in the manifest:

    <activity
        android:name="..."
        android:theme="@style/SplashTheme" >

Answer 5

You indicate which parts of a 9-patch image are stretched with the pixels in the top and left border. So just fill the pixels near the edges.

Answer 6

The 9-patch is not used to this kind of rendering. (http://developer.android.com/tools/help/draw9patch.html) But you do as the code mentioned below, using a and centralizing using gravity.

<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:gravity="center" >

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"
    android:src="@drawable/your_logo" />