¿Cómo crear el fondo de la forma del paralelogramo?

Estoy intentando hacer el fondo del paralelogramo para mi textview pero no está exhibiendo correctamente … que exhibe la salida siguiente

Introduzca aquí la descripción de la imagen

<layer-list > <item> <rotate android:fromDegrees="10" android:toDegrees="10" android:pivotX="-40%" android:pivotY="87%" > <shape android:shape="rectangle" > <stroke android:color="#000000" android:width="10dp"/> </shape> </rotate> </item> </layer-list> 

Necesito salida como esta ……..

Introduzca aquí la descripción de la imagen

4 Solutions collect form web for “¿Cómo crear el fondo de la forma del paralelogramo?”

Como alternativa a la respuesta de @mmlooloo, a quién va un crédito, sugiero una solución xml-drawable (ya que no ha enfatizado exactamente qué tipo de solución está buscando). En el ejemplo de abajo usé una View general, pero puedes usar cualquier otra.

Aquí está la View

 <View android:layout_width="100dp" android:layout_height="40dp" android:layout_centerInParent="true" android:background="@drawable/shape" /> 

Y shape.xml

 <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- Colored rectangle--> <item> <shape android:shape="rectangle"> <size android:width="100dp" android:height="40dp" /> <solid android:color="#13a89e" /> </shape> </item> <!-- This rectangle for the left side --> <!-- Its color should be the same as layout's background --> <item android:right="100dp" android:left="-100dp" android:top="-100dp" android:bottom="-100dp"> <rotate android:fromDegrees="45"> <shape android:shape="rectangle"> <solid android:color="#ffffff" /> </shape> </rotate> </item> <!-- This rectangle for the right side --> <!-- Their color should be the same as layout's background --> <item android:right="-100dp" android:left="100dp" android:top="-100dp" android:bottom="-100dp"> <rotate android:fromDegrees="45"> <shape android:shape="rectangle"> <solid android:color="#ffffff" /> </shape> </rotate> </item> </layer-list> 

Así es como se ve:

Introduzca aquí la descripción de la imagen

Usted puede lograrlo creando Textview personalizado como esto:

 public class ParallogramTextView extends TextView { Paint mBoarderPaint; Paint mInnerPaint; public ParallogramTextView(Context context) { super(context); init(); } public ParallogramTextView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } public ParallogramTextView(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { mBoarderPaint = new Paint(); mBoarderPaint.setAntiAlias(true); mBoarderPaint.setColor(Color.BLACK); mBoarderPaint.setStyle(Paint.Style.STROKE); mBoarderPaint.setStrokeWidth(6); mInnerPaint = new Paint(); mInnerPaint.setAntiAlias(true); mInnerPaint.setColor(Color.parseColor("#13a89e")); mInnerPaint.setStyle(Paint.Style.FILL); mInnerPaint.setStrokeJoin(Paint.Join.ROUND); } @Override public void draw(Canvas canvas) { super.draw(canvas); Path path = new Path(); path.moveTo(getWidth(),0); path.lineTo(getWidth()/2, 0); path.lineTo(0, getHeight()); path.lineTo(getWidth()/2,getHeight()); path.lineTo(getWidth(), 0); canvas.drawPath(path, mInnerPaint); canvas.drawPath(path, mBoarderPaint); } } 

Y en el archivo de diseño utilizarlo como a continuación:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <com.example.ParallogramTextView android:id = "@+id/result" android:layout_width="500dp" android:layout_height="500dp" android:layout_centerInParent="true" android:gravity="center" android:layout_margin="32dp" /> </RelativeLayout> 

el resultado es:

Introduzca aquí la descripción de la imagen

 <item android:bottom="-25dp" android:top="-25dp" android:left="25dp" android:right="25dp"> <rotate android:fromDegrees="20"> <shape android:shape="rectangle"> <size android:width="50dp" android:height="100dp"/> <solid android:color="#13a8de"/> </shape> </rotate> </item> 

Éste trabaja en todos los fondos no apenas blancos como en el ejemplo arriba

¿Se refiere al menú de navegación? Si es así, puede usar este código para hacer un paralelogramo:

 ul#nav li a { display: inline-block; text-decoration:none; padding:4px 10px; border-radius:3px; transform: skew(-10deg); -o-transform: skew(-10deg); -moz-transform: skew(-10deg); -webkit-transform: skew(-10deg); color:#000000; } ul#nav li a span { display: inline-block; transform: skew(10deg); -o-transform: skew(10deg); -moz-transform: skew(10deg); -webkit-transform: skew(10deg); } 

También puede comprobar la versión HTML y CSS en código .

Espero que esto ayude.

  • Círculo en Google Maps para Android v2 está parpadeando cuando cambia el tamaño por seekbar
  • Rellene la forma con texto con dos colores diferentes
  • Botones personalizados de Android
  • Android forma xml dibujable - cómo dibujar un formulario u?
  • ¿Cómo puedo configurar el fondo de mi forma en xml?
  • SoundCloud como waveform-seekbar?
  • Adición de forma a LinearLayout Android
  • Cambio de color en una forma dentro de una lista de capas mediante programación
  • ¿Cómo crear la forma con sólido, esquina, trazo en código Java?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.