Tengo un diseño simple:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

Y esta es la salida:

Pero quiero que el botón con el fondo permanezca del mismo tamaño que sin una imagen como fondo (la correcta). Básicamente, quiero "colocar" el botón sobre la imagen para que el centro de la imagen esté en el fondo del botón, pero el botón no cambia de tamaño para ajustarse a todo el fondo.

Probé android: scaleType = "centerCrop" en el botón pero no cambió nada. Se agradece cualquier ayuda, gracias

enter image description here

Editar El tamaño del botón debe envolver_contenido porque el texto es dinámico.

0
user1282637 17 feb. 2015 a las 21:24

2 respuestas

La mejor respuesta

El ancho y la altura del botón se establecen en wrap_content . En este caso, la imagen de fondo también es un contenido. Simplemente cambie el ancho y la altura al valor que desee:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

Si desea que todos los botones tengan el mismo tamaño, considere la posibilidad de crear un valor de dimensión :

Dimen

    <resources>
        <dimen name="button_width">100dp</dimen>
        <dimen name="button_height">50dp</dimen>
    </resources>

Diseño

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="@dimen/button_with"
            android:layout_height="@dimen/button_height"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="@dimen/button_with"
            android:layout_height="@dimen/button_height"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

Además, considere usar un ImageButton para su propósito.

ImageButton

EDITAR

Probar esto:

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_background"
            android:layout_alignStart="@+id/buttonId"
            android:layout_alignEnd="@+id/buttonId"
            android:layout_alignTop="@+id/buttonId"
            android:layout_alignBottom="@+id/buttonId"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonId"/>

 </RelativeLayout>

Además, agregue un scaleType al ImageView para que quede centrado, estirado, lo que sea ...

android:scaleType="center"

EDITAR 2

Agregar relleno al botón funciona para mí:

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_settings"
        android:layout_alignStart="@+id/buttonId"
        android:layout_alignEnd="@+id/buttonId"
        android:layout_alignTop="@+id/buttonId"
        android:layout_alignBottom="@+id/buttonId"
        android:scaleType="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:text="This is a button with a very long text that may take up multiple lines and stuff"
        android:id="@+id/buttonId"/>

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_settings"
            android:layout_alignStart="@+id/buttonId2"
            android:layout_alignEnd="@+id/buttonId2"
            android:layout_alignTop="@+id/buttonId2"
            android:layout_alignBottom="@+id/buttonId2"
            android:scaleType="center"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a button with a very long text that may take up multiple lines and stuff"
            android:id="@+id/buttonId2"/>

</RelativeLayout>

Screenshot two buttons

Nota: Realmente no puede ver paddingStart y paddingEnd en la captura de pantalla, pero funciona bien.

1
Barthy 17 feb. 2015 a las 20:48

Para ampliar la sugerencia de nueve parches, Android admite la capacidad de usar una imagen de nueve parches para escalar una imagen para un botón / grupo de vista a cualquier tamaño. Una advertencia es que la imagen debe ser una que se ajuste al requisito de nueve parches; en términos generales, la imagen en la que las esquinas son constantes y el medio / los bordes deben poder escalar a cualquier dimensión. Si su imagen es una foto, por ejemplo, no funcionará. La mayoría de las imágenes de nueve parches tienen un centro de color sólido y bordes "simples".

El primer paso es crear un dibujable de nueve parches en su carpeta drawable que haga referencia a su imagen de nueve parches. La imagen de nueve parches debe tener un nombre de archivo similar a * .9.png.

<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/button_image" />

Una vez hecho esto, puede agregar la propiedad background al Button y debe escalar sin problemas con el contenido (la propiedad background a continuación debe hacer referencia al recurso XML <nine-patch> que creaste arriba.

<Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/button_background" 
        android:text="My button"/>

Notaré que su imagen en particular, con las líneas horizontales, parece un mal candidato para la solución de nueve parches, pero valdría la pena echarle un vistazo si es flexible con la imagen utilizada.

0
Eric Farraro 17 feb. 2015 a las 19:07