Quero criar um botão personalizado e preciso que ele seja um círculo. Como posso criar um botão de círculo? Eu não acho que isso seja possível com o draw9patch.
Também não sei como fazer botão personalizado!
Você tem alguma sugestão?
Quero criar um botão personalizado e preciso que ele seja um círculo. Como posso criar um botão de círculo? Eu não acho que isso seja possível com o draw9patch.
Também não sei como fazer botão personalizado!
Você tem alguma sugestão?
Respostas:
Use xml drawable assim:
Salve o seguinte conteúdo como round_button.xml
na drawable
pasta
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#c20586"/>
</shape>
</item>
</selector>
Efeito material do Android: emboraFloatingActionButton
é uma opção melhor, Se você quiser fazê-lo usando seletor de xml, crie uma pasta drawable-v21
em res
e salvar outro round_button.xml
lá com seguinte xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#c20586">
<item>
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
</ripple>
E defina-o como plano de fundo Button
em xml como este:
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />
Importante:
Markushi escreveu um widget de botão de círculo com efeitos surpreendentes. Clique aqui !
AngryTool para botão android personalizado
Você pode fazer qualquer tipo de botão android personalizado com este site de ferramentas ... eu faço um círculo e um botão quadrado com um canto redondo com este site de ferramentas .. Visite-o, talvez seja, eu o ajudarei
Com a biblioteca oficial de componentes de material, você pode usar a MaterialButton
aplicação de um Widget.MaterialComponents.Button.Icon
estilo.
Algo como:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/ic_add"
app:iconSize="24dp"
app:iconPadding="0dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
/>
Atualmente, o app:iconPadding="0dp"
, android:insetLeft
, android:insetTop
, android:insetRight
, android:insetBottom
atributos são necessários para centralizar o ícone no botão evitando espaço estofamento extra.
Use o app:shapeAppearanceOverlay
atributo para obter cantos arredondados. Nesse caso, você terá um círculo.
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
O resultado final:
app:iconPadding="0dp"
garantir que o ícone esteja centralizado. Eu queimei um monte de tempo tentando no centro até encontrar isso. Parece uma supervisão desse aplicativo: iconGravity está faltando um valor "central".
se você quiser usar VectorDrawable e ConstraintLayout
<FrameLayout
android:id="@+id/ok_button"
android:layout_width="100dp"
android:layout_height="100dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:background="@drawable/circle_button">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/icon_of_button"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="@drawable/ic_thumbs_up"/>
<TextView
android:id="@+id/text_of_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="5dp"
android:textColor="@android:color/white"
android:text="ok"
/>
</android.support.constraint.ConstraintLayout>
</FrameLayout>
plano de fundo do círculo: circle_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
Para um botão com aparência da FAB, este estilo é MaterialButton
:
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
app:cornerRadius="28dp"
android:layout_width="56dp"
android:layout_height="56dp"
android:text="1" />
Resultado:
Se você alterar o tamanho, tenha cuidado para usar metade do tamanho do botão como app:cornerRadius
.