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


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.