CODEWITHSUNDEEP
androidxmldrawableandroid-buttonmaterial-components-android
marcpetitvecino
marcpetitvecino

Reputation: 187

Circular button with drawable in the middle

I'm currently making the layout of an app I'm working on and I'm not able to create this button in xml.

Circular Button

The arrow inside is a .png picture (I can also get it exported as vector) and the background is just a drawable. I am unable to mix this two assets to make this button. My current result is this:

Bad circular button

The xml is:

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/onboardingStep2NextButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintTop_toBottomOf="@id/onboardingStep2SubTitle"
    android:src="@drawable/long_left"
    android:background="@drawable/purple_round_background"
    app:layout_constraintEnd_toEndOf="parent"/>

purple_round_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <corners  android:radius="50dp"/>
    <solid android:color="@color/purple" />
</shape>

Thanks for any help

Upvotes: 2

Views: 1095

Answers (3)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363577

You can just use a MaterialButton:

   <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        style="@style/Widget.MaterialComponents.Button.IconOnly"
        app:icon="@drawable/ic_add_24px"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
        />

with this style:

<style name="Widget.MaterialComponents.Button.IconOnly" >
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">12dp</item>
    <item name="android:minHeight">12dp</item>
    <item name="iconGravity">textStart</item>
</style>

and this shapeAppearanceOverlay:

<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

enter image description here

Upvotes: 3

Sajad Hosseini
Sajad Hosseini

Reputation: 155

Add android:padding="" to your AppCompatImageView

Upvotes: 1

zhangxaochen
zhangxaochen

Reputation: 33997

try to add android:padding may help you:

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/onboardingStep2NextButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintTop_toBottomOf="@id/onboardingStep2SubTitle"
    android:src="@drawable/long_left"
    android:background="@drawable/purple_round_background"
    app:layout_constraintEnd_toEndOf="parent"
    android:padding="10dp"
    />

Upvotes: 1

Related Questions