Як зробити круглу кнопку?


141

Я намагаюся зробити круглу кнопку, але не знаю, як це зробити. Я можу зробити кнопку із закругленими кутами, але як я можу обвести коло. Це не те саме. Скажіть, будь ласка, чи можливо на Android? Дякую.


1
є гарне пояснення тут stackoverflow.com/questions/9884202/custom-circle-button
— Мілон

Відповіді:


265

Створіть XML-файл, названий roundedbutton.xmlу папці, що витягується

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

Нарешті встановлено , що в якості фону для вашого , Buttonякandroid:background = "@drawable/roundedbutton"

Якщо ви хочете зробити його повністю закругленим, змініть радіус і влаштуйтеся на щось, що для вас нормально.


Вам потрібен суфікс .xml? Я бачив приклад без цього
— Ніл

@Neil вам не потрібно додавати суфікс xml, я зробив це з метою демонстрації та чіткого розуміння концепції, щоб читач не сприйняв приклад неправильно, автоматична допомога eclipse допоможе вам знайти, якщо потрібен .xml чи ні, у мене є звичка використовувати ctrl + простір на своїй машині Windows для автоматичного виконання xml команд.
— Аріф Надей

2
Вам не потрібен символ "@" перед словом "Dravable"?
— шим

Чи має це рішення інший результат, ніж просто використання круглого зображення як фону?
— Сіаваш

6
Також, чому б не використовувати android: shape = "oval"
— Siavash

39

Якщо ви користуєтесь Android Studio, ви можете просто використовувати:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

це добре працює для мене, сподіваюся, що це комусь допоможе.


2
це має бути прийнятою відповіддю, використовуючи значення кутів, не виходить за рамки округлих кутів, і це питання стосується кола. Дякую Шаун за цю відповідь
— Дон

12
Використання ringнічого не показує. Краще використовувати oval.
— CopsOnRoad

31
  1. Створіть файл Dravable / button_states.xml, що містить:

    <?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="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>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. Використовуйте його в тезі кнопок у будь-якому файлі макета

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

це працює на відмінно, дякую. чи можете ви допомогти мені намалювати прямокутник від центру до зовнішньої частини кола, як "Q"
— CLIFFORD PY

Працює нормально, але чому ми поставили радіус до 1000dp? чи можете ви поясніть, будь ласка?
— Джамшайд Камран

@JamshaidKamran 1000dp - довільний розмір, який достатньо великий, щоб зробити кнопку круглою.
— rraallvv

Чи є ресурс розмірності Android, який ми можемо використовувати замість 1000dp?
— rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

і додайте це до коду кнопки

    android:layout_width="50dp"
    android:layout_height="50dp"

5

Використовували форму як овальну. Це робить кнопку овальною

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

        <solid android:color="#ffee82ee" />

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#ffffff"
    />
</shape>

Встановіть це на своїх XML-ресурсах, а також на простому використанні та кнопці зображення з круглим зображенням, використовуючи малюнок як фон.



3

використовуйте ImageButton замість кнопки ....

і зробіть кругле зображення з прозорим фоном


3

Якщо ви хочете, щоб кругла кнопка FAB виглядала, і ви використовуєте офіційну бібліотеку компонентів Material, ви можете легко зробити це так:

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

Результат:

введіть тут опис зображення

Якщо ви змінюєте розмір кнопки, будьте обережні, використовуючи половину розміру кнопки як app:cornerRadius.


2

Для круглої кнопки створіть форму:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

<solid android:color="#ffee82ee" />


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

використовувати його як тло посилання на кнопку




0

Ви можете використовувати FloatingActionButton google

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'

0
  1. Використовуйте кнопки зображення та робіть фон як потрібне зображення.
  2. Створіть зображення за посиланням студії активів Android -

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C% 200) & backColor = rgb (96% 2C% 20125% 2C% 20139) & crop = 1 & backgroundShape = коло та ефекти = немає & name = ic_home "

і завантажте його, витягніть його всередину цієї папки mipmap-hdpi.

  1. скопіюйте зображення з папки mipmap-hdpi та вставте його у папку, що виводиться, для вашого проекту Android.

  2. Тепер встановіть фон як це зображення.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.