Как изменить цвет кнопки в Android при нажатии?


82

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


Возможный дубликат раздела Как изменить цвет векторного пути при нажатии кнопки Я пометил его как дубликат, вы можете проверить мой ответ здесь: stackoverflow.com/a/55205149/3763032
mochadwi

Ответы:


129

Один из подходов - создать такой XML-файл drawable, который называется something.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 07

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
Спасибо, чувак, используя стиль, вы можете уменьшить размер приложения. хорошая идея не использовать drawable
Рахул Мандалия

С другой стороны, векторные чертежи на основе xml обычно хуже по производительности, чем изображения, особенно на старых устройствах. Не оптимизируйте преждевременно, но помните об этом.
Przemyslaw Jablonski

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: хорошо, отсылайте новый ответ, я исправил старый ответ
Санкар Ганеш 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 форму для кнопки, щелкнуть правой кнопкой мыши по файлу с возможностью рисования и новому файлу ресурсов с возможностью рисования. измените корневой элемент на форму и сделайте свою форму.

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

2-теперь сделайте 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>

напишите этот код в своем чертеже, создайте новый ресурс и назовите его, как хотите, а затем напишите имя этого графического элемента в кнопке так же, как мы ссылаемся на изображение 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 в каталоге drawable.

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