Circular button with drawable in the middle

user_11743504 0
Viewed 283

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

material-components-android android-button drawable android xml
3 Answers

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

user_20165620

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"
    />
user_11507120

Add android:padding="" to your AppCompatImageView

user_113220510
Related