Android: Tạo một nút với hình dạng tam giác sử dụng định nghĩa xml (drawable)

Question

Tôi muốn tạo này sử dụng nút (TextView) bằng cách sử dụng XML definiton:

Trong bố cục của Hoạt động I có:

<TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/button_arrow" <!-- I NEED IMPLEMENT THIS --> 
     android:clickable="true" 
     android:drawablePadding="7dp" 
     android:gravity="center" 
     android:drawableLeft="@drawable/music_cloud" 
     android:onClick="exportSong" 
     android:padding="20dp" 
     android:text="@string/export_upload" 
     android:textAppearance="?android:attr/textAppearanceMedium" 
     android:textColor="@color/dark_yellow_text_color" 
     android:textStyle="bold" /> 

tôi thành lập một số bài viết:

making-a-triangle-shape-using-xml-definitions

Android triangle (arrow) defined as an XML shape

hoặc Android - make an arrow shape with xml

tôi đã cố gắng thay đổi nhiều định nghĩa XML nhưng không có gì là tốt. Có cách nào dễ dàng để thực hiện hình dạng này không? Ngoài ra nó cần phải có một nền trong suốt.

Answer 1

Nếu ai đó vẫn còn có vấn đề với điều này:

1. xml:

   <item android:top="45dp"> 
       <shape> 
        <size android:height="100dp" android:width="90dp"/> 
        <solid android:color="@android:color/holo_orange_light" /> 
       </shape> 
   </item> 
   <item android:top="36dp" android:left="11dp"> 
       <rotate 
        android:fromDegrees="45" 
        android:toDegrees="0" 
        android:pivotX="80%" 
        android:pivotY="20%" > 
        <shape> 
         <size android:width="40dp" 
          android:height="30dp"/> 
         <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/> 
         <solid android:color="@android:color/holo_orange_light" /> 
        </shape> 
       </rotate> 
   </item> 
   </layer-list> 
   

2. override TextView và sử dụng nó trong cách bố trí của bạn:

   public class CustomTextView extends TextView { 
   
       private int mWidth; 
       private int mHeight; 
   
   
       public CustomTextView(Context context, AttributeSet attrs) { 
        super(context, attrs); 
   
       } 
   
       @Override 
       protected void onDraw(Canvas canvas) { 
   
        super.onDraw(canvas); 
        Paint mPaint = new Paint(); 
        int color = getResources().getColor(R.color.YourColor); 
   
        mPaint.setColor(color); 
        Path mPath = new Path(); 
        mPath.moveTo(.0f, this.getHeight()); 
        mPath.lineTo(0.8f * this.getWidth(), this.getHeight()); 
        mPath.lineTo(this.getWidth(), 0.5f * this.getHeight()); 
        mPath.lineTo(0.8f * this.getWidth(), .0f); 
        mPath.lineTo(.0f, .0f); 
        mPath.lineTo(.0f, this.getHeight()); 
   
        canvas.clipPath(mPath); 
        canvas.drawPath(mPath,mPaint); 
   
   
       } 
   } 
   

Về ví dụ xml: có hai hình chữ nhật overlapping.You phải chơi xung quanh với những giá trị rất nhiều và điều này gây khó khăn cho sử dụng trên các chế độ xem khác nhau. Tôi nghĩ rằng bằng cách sử dụng một cái nhìn tùy chỉnh là giải pháp tốt nhất trong trường hợp này.

Answer 2

<item> 
    <inset android:insetBottom="2dp" > 
     <selector xmlns:android="http://schemas.android.com/apk/res/android" > 
      <item android:state_pressed="true"> 
       <shape android:shape="rectangle" > 
        <corners android:radius="3dip" /> 

        <stroke 
         android:width="1dip" 
         android:color="#5e7974" /> 

        <gradient 
         android:angle="-90" 
         android:centerColor="#ECEFF1" 
         android:endColor="#FFAB00" 
         android:startColor="#FFAB00" /> 
       </shape> 
      </item> 
      <item android:state_focused="true"> 
       <shape android:shape="rectangle" > 
        <corners android:radius="3dip" /> 

        <stroke 
         android:width="1dip" 
         android:color="#5e7974" /> 

        <gradient 
         android:angle="-90" 
         android:centerColor="#ECEFF1" 
         android:endColor="#FFAB00" 
         android:startColor="#FFAB00" /> 
       </shape> 
      </item> 
      <item> 
       <shape android:shape="rectangle" > 
        <corners android:radius="3dip" /> 

        <stroke 
         android:width="1dip" 
         android:color="#5e7974" /> 

        <gradient 
         android:angle="-90" 
         android:centerColor="#ECEFF1" 
         android:endColor="#FFD600" 
         android:startColor="#FFD600" /> 
       </shape> 
      </item> 
     </selector> 
    </inset> 
</item> 
<item 
    android:bottom="65dp" 
    android:right="-129dp" 
    android:top="-40dp"> 
    <rotate android:fromDegrees="50" > 
     <shape android:shape="rectangle" > 
      <solid android:color="@color/background_color_light_yellow" /> 
     </shape> 
    </rotate> 
</item> 
<item 
    android:bottom="-40dp" 
    android:right="-129dp" 
    android:top="65dp"> 
    <rotate android:fromDegrees="-50" > 
     <shape android:shape="rectangle" > 
      <solid android:color="@color/background_color_light_yellow" /> 
     </shape> 
    </rotate> 
</item>