Imagen de fondo de escala para ajustar el contenido del diseño

Question

Tengo un diseño que contiene algunos campos de texto y tiene una imagen de fondo que se muestra en la parte superior de mi actividad. Me gustaría que la imagen de fondo se escale para envolver el contenido (no me importa la relación de aspecto). Sin embargo, la imagen es más grande que el contenido, por lo que el diseño en su lugar ajusta la imagen de fondo. Aquí está mi código original:

<RelativeLayout 
    android:layout_width="fill_parent" 
    android:id="@+id/HeaderList" 
    android:layout_gravity="top" 
    android:layout_height="wrap_content" 
    android:background="@drawable/header"> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:id="@+id/NameText" 
     android:text="Jhn Doe" 
     android:textColor="#FFFFFF" 
     android:textSize="30sp" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:paddingLeft="4dp" 
     android:paddingTop="4dp" 
    /> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:textColor="#FFFFFF" 
     android:layout_alignParentLeft="true" 
     android:id="@+id/HoursText" 
     android:text="170 hours" 
     android:textSize="23sp" 
     android:layout_below="@+id/NameText" 
     android:paddingLeft="4dp" 
    /> 
</RelativeLayout> 

Después de buscar en algunas otras preguntas, me encontré con estos dos:

How to wrap content views rather than background drawable?

Scale a Drawable or background image?

Con base en esto, he creado un FrameLayout w/un ImageView mostrando el fondo. Desafortunadamente, todavía no puedo hacer que funcione. Quiero que la altura de la imagen de fondo se reduzca/expanda con el tamaño de las vistas de texto, pero con FrameLayout, el ImageView se ajusta al tamaño de su matriz, y no puedo encontrar la manera de que el padre se ajuste a el tamaño del diseño de vista de texto. Aquí está mi código actualizado:

<FrameLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" > 

    <ImageView android:src="@drawable/header" 
     android:layout_width="fill_parent" 
     android:scaleType="fitXY" 
     android:layout_height="fill_parent" 
     /> 
    <RelativeLayout 
     android:layout_width="fill_parent" 
     android:id="@+id/HeaderList" 
     android:layout_gravity="top" 
     android:layout_height="wrap_content" 
     > 
     <TextView 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:id="@+id/NameText" 
      android:text="John Doe" 
      android:textColor="#FFFFFF" 
      android:textSize="30sp" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentTop="true" 
      android:paddingLeft="4dp" 
      android:paddingTop="4dp" 
      /> 
     <TextView 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textColor="#FFFFFF" 
      android:layout_alignParentLeft="true" 
      android:id="@+id/HoursText" 
      android:text="170 hours" 
      android:textSize="23sp" 
      android:layout_below="@+id/NameText" 
      android:paddingLeft="4dp" 
      /> 
    </RelativeLayout> 
</FrameLayout> 

¿Alguien tiene alguna sugerencia sobre la mejor manera de hacer una escala de la imagen al tamaño de los contenidos de algún diseño? No me preocupa la relación de aspecto de la imagen, ya que no importará, solo quiero que llene el fondo.

Gracias!

Answer 1

Creo que he hecho algo similar a esto en el pasado, intente jugar con la configuración de gravedad en su vista de imagen, creo que uno de ellos debería hacer lo que está buscando.

Answer 2

No lo he intentado, pero si configura dinámicamente la imagen de fondo en onCreate podría funcionar. El tamaño del diseño ya debería estar establecido.

Answer 3

Crear un xml estirable, dicen mybackground.xml

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

Luego, en su RelativeLayout en el primer fragmento de código utilice

android:background="@drawable/mybackground" 

Answer 4

Puede utilizar esta:

<ImageView 
... 
android:scaleType="fitXY" 
> 

Esperanza ayudó)))

Answer 5

Prueba este código .....

<LinearLayout 
    android:layout_width="fill_parent" 
    android:id="@+id/HeaderList" 
    android:orientation="vertical" 
    android:layout_gravity="top" 
    android:layout_height="wrap_content" 
    android:background="@drawable/header"> 
<TextView 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:id="@+id/NameText" 
    android:text="Jhn Doe" 
    android:textColor="#FFFFFF" 
    android:textSize="30sp" 
    android:paddingLeft="4dp" 
    android:paddingTop="4dp" 
/> 
<TextView 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:textColor="#FFFFFF" 
    android:id="@+id/HoursText" 
    android:text="170 hours" 
    android:textSize="23sp" 
    android:paddingLeft="4dp" 
/> 
</LinearLayout> 

Answer 6

Trabaja con RealtiveLayout (sin obligatorio, pero en lugar de utilizar FrameLayout y android: ScaleType = "fitXY". Mueva el imageView a RealtiveLayout que contiene las textviews android: id = "@ + id/HeaderList" y desactive el fondo android: background = "@ dibujable/encabezado" en este nivel.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
     android:id="@+id/principal" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:background="@drawable/header" > 

    <RelativeLayout 
     android:layout_width="fill_parent" 
     android:id="@+id/HeaderList" 
     android:layout_gravity="top" 
     android:layout_height="wrap_content" > 


     <ImageView 
      android:id="@+id/backImg" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_centerInParent="true" 
      android:adjustViewBounds="true" 
      android:background="@color/blancotransless" 
      android:src="@drawable/header" 
      android:scaleType="fitXY" > 
     </ImageView> 

      <TextView 
       android:layout_height="wrap_content" 
       android:layout_width="wrap_content" 
       android:id="@+id/NameText" 
       android:text="John Doe" 
       android:textColor="#FFFFFF" 
       android:textSize="30sp" 
       android:layout_alignParentLeft="true" 
       android:layout_alignParentTop="true" 
       android:paddingLeft="4dp" 
       android:paddingTop="4dp" 
       /> 
      <TextView 
       android:layout_height="wrap_content" 
       android:layout_width="wrap_content" 
       android:textColor="#FFFFFF" 
       android:layout_alignParentLeft="true" 
       android:id="@+id/HoursText" 
       android:text="170 hours" 
       android:textSize="23sp" 
       android:layout_below="@+id/NameText" 
       android:paddingLeft="4dp" 
       /> 
     </RelativeLayout> 
     </RelativeLayout> 

¡Más o menos debería funcionar!

Answer 7

Puede intentar este truco,

• FrameLayout (wrapcontent, wrapcontent)
• • ImageView (partido de los padres, partido de los padres) // su su fondo
• • LinearLayout (contenido_volumétrico, contenido_volumétrico)
• • • Todos sus contenidos va dentro de este esquema lineal o cualquier otro tipo de cosa que quiera

Answer 8

que tenían el mismo problema (creo), y el único La solución que pude encontrar fue esta:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    > 

    <View 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/some_image" 
     android:layout_alignTop="@+id/actual_content" 
     android:layout_alignBottom="@id/actual_content" 
     android:layout_alignLeft="@id/actual_content" 
     android:layout_alignRight="@id/actual_content" 
     /> 

    <LinearLayout 
     android:id="@id/actual_content" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     > 

     <!-- more stuff ... --> 

    </LinearLayout> 

</RelativeLayout>