Multiple images inside an Image Button with padding

Asked

Viewed 117 times

1

I own a ImageButton and within the same need put 5 images at the same time, being one in the center and the others around alluding to be expanding.

So how do I put all the images at the same time on ImageButton and between them put a padding or different sizes?

Imagem exemplo

android

  • You can put an example drawing?

  • 5 images at the same time I understood, just did not understand the allusion to be expanding! Could you put an example of what you want? Will this images be fixed? Or change? what sizes?

  • the expected result was put into question, each part is an image, and the sizes of all are equal

2 answers

1

Considering that an Image Button has A source, it is best to edit the image in own software and then set the new image as the button source.

If you need to create effects, you need to have multiple images to display at different times.

1

You can create a <layer-list> with several circles inside, using the attribute dashGap and dashWidht and put as src of your ImageView:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
            <padding
                android:bottom="40dp"
                android:left="40dp"
                android:right="40dp"
                android:top="40dp" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_red_dark"
                android:dashGap="3dp"
                android:dashWidth="2dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />

            <padding
                android:bottom="40dp"
                android:left="40dp"
                android:right="40dp"
                android:top="40dp" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_red_dark"
                android:dashGap="3dp"
                android:dashWidth="2dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />

            <padding
                android:bottom="40dp"
                android:left="40dp"
                android:right="40dp"
                android:top="40dp" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_red_dark"
                android:dashGap="3dp"
                android:dashWidth="2dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />

            <size
                android:width="40dp"
                android:height="40dp" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_red_dark"
                android:dashGap="3dp"
                android:dashWidth="2dp" />
        </shape>
    </item>
</layer-list>

Upshot:

Imagem resultado

  • the use is very good, but I don’t need to create the lines but use the images I already have

  • @Rosemary Voce cannot replicate them in drawable form?

  • I can but thinking of the next step that is animate to give a wave effect while charging, using the images themselves would be easier

  • 1

    @Aleffmatos If your problem is animation what you should have are the various images that make up the animation to then be assigned one by one to the Imagebutton. Basically it’s following Wildcat’s answer.

Browser other questions tagged android

You are not signed in. Login or sign up in order to post.