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!

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> 
  • Alinear los controles uno junto al otro en un diseño relativo
  • RelativeLayout Scrollable
  • ImageView rellena el ancho o altura de los padres, pero mantiene la relación de aspecto
  • Android ScrollView no funciona correctamente
  • ¿Qué hace el diseño relativo wrap_content?
  • ¿Cómo crear un RelativeLayout programáticamente con dos botones uno encima del otro?
  • ¿Alternativa a weightSum en RelativeLayout?
  • ¿Cómo poner varias vistas de texto y la vista de la imagen en android?
  • Android Error: Debe proporcionar el atributo layout_width
  • Añadir dinámicamente una vista al diseño de la actividad
  • Cambiar la posición de TextView dinámicamente usando java en RelativeLayout android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.