CODEWITHSUNDEEP
androidxmlandroid-studioandroid-buttonmaterial-components-android
RainbowUnicorn
RainbowUnicorn

Reputation: 99

How to create a square button (90 degree angles) Android Studio

So while fiddling around in Android Studio I came with the question: 'How do you make the corners of the button square?. Looking around the internet and stack overflow I got many answers, but I wondered if there was a much simpler way... and then poof! Under Common attributes in XML design, I saw background, curious I put in '@android:color/white' inside, and then the rounded square button became a 90-degree square button.

This was a nice surprise. Since I didn't see anyone talk about doing this I decided to post here. Hope it was helpful and a quick hack to having 90-degree corners on your buttons!

enter image description here

Code difference Back(with background) and home(no background)

<Button
    android:id="@+id/back"
    android:background="@color/white"
    android:text="Back"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.008" />

<Button
    android:id="@+id/home"
    android:text="Home"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.007" />

enter image description here

Upvotes: 4

Views: 11027

Answers (3)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363875

To achieve a square button just use the attribute app:cornerRadius="0dp":

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        app:cornerRadius="0dp"/>

Just note that if you are using a Material Components Theme the Button is replaced at runtime by a MaterialButton.

enter image description here

Note about the android:background="@color/white". Using the android:background attribute the MaterialButton doesn't use its own MaterialShapeDrawable for the background. This means that features like shape appearance, stroke and rounded corners are ignored.
It is the reason because you are obtaining a square button.

Upvotes: 6

Brandon
Brandon

Reputation: 156

To create a square button you can create a drawable resource file and you make the root element shape afterwards you can give the shape a color or a stroke and then for it to be a square you have to pass the same height and the same width e.g width 100dp and height 100dp.

Below is an example of how you can get a drawable that is a square:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <size android:width="100dp" android:height="100dp"/>
</shape>

Upvotes: 1

Jaks Blackhat
Jaks Blackhat

Reputation: 95

you need to create background xml file for your button

and you can give any shape

Upvotes: 1

Related Questions