0

I have a PNG file which is a one-pixel-wide, 283-pixel-tall gradient image, which I need to stretch across the background of an ImageView, stretching only horizontally. I attempted to set the asset as a background to an ImageView like this:

<ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_tile"
        android:layout_gravity="bottom|center"
        android:scaleType="matrix"/>

but that just creates a one-pixel line in the middle of the parent view.

Is there a way to do this, or do I need to request a wider image, and use a 9-patch?

Thanks in advance.

UPDATE: I ended up having to set minimum height properties in the XML as follows:

<ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="119dp"
        android:background="@drawable/gradient_tile_drawable"
        android:id="@+id/tiledGradientBackground"
        android:layout_gravity="bottom|center"
        android:scaleType="matrix"/>

...and then set minimumWidth to the width of the parent view in code. Not sure why this solved it, but it did...

int width = holder.container.getResolvedWidth();
holder.tiledGradientBackground.setMinimumWidth(width);
diatrevolo
  • 2,782
  • 26
  • 45
  • 1
    Generally speaking, the best way to do gradients in Android is to use a `ShapeDrawable`, so you can stretch as needed and avoid banding effects. – CommonsWare Dec 13 '13 at 17:27
  • Thanks @CommonsWare. I tried creating a shape drawable, and adding it as the background to my imageview, as I've seen in many posts, but it seems to have no effect... – diatrevolo Dec 13 '13 at 18:04

2 Answers2

2

Try this (tiling instead of stretching):

Put in your drawable folder a file called bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/your_1px_wide_image"
    android:tileMode="repeat"
/>

and set it as your layout background

android:background="@drawable/bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"

I tested it and it works fine.

This image

enter image description here

is giving this result.

enter image description here

Note that I put some extra padding - this screen is 320*480 wide, so the gradient is approx 1/3rd the total screen height (including title and status bars + the extra padding)

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
  • Definitely works in a new project. There must be something up with the layouts in the project Im working on, because it won't tile, but accepting as it definitely works. Thanks! – diatrevolo Dec 13 '13 at 19:45
2
  1. scaletype effects the src image of ImageView and not the background, if the image view is used only for background set the image as src and used fitXY scaletype.
  2. You should create a drawable like Klaus66 & CommonsWare suggested and set it as a background.
  3. Actually if you have a 1px gradient you probably can just create a GradientDrawable xml, will look better across different devices. http://developer.android.com/reference/android/graphics/drawable/GradientDrawable.html
  4. You shouldn't use an extra ImageView just set it as the background of your top layout or even the background of your theme, see my answer here: Android SplashScreen
Community
  • 1
  • 1
Raanan
  • 4,777
  • 27
  • 47