Bouton arrondi dans Android
je veux créer des boutons arrondis dans un programme Android. J'ai regardé Comment créer EditText avec des coins arrondis?
ce que je veux accomplir est:
- Bord Arrondi Boutons
- Changer l'arrière-plan du Bouton/apparence différents états (Comme Onclick, Focus)
- utilisez mon propre PNG pour l'arrière-plan et ne créez pas de forme.
9 réponses
vous pouvez faire un bouton de coin arrondi sans avoir recours à une vue D'image.
Un arrière-plan sélecteur de ressources, button_background.xml
:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states
-->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" />
<!-- Focused states
-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" />
<!-- Pressed
-->
<item android:state_pressed="true" android:drawable="@drawable/button_press" />
</selector>
pour chaque État, une ressource à dessiner, p.ex. button_press.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF404040" />
<corners android:radius="6dp" />
<gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />
</shape>
notez l'attribut corners
, cela vous permet d'arrondir les coins!
puis régler le dessin de fond sur le bouton:
android:background="@drawable/button_background"
EDIT (9/2018) : la même technique peut être utilisée pour créer un bouton circulaire. Un cercle est vraiment juste un bouton carré avec la taille du rayon de 1/2 le côté du carré
en outre, dans l'exemple au-dessus de la stroke
et gradient
ne sont pas des éléments nécessaires, ils sont juste des exemples et des moyens que vous serez en mesure de voir la forme du coin arrondi
si vous avez besoin d'un bouton arrondi dans Android, puis créer un fichier XML" RoundShapeBtn.xml" comme drawable.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
ajouter à votre code:
android:background="@drawable/RoundShapeBtn"
créer le fichier xml dans le dossier dessinable dans android comme:
rounded_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="20dp"/> // if you want clear round shape then make radius size is half of your button`s height.
<solid android:color="#EEFFFFFF"/> // Button Colour
<padding
android:bottom="5dp"
android:left="10dp"
android:right="10dp"
android:top="5dp"/>
</shape>
maintenant ce fichier xml comme vos boutons de fond.
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/rounded_button"
android:text="@string/button_text"
android:textColor="@color/black"/>
il est recommandé par Google que vous n'imitiez pas les éléments D'interface utilisateur d'autres plateformes. Je ne mettrais pas des boutons de style iOS arrondis dans une application Android.
étendre ImageView
comme suit:
public class RoundedImageView extends ImageView {
private static final String TAG = "RoundedImageView";
private float mRadius = 0f;
public RoundedImageView(Context context) {
super(context);
}
public RoundedImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// retrieve styles attributes
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
a.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
// only do this if we actually have a radius
if(mRadius > 0) {
RectF rect = new RectF(0, 0, getWidth(), getHeight());
Path clipPath = new Path();
clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
canvas.clipPath(clipPath);
}
super.onDraw(canvas);
}
}
et appliquer votre ressource de fond normale à elle et il doit être coupé avec des coins arrondis.
cela peut être fait en utilisant l'attribut corner. Regardez le xml ci-dessous.
<item>
<shape android:shape="rectangle" >
<stroke
android:height="1.0dip"
android:width="1.0dip"
android:color="#ffee82ee" />
<solid android:color="#ffee82ee" />
<corners
android:bottomLeftRadius="102.0dip"
android:bottomRightRadius="102.0dip"
android:radius="102.0dip"
android:topLeftRadius="102.0dip"
android:topRightRadius="102.0dip" />
</shape>
</item>
il est beaucoup mieux de mettre les états de bouton et les formes dans 1 fichier de sélecteur xml. Cela devrait rendre votre application plus rapide / Meilleure. Essayez ceci (avec la permission de Introduction to Android Application Development). Ce n'est pas juste montrer que ce n'est pas mon code.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="12dip" />
<stroke android:width="1dip" android:color="#333333" />
<gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="12dip" />
<stroke android:width="1dip" android:color="#333333" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="12dip" />
<stroke android:width="1dip" android:color="#333333" />
<gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />
</shape>
</item>
</selector>
P.SR-Conseil de conception: les gradients et les rectangles arrondis sont les mieux utilisés quand vous pouvez à peine dire qu'ils sont là-utiliser à bon escient.
les boutons arrondis peuvent être créés en utilisant la forme de l'anneau dessiner aussi, voir http://www.zoftino.com/android-shape-drawable-examples
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="40dp"
android:useLevel="false">
<solid android:color="@color/colorPrimary" />
<padding android:bottom="50dp"
android:left="16dp"
android:right="16dp"
android:top="50dp"/>
</shape>
créer ressource tirable nommée btnOval-- > alors code passé;
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:padding="10dp">
<solid android:color="#6E6E6E"/>
</shape>
et l'utilisateur à l'intérieur de l'étiquette de bouton comme,
<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>