Закруглена кнопка в Android

77

Я хочу створити округлі кнопки в програмі для Android. Я розглянув Як створити EditText із закругленими кутами?

Я хочу досягти:

  1. Кнопки із закругленим краєм
  2. Змінити фон / зовнішній вигляд кнопки в різних станах (наприклад, Onclick, Focus)
  3. Використовуй моє власне PNG для тла, а не створюй фігуру.
android  android-button  rounded-corners 
— Арнаб С.
джерело
1
— Сергій Беннер
Google має нову структуру, нові технології краще Jetpack Compose
— Ucdemir

Відповіді:

128

Ви можете зробити кнопку із закругленим кутом, не вдаючись до ImageView.

Ресурс селектора фону 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>

Для кожного штату доступний ресурс, який можна використовувати, наприклад 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>

Зверніть увагу на corners елемент, ви отримаєте закруглені кути!

Потім встановіть фон, який можна намалювати на кнопці:

android:background="@drawable/button_background"

РЕДАКТУВАТИ (9/2018) : Цим самим методом можна створити кругову кнопку. Коло - це насправді просто квадратна кнопка з розміром радіуса, встановленим на 1/2 сторони квадрата

Крім того, у прикладі вище strokeта gradientне є необхідними елементами, це лише приклади та способи, завдяки яким ви зможете побачити округлу форму кута

— CSmith
джерело
1
CSMith. Я запустив селектор. Мене трохи бентежить друга частина щодо того, куди покласти код. Чи слід створювати окремий файл xml. Якщо так, то як це назвати? Я припускаю для кнопки, я все ще встановлюю для її фону @ drawable / button_background ... Thx
— Arnab C.
так, встановіть фон на button_background, і у вас буде файл xml для кожного "стану" у вашому виділенні, друга частина є прикладом button_press.xml.
— CSmith
1
CSmith. Отже, де називається цей окремий файл xml. У наведеному вище прикладі у вас встановлено фон для об’єкта, який можна малювати, і це чудово працює, щоб змінити фон під час взаємодії. Однак кнопка не округляється, якщо ви не створили png. із закругленими кутами та використовуйте дев'ять пластирів, щоб уникнути спотворень.
— Arnab C.
2
Я досить новачок у розробці Android, і це питання може вийти досить проклятим: до якої drawableпапки слід додати файл XML? У мене є чотири drawableпапки: drawable-hdpi; drawable-mdpi; drawable-xhdpi; drawable-xxhdpi.
— ikartik90
3
@ ikartik90, використовуйте малюнок. Інші папки загалом використовуються для перевизначення параметрів, знайдених у "базовій" папці, що можна малювати, для активів або налаштувань, що стосуються щільності, і в цьому прикладі відсутні будь-які перевизначення, специфічні для щільності.
— CSmith
77

Якщо вам потрібна закруглена кнопка в Android, створіть XML-файл "RoundShapeBtn.xml" як малювальний.

 <?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>

Додайте це до свого коду кнопки:

android:background="@drawable/RoundShapeBtn"
— Пір Фахім Шах
джерело
1
Чи слід додати сюди також шрифт, якщо я хочу, щоб текст кнопки був певного шрифту?
— Гаріма Тіварі
@GarimaTiwari так, ви можете зробити це та багато іншого у проектуванні пов'язаних
— Пір Фахім Шах
4
Насправді ви отримуєте помилку збірки, якщо називаєте файл за допомогою CapitalLettersInTheName .. :)
— tplive
17

створити xml-файл у папці, що можна малювати в android, наприклад:

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>

Тепер цей файл XML є фоном ваших кнопок.

 <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"/>
— Арунендра
джерело
Це те, що насправді шукає більшість людей. Дуже вигнуті гладкі прямокутні краї. Як я можу нанести тінь на кнопку? Дякую!
— S bruce
1
Зоряна! Якщо когось дратує необхідність створювати окремі XML із заокругленими кнопками, щоб отримати різні кольори, ви можете вилучити solid android:colorіз XML, що android:backgroundTintButton
— малюється
@ K_7 якщо ви це зробите, ви втратите висоту і тінь. просто слідуйте цій, ви отримаєте висоту і тінь, коли утримуєте кнопку.
— Джеффрі Лю
5

Розширюйте ImageViewтак:

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);
  }
}

І застосуйте до нього свій звичайний фоновий ресурс, і він повинен бути обрізаний закругленими кутами.

— Коді Кофлан
джерело
чи є за замовчуванням R.styleable.RoundedView_radius та R.styleable.RoundedView?
— Сергій Беннер
Коді, як я можу переглянути вихідний код для android.widget.imageview.class. Я продовжую отримувати, чи хочете ви приєднати до нього вихідний файл, оскільки його не було знайдено в eclipse.
— Arnab C.
@Jib ви можете отримати доступ до вихідного коду Android за адресою: source.android.com/source/downloading.html
— Коді Кофлан
Дякую Коді, це програмне рішення - те, що мені потрібно.
— DwarDoh
5

Google рекомендує не імітувати елементи інтерфейсу з інших платформ. Я не ставлю округлі кнопки стилю iOS у програмі Android.

— Крістофер Перрі
джерело
62
Ми не винні, що розробники вирішили поставити потворний інтерфейс як стандарт.
— Єгонатан
Це трохи після старого, але я думав додати кожному, хто читає, що додаток моєї попередньої компанії майже не відображався в магазині програм через велику кількість стилів інтерфейсу iOS. Нам довелося переглянути та внести відповідні міркування щодо дизайну матеріалів. Завжди важливо дотримуватися вказівок!
— лазе
1
@lase повністю згодна директива тільки що, вони не важко правила
— martinseal1987
@ Martinseal1987 добре, як вільні , як правила можуть бути, я просто надаючи читачам майбутнім анекдотичні докази того, що власники платформи роблять піклуватися про узгодженість стилю, який , можливо , очевидно , через посилання Відповідь на цей питання до керівництва по стилям і великий розділ по поперечному реалізації платформи . сміливо кидайте кубики!
— генерують випромінювання
@lase playstore ніколи не буде заперечувати ваше додаток для не дотримуватися керівних принципів, вони не є правила , в будь-якому сенсі цього слова
— martinseal1987
3

Це можна зробити за допомогою атрибута corner. Подивіться нижче на xml.

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

— Рохіт Гоял
джерело
3

Набагато краще помістити стани кнопок і фігури у 1 селекторний файл xml. Це має зробити ваш додаток швидшим / кращим. Спробуйте це (люб’язно Вступ до розробки додатків для Android). Не спам тут, а лише показ цього - не мій код.

    <?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>

Порада щодо дизайну PS: градієнти та закруглені прямокутники найкраще використовувати, коли навряд чи ви можете сказати, що вони використовуються з розумом.

2

Округлі кнопки можна створювати також за допомогою форми кільця, яку можна малювати, див. 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>
— Арнав Рао
джерело
1

Створити Drawable ресурс з ім'ям btnOval -> потім минулий код;

 <?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>

і користувач всередині тегу кнопки, як,

<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>
— Ашік Азіз
джерело
0

Спробуйте навести код нижче Створіть файл, який можна малювати, з назвою circular_button.xml, і вставте нижче

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

Потім змініть фон кнопки на цей файл, який можна малювати

 <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_button"
                android:text="Button"/>

Якщо вам потрібна кнопка повного кола, ви можете скористатися малюнком нижче

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

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

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>
— Удара Абейтілаке
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.