Як змінити колір кнопки в Android при натисканні?


82

Я працюю над додатком Android. Я хочу, щоб 4 кнопки розташовувались горизонтально внизу екрана. На цих 4 кнопках 2 кнопки мають зображення. Кордон кнопок повинен бути чорного кольору, а межа повинна бути якомога тоншою. Коли я натискаю кнопку, я хочу, щоб фон кнопки змінився на синій колір, не змінюючи кольору межі, і повинен залишатися в цьому кольорі деякий час. Як я можу досягти цього сценарію в Android?


Можливий дублікат Як змінити колір вектор витяжки шляху на кнопці миші я позначено як дублікат, ви можете перевірити мою відповідь тут: stackoverflow.com/a/55205149/3763032
mochadwi

Відповіді:


129

Одним із підходів є створення XML-файлу, подібного до цього drawable, що називається whatever.xml:

<?xml version="1.0" encoding="utf-8"?> 
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_focused="true"
        android:state_pressed="true"
        android:drawable="@drawable/bgalt" />

    <item
        android:state_focused="false"
        android:state_pressed="true"
        android:drawable="@drawable/bgalt" />

    <item android:drawable="@drawable/bgnorm" />
</selector>

bgaltі bgnormє PNG-зображеннями для малювання.

Якщо ви створюєте кнопки програмно у своїй діяльності, ви можете встановити фон за допомогою:

final Button b = new Button (MyClass.this);
b.setBackgroundDrawable(getResources().getDrawable(R.drawable.whatever));

Якщо ви встановите стиль кнопок за допомогою XML, ви зробите щось на зразок:

<Button
  android:id="@+id/mybutton"
  android:background="@drawable/watever" />

І нарешті посилання на підручник . Сподіваюся, це допомагає.


16
Ви також можете замінити ці малюнки у файлі XML визначеннями кольорів, якщо хочете уникнути використання зображень.
haseman

7
@ jshin47 суттєва кількість спроб і помилок. Зараз я написав дві книги про розробку Android :-)
haseman

@haseman - Ви можете розмістити посилання на ці 2 книги або поділитися зі мною за адресою brk0018@gmail.com.
Був

1
Що якщо просто кольори, а не зображення?
Kala J

@KalaJ ти знайшов рішення?
Прафулла Кумар Саху

75

Збережіть цей код у папці, що малюється, за допомогою "bg_button.xml" і зателефонуйте "@ drawable / bg_button" як тло кнопки у вашому xml:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#004F81" />
            <stroke
                android:width="1dp"
                android:color="#222222" />
            <corners
                android:radius="7dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#89cbee"
                android:endColor="#004F81"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#4aa5d4" />
            <corners
                android:radius="7dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

2
Завдяки людині, використовуючи стиль, ви можете зменшити розмір програми. гарна ідея не використовувати
малювання

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

10

Спробуйте це

    final Button button = (Button) findViewById(R.id.button_id);
    button.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View view, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_UP) {
                button.setBackgroundColor(Color.RED);
            } else if(event.getAction() == MotionEvent.ACTION_DOWN) {
                button.setBackgroundColor(Color.BLUE);
            }
            return false;
        }

    });

9

Зверніться до цього,

boolean check = false;
Button backward_img;
Button backward_img1;
backward_img = (Button) findViewById(R.id.bars_footer_backward);
backward_img1 = (Button) findViewById(R.id.bars_footer_backward1);
backward_img.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View arg0) {
        check = true;
        backward_img.setBackgroundColor(Color.BLUE);
    }
});

if (check == true) {
    backward_img1.setBackgroundColor(Color.RED);
    backward_img.setBackgroundColor(Color.BLUE);
}

2
Це встановить BG постійно, тобто якщо користувач натисне кнопку назад, фон буде червоним.
methode

@methode: добре, зверніться до нової відповіді, я виправив oldanswer
Ganesh PMP

8
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- default -->
    <item
        android:state_pressed="false"
        android:state_focused="false">
        <shape
            android:innerRadiusRatio="1"
            android:shape="rectangle" >
            <solid android:color="#00a3e2" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

        </shape>
    </item>

    <!-- button focused -->
    <item
        android:state_pressed="false"
        android:state_focused="true">
        <shape
            android:innerRadiusRatio="1"
            android:shape="rectangle" >
            <solid android:color="#5a97f5" />

            <padding
                android:bottom="5dp"
                android:left="10dp"
                android:right="10dp"
                android:top="5dp" />
        </shape></item>

    <!-- button pressed -->
    <item
        android:state_pressed="true"
        android:state_focused="false">
        <shape
            android:innerRadiusRatio="1"
            android:shape="rectangle" >
            <solid android:color="#478df9"/>
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape></item>
</selector>

6

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

      <!-- Create new xml file like mybtn_layout.xml file in drawable -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/pressed" /> <!--pressed --> 
<item android:drawable="@drawable/normal" /> <!-- Normal -->
</selector>
  <!-- Now this file should be in a drawable folder and use this 
  single line code in    button code to get all the properties of this xml file -->

    <Button
      android:id="@+id/street_btn"
      android:layout_width="wrap_content"
      android:background="@drawable/layout_a" > <!-- your required code -->
    </Button>

4

Спробуйте це......

Спочатку створіть xml-файл з назвою button_pressed.xml Це його вміст.

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" 
          android:state_pressed="false" 
          android:drawable="@drawable/icon_1" />
    <item android:state_focused="true" 
          android:state_pressed="true"
          android:drawable="@drawable/icon_1_press" />
    <item android:state_focused="false" 
          android:state_pressed="true"
            android:drawable="@drawable/icon_1_press" />
    <item android:drawable="@drawable/icon_1" />
</selector>

Ні, спробуйте це на вашій кнопці.

int imgID = getResources().getIdentifier("button_pressed", "drawable", getApplication().getPackageName());
button.setImageResource(imgID);

button_pressed.xml повинен знаходитись у папці, яку можна малювати. icon_1_press та icon_1 - це два зображення для натискання кнопки та нормального фокусування.


2

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

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

Двічі зробіть 1 копію з вашої фігури, змініть назву та змініть суцільний колір. введіть тут опис зображення

3-клацніть правою кнопкою миші на малюваному та новому файлі ресурсу, який можна малювати, просто встановіть кореневий елемент на селектор.

перейдіть до файлу та встановіть "state_pressed"

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"android:drawable="@drawable/YourShape1"/>
<item android:state_pressed="false" android:drawable="@drawable/YourShape2"/>

</selector>

4-кінець перейдіть до макета xml і встановіть фон кнопки "ваш селектор"

(вибачте за мою слабку англійську)


1

Я використовую цей код (з ефектом пульсації):

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/color_gray">
<item android:id="@android:id/mask">
    <color android:color="@color/color_gray" />
</item></ripple>

1

Ви можете спробувати цей код, щоб вирішити вашу проблему

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true"
   android:drawable="@drawable/login_selected" /> <!-- pressed -->
  <item android:state_focused="true"
   android:drawable="@drawable/login_mouse_over" /> <!-- focused -->
  <item android:drawable="@drawable/login" /> <!-- default -->
</selector>

напишіть цей код у своєму малюваному, створіть новий ресурс і назвіть його, як ви хочете, а потім напишіть ім'я цього drwable в кнопку так само, як ми посилаємося на зображення src в android


1
привіт, сер @ lmo! Я дав кілька пояснень із цим питанням.
Mudassir Khan

1
public void onPressed(Button button, int drawable) {
            if (!isPressed) {
                button.setBackgroundResource(R.drawable.bg_circle);
                isPressed = true;
            } else {
                button.setBackgroundResource(drawable);
                isPressed = false;
            }
        }


    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.circle1:
                onPressed(circle1, R.drawable.bg_circle_gradient);
                break;
            case R.id.circle2:
                onPressed(circle2, R.drawable.bg_circle2_gradient);
                break;
            case R.id.circle3:
                onPressed(circle3, R.drawable.bg_circle_gradient3);
                break;
            case R.id.circle4:
                onPressed(circle4, R.drawable.bg_circle4_gradient);
                break;
            case R.id.circle5:
                onPressed(circle5, R.drawable.bg_circle5_gradient);
                break;
            case R.id.circle6:
                onPressed(circle6, R.drawable.bg_circle_gradient);
                break;
            case R.id.circle7:
                onPressed(circle7, R.drawable.bg_circle4_gradient);
                break;

        }

будь ласка, спробуйте це, у цьому коді я намагаюся змінити фон кнопки на кнопці, це працює добре.


0

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

button.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch(event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        button.setBackground(getResources().getDrawable(R.drawable.on_click_drawable));
                        break;
                    case MotionEvent.ACTION_UP:
                        new java.util.Timer().schedule(
                                new java.util.TimerTask() {
                                    @Override
                                    public void run() {
                                        ((Activity) (getContext())).runOnUiThread(new Runnable() {
                                            @Override
                                            public void run() {
                                                button.setBackground(getResources().getDrawable(R.drawable.not_clicked_drawable));
                                            }
                                        });
                                    }
                                }, BUTTON_CLICK_TIME_AFTER_RELEASE_ANIMATION);
                        break;
                    default:
                }
                return false;
            }
        });

BUTTON_CLICK_TIME_AFTER_RELEASE_ANIMATION вказує, через скільки часу [мс] кнопка повернеться до попереднього стану (однак, можливо, ви захочете скористатися булевим значенням, щоб перевірити, що кнопка не використовувалася між ними, залежно від того, чого ви хочете досягти ...) .


0

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

Створіть radio_button.xml у каталозі, який можна малювати.

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

<!-- An element which allows two drawable items to be listed.-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/radio_button_checked" /> <!--pressed -->
    <item android:drawable="@drawable/radio_button_unchecked" /> <!-- Normal -->
</selector>

Тоді в xml для фрагмента повинно виглядати приблизно так

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent">

<RadioButton

    android:id="@+id/radioButton1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_weight="1"
    android:button="@drawable/radio_button"
    android:paddingLeft="10dp" />        
<RadioButton
    android:id="@+id/radioButton2"
    android:layout_marginLeft="10dp"
    android:paddingLeft="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:button="@drawable/radio_button" />

</RadioGroup>
    </LinearLayout>
</layout>

-1

хай найпростіший спосіб це:

додати цей код до mainactivity.java

public void start(View view) {

  stop.setBackgroundResource(R.color.red);
 start.setBackgroundResource(R.color.yellow);
}

public void stop(View view) {
stop.setBackgroundResource(R.color.yellow);
start.setBackgroundResource(R.color.red);
}

а потім у вашій діяльності основна

    <button android:id="@+id/start" android:layout_height="wrap_content" android:layout_width="wrap_content" android:onclick="start" android:text="Click">

</button><button android:id="@+id/stop" android:layout_height="wrap_content" android:layout_width="wrap_content" android:onclick="stop" android:text="Click">

або дотримуйтесь цього підручника

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