Come posso creare un rettangolo con due lati curvi in ​​XML disegnabile?

Question

Desidero che i lati sinistro e destro (non gli angoli) del rettangolo siano curvi. O dire che i lati superiore e inferiore di una forma ovale dritto.

Come posso ottenere qualcosa di simile?

Answer 1

Prova impostando il raggio confine alla metà dell'altezza. Nei CSS, border-radius:50% crea un'ellisse, quindi direi che se è solo il 50% dell'altezza, otterresti qualcosa del genere.

Answer 2

Il modo semplice è utilizzare uno 9-patch image (un'immagine png che termina con image.9.png) e avere un bordo di pixel aggiuntivo che definisce come ridimensionare l'immagine.

Un altro modo è creare un file di forma nella cartella res/drawable proprio così. più

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> 
    <solid android:color="#ff0000"/> 
</shape> 

informazioni su forme di here

Answer 3

Credo che uno dei migliori idea è creare la forma usando XML fiel.

Crea drawable-> ovalshape.xml

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 

    <solid android:color="#ff0000" /> 

    <corners 
     android:bottomLeftRadius="8dp" 
     android:bottomRightRadius="8dp" 
     android:topLeftRadius="8dp" 
     android:topRightRadius="8dp" /> 

    <padding 
     android:bottom="5dip" 
     android:left="10dip" 
     android:right="10dip" 
     android:top="5dip" /> 

</shape> 

Ora è possibile utilizzare questo xml instead of image easily.I pensa che questo sia utile per you and new SO user.

Answer 4

Prova questo TextView, per singolo carattere mostrerà un cerchio, per più cifre si espanderà automaticamente nella forma che ha mostrato sopra, ma se si vuole rigorosamente sopra forma solo dare imbottitura più grande a sinistra ea destra

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <padding 
     android:top="3dp" 
     android:left="8dp" 
     android:right="8dp" 
     android:bottom="3dp"/> 

    <solid android:color="#E6121A" /> 

    <corners 
     android:bottomLeftRadius="12dp" 
     android:bottomRightRadius="12dp" 
     android:topLeftRadius="12dp" 
     android:topRightRadius="12dp" /> 

</shape> 

Answer 5

Arrivo un po 'in ritardo e la risposta non deve essere completa (non considero altezze flessibili), ma almeno se sappiamo in anticipo l'altezza in dp il trucco è avere il raggio come metà del altezza del pulsante. Per esempio se l'altezza sarebbe 48DP, potremmo fare qualcosa di simile:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="#ff0000"/> 
    <corners android:radius="24dp" /> 
</shape> 

Answer 6

Sembra che il raggio massimo consentito a forma è la metà dell'altezza totale nel muggito di forma, in modo da poter usare per avere una forma con altezza flessibile che mantiene il rapporto di desiderio:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
    <solid android:color="#ffffff" /> 
    <size android:height="@dimen/height" /> 
    <corners 
     android:radius="@dimen/height" 
     /> 
</shape> 

Answer 7

Definire l'altezza e rendere il raggio metà dell'altezza.

Answer 8

Ha funzionato bene!

<?xml version="1.0" encoding="utf-8"?> 
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 

    <solid 
     android:color="@color/color_red"/> 
    <corners 
     android:radius="10000dp" /> 
</shape> 

Answer 9

è possibile aumentare le dimensioni del raggio di 200dp e impostare drawable a sfondo di TextView

<solid android:color="#E6121A" /> 

<corners 
    android:bottomLeftRadius="12dp" 
    android:bottomRightRadius="12dp" 
    android:topLeftRadius="12dp" 
    android:topRightRadius="12dp" /> 

Answer 10

Per rendere i lati rimanere sempre sinuosa con qualsiasi altezza, io alla fine up deve creare la forma in modo programmatico come sotto (codice in Kotlin)

class CurvedSidesShape : RectShape() { 
    override fun draw(canvas: Canvas, paint: Paint?) { 
     var path = Path() 
     path.addRoundRect(rect(), rect().height(), rect().height(), Path.Direction.CW) 
     canvas.drawPath(path, paint) 
    } 
} 

Ed ecco come io uso la forma come sfondo tasto

class CurvedSidesButton : Button { 
    private var mHeight: Int = 0 

    constructor(context: Context?) : super(context) { 
     init(context, null, 0, 0) 
    } 

    . 
    . 
    . 

    override fun draw(canvas: Canvas?) { 
     setCurvedSidesBackground(height) 
     super.draw(canvas) 
    } 

    private fun setCurvedSidesBackground(height: Int) { 
     if (height != mHeight) { 
      val curvedSidesShape = ShapeDrawable(CurvedSidesShape()) 
      curvedSidesShape.intrinsicWidth = width 
      curvedSidesShape.intrinsicHeight = height 
      curvedSidesShape.paint.color = Color.RED 
      background = curvedSidesShape 
      mHeight = height 
     } 
    } 
}