Блог

Главная - Вопросы по программированию - Реализовать квадратную, цветную и круглую кнопку в Android?

Реализовать квадратную, цветную и круглую кнопку в Android?

#android #user-interface #button #styles #user-experience

#Android #пользовательский интерфейс #кнопка #стили #пользовательский интерфейс

Вопрос:

Я пытаюсь разработать приложение для Android с пользовательским интерфейсом, управляемым кнопками. Это означает, что есть несколько кнопок с разными цветами и значками, и каждая из них выполняет свою задачу.

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

Я пробовал с fabs, но fabs не предназначены для этой цели, и я ищу что-то слегка округлое, больше похожее на это:

цветные и закругленные кнопки

Это было бы идеально, потому что кнопки цветные, квадратные с закругленными краями, они содержат значок, и под ними есть надпись.

Любой совет / пример для воспроизведения такого же вида представления? Для цвета вам просто нужно выбрать из палитры светлый и темный варианты. Поместить текстовую метку под кнопкой довольно просто, но я понятия не имею, как закодировать в XML что-то подобное.

Ответ №1:

На вашем месте я бы сделал это так

Вот расположение кнопок. ic_baseline_folder_24 — это векторный ресурс, созданный с помощью Android Studio

 <LinearLayout
  android:id="@ id/folder_button"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/bg_image_button"
    android:padding="12dp"
    android:src="@drawable/ic_baseline_folder_24" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Folders"
    android:textColor="#CCC" />

</LinearLayout>

bg_image_button.xml определяется следующим образом. Его можно расширить для поддержки разных состояний:

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape >
      <solid android:color="#7B0800"/>
      <corners android:radius="8dp" />
    </shape>
  </item>
</selector>

Наконец, установите обработчик действия щелчка:

 val binding = ActivityMainBinding.inflate(layoutInflater)
binding.folderButton.setOnClickListener {
  // do something
}

Это приводит к следующему:

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

Комментарии:

1. Спасибо! Есть ли способ программно изменить цвет фона изображения?

2. @AndreaCioccarelli Изменение цвета фона здесь требует, чтобы вы изменили цвет фона вашего объекта рисования, в данном случае bg_image_button.xml . Это несколько строк кода, которые вам нужно выполнять каждый раз, когда вы хотите, чтобы это произошло. И давайте не будем забывать, что вам нужно создать так много таких XML-файлов, чтобы в вашем меню были разные цвета. В этом случае лучшим решением будет решение, которое я предоставил, и CardView, поскольку вы можете изменить цвет фона с помощью одной простой строки: CardView.setBackgroundColor(цвет); И это не повлияет на другие пункты меню.

3. Цвет фона можно изменить программно, используя setBackgroundResource(int resId) различные фоновые XML-ресурсы. Если для просмотра изображения требуются разные состояния, такие как отключено, нажато, активировано, я считаю, что это проще. Если изменение состояний не требуется, решение SlothCoding тоже работает хорошо.

4. Спасибо вам обоим. Это было очень полезно и просто 🙂

Ответ №2:

Что бы я сделал, так это. Я использовал CardView для создания кнопки с закругленными краями. CardView великолепен и прост в использовании, и позже вы можете легко изменить все, что захотите.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@ id/btn_settings"
    android:layout_width="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cardCornerRadius="20dp"
        app:cardBackgroundColor="@android:color/holo_blue_bright">
        
        <ImageView
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:src="@drawable/ic_settings"
            android:layout_gravity="center"/>
    </androidx.cardview.widget.CardView>

    <TextView
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Settings" />    
</LinearLayout>

С помощью этого кода вы получаете это:

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

Теперь просто в вашем коде введите:

 LinearLayout btn_settings = findViewById(R.id.btn_settings);
btn_settings.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               //do something
           }
       });

Теперь просто внутри onClick введите свой код для обработки нажатий на кнопку. Создайте больше подобных макетов и добавьте их в любой вид, который вы хотите. Просмотр сетки, повторный просмотр и т. Д. Для создания большего количества кнопок, как на вашей фотографии, И обработки кликов для каждой из них.