简体   繁体   中英

Android drawable rotate inside button

I need to have a button series with inside text and icon. The icon inside the 4 buttons must rotate to cover every poly.

Follow an example with two buttons where the top is create with the original (vector drawable) icon and the "left" button rotating the vector.

        <Button
            style="@style/Buttons.Small"
            android:drawableLeft="@drawable/ic_vertical_align_top_white_12dp"
            android:text="@string/optional" />

        <Button
            style="@style/Buttons.Small"
            android:drawableLeft="@drawable/arrow_left"
            android:text="@string/optional" />

The vector drawable: ic_vertical_align_top_white_12dp

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="12dp"
     android:height="12dp"
     android:viewportHeight="24.0"
     android:viewportWidth="24.0">
     <path
         android:fillColor="#FFFFFF"
         android:pathData="M8,11h3v10h2V11h3l-4,-4 -4,4zM4,3v2h16V3H4z" />    
 </vector>

The rotate drawable: arrow_left.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="-90"
    android:toDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:drawable="@drawable/ic_vertical_align_top_white_12dp">
</rotate>

The style

<style name="Buttons.Small">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@color/buttonSmallBackground</item>
    <item name="android:layout_margin">2dp</item>
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:textSize">12sp</item>
    <item name="android:drawablePadding">4dp</item>
    <item name="android:paddingLeft">4dp</item>
    <item name="android:paddingRight">4dp</item>
</style>

And following the result

Nougat (PERFECT)

在此处输入图片说明

Marshmallow (WRONG)

在此处输入图片说明

I already tried to play with the vector viewport without success.

Thanks

I solved with a trick. Appling directly the rotation inside the vector.

Now arrow_left.xml become

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="12dp"
    android:height="12dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <group android:rotation="-90"
        android:pivotX="12"
        android:pivotY="12">
        <path
            android:fillColor="#FFFFFF"
            android:pathData="M8,11h3v10h2V11h3l-4,-4 -4,4zM4,3v2h16V3H4z" />
    </group>
</vector>

I don't know why in Marshmallow the rotation not work properly but this solve my case.

Thanks

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM