es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Borde pixelado como un estilo xml de Android.

29 Jul, 2023 Programación

Estoy tratando de crear un tema/estilo para mis botones en mi diseño de Android. Quiero crear un estilo donde las esquinas estén redondeadas pero también sean pixeladas (para que coincida con el tema de mi aplicación), pero también respeta el texto en su interior al mantenerlo dentro de sus bordes.

Pude crear este tipo de borde pixelado en javascript/css.

.pixelated {
    position: relative;
    display: inline-block;
    padding: 1rem 1.25rem;
    border-radius: 20px;
    border-style: solid;
    border-width: 4px;
    border-color: black;
    border-image-slice: 4;
    border-image-width: 2;
    border-image-outset: 0;
    border-image-source: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%3E%0A%20%20%3Cpath%20d%3D%27M2%202h2v2H2zM4%200h2v2H4zM10%204h2v2h-2zM0%204h2v2H0zM6%200h2v2H6zM8%202h2v2H8zM8%208h2v2H8zM6%2010h2v2H6zM0%206h2v2H0zM10%206h2v2h-2zM4%2010h2v2H4zM2%208h2v2H2z%27%20fill%3D%27%23000%27%20%2F%3E%0A%3C%2Fsvg%3E');
    // El SVG:
    // <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'>
    //   <path d='M2 2h2v2H2zM4 0h2v2H4zM10 4h2v2h-2zM0 4h2v2H0zM6 0h2v2H6zM8 2h2v2H8zM8 8h2v2H8zM6 10h2v2H6zM0 6h2v2H0zM10 6h2v2h-2zM4 10h2v2H4zM2 8h2v2H2z' fill='#000'></path>
    // </svg>
}

<div class="pixelated">Un botón</div>
<div class="pixelated">Un botón más largo</div>
<div class="pixelated">Un botón aún más largo</div>

Me preguntaba si es posible recrear algo similar a este javascript/css como un estilo/tema XML que se pueda usar en un diseño de Android. Si no se puede recrear como un estilo de Android, ¿se podría hacer programáticamente con Java?

¡Gracias!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible recrear un estilo/tema similar en XML para usarlo en un diseño de Android. Puedes utilizar el elemento <shape> en XML para definir la forma de tu botón y luego aplicarlo como fondo a tu botón utilizando el atributo android:background. Para crear esquinas pixeladas, puedes crear un elemento <corners> personalizado y definir el radio de cada esquina utilizando elementos <item> con su atributo android:radius establecido en un valor pixelado.

    Aquí tienes un ejemplo de cómo podría verse tu estilo/tema XML:

    <style name="PixelatedButton" parent="Base.Widget.AppCompat.Button">
    <item name="android:background">@drawable/pixelated_button_background</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">16sp</item>
</style>

<!-- Define el dibujo de fondo para el botón -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <!-- Define esquinas personalizadas con valores de radio pixelados -->
    <corners android:bottomleftradius="20dp" android:bottomrightradius="20dp" android:topleftradius="20dp" android:toprightradius="20dp">
        <item android:bottomleftradius="16dp" android:bottomrightradius="16dp" android:topleftradius="16dp" android:toprightradius="16dp"></item>
    </corners>

    <!-- Define el borde para el botón -->
    <stroke android:width="4dp" android:color="@color/black" android:dashwidth="4dp" android:dashgap="4dp"></stroke>

    <!-- Define el color de fondo para el botón -->
    <solid android:color="@color/background_color"></solid>

</shape>

    Luego, puedes aplicar este estilo a tu botón utilizando el atributo style:

    <button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Un botón" style="@style/PixelatedButton"></button>

    Si deseas crear esto programáticamente con Java, aún puedes utilizar un drawable <shape> y crearlo dinámicamente con la clase GradientDrawable. Puedes establecer los valores de radio de las esquinas utilizando el método setCornerRadii() y establecer los colores de borde y sólidos utilizando los métodos setStroke() y setColor() respectivamente. Una vez que hayas creado tu drawable, puedes establecerlo como fondo de tu botón utilizando el método setBackground().

Comments are closed.