Escala la imagen de fondo para ajustar el contenido del diseño

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 para escalar para envolver el contenido (no se preocupan por 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 envuelve 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 a través de algunas otras preguntas, encontré estos dos:

¿Cómo envolver las vistas de contenido en lugar de dibujos de fondo?

Escala de una imagen de dibujo o de fondo?

Basado en esto, creé un FrameLayout w / un ImageView que muestra el fondo. Por desgracia, todavía no puedo conseguir que funcione. Quiero que la altura de la imagen de fondo se reduzca / expanda w / el tamaño de las vistas de texto, pero con el FrameLayout, el ImageView se ajusta al tamaño de su padre, y no puedo encontrar una manera de hacer que el padre ajuste a El tamaño del diseño de la 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 para la mejor manera de hacer una escala de imagen al tamaño de los contenidos de algún diseño? No estoy preocupado por la relación de aspecto de la imagen, ya que no importa, sólo quiero que llene el fondo.

¡Gracias!

8 Solutions collect form web for “Escala la imagen de fondo para ajustar el contenido del diseño”

Tuve el mismo problema (creo), y la única solución que pude encontrar fue la siguiente:

 <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> 

Usted puede intentar este truco,

  • FrameLayout (wrapcontent, wrapcontent)
    • ImageView (padre del fósforo, padre del fósforo) // su su fondo
    • LinearLayout (wrapcontent, wrapcontent)
      • Todo su contenido va dentro de este diseño lineal o cualquier otro tipo lo que quieras

Mueva el imageView a RealtiveLayout que contiene las vistas de texto android: id = "@ + id / HeaderList" y desactive el fondo android: background = "@ Drawable / header "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!

Cree un xml dibujable, diga 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 use

 android:background="@drawable/mybackground" 

Creo que he hecho algo similar a esto en el pasado, intente jugar con el ajuste de gravedad en su vista de imagen, creo que uno de ellos debe hacer lo que buscas.

No lo he probado, pero si establece la imagen de fondo dinámicamente en el onCreate que podría funcionar. El tamaño del diseño ya debe estar establecido.

Puede utilizar esto:

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

Espero que ayudó

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> 
  • AlignParentBottom + marginBottom no trabajando juntos
  • Android: EditText no rellenar ScrollView y RelativeLayout
  • Android: rendimiento lento con una gran imagen en ImageView
  • RelativeLayout Scrollable
  • Uso de RelativeLayout dentro de ScrollView no se produce en desplazamiento
  • RelativeLayout no muestra todos los botones
  • Alinear al elemento más grande de un RelativeLayout
  • ¿Qué pasa con setScaleX / setScaleY?
  • ¿Cómo puedo hacer cumplir una referencia circular en un RelativeLayout?
  • Android relative layout below 2 artículos
  • RelativeLayout dentro de ScrollView con allignParentBottom
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.