source

다른 색상의 표준 Android 버튼

manycodes 2023. 5. 31. 17:42
반응형

다른 색상의 표준 Android 버튼

고객의 브랜딩에 더 잘 맞추기 위해 표준 안드로이드 버튼의 색상을 약간 변경하고 싶습니다.

제가 지금까지 발견한 가장 좋은 방법은 그것을 바꾸는 것입니다.Button의 그림은 에있그가는리위능치한에 있는 수 res/drawable/red_button.xml:

<?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/red_button_pressed" />
    <item android:state_focused="true" android:drawable="@drawable/red_button_focus" />
    <item android:drawable="@drawable/red_button_rest" />
</selector>

그러나 이를 위해서는 사용자 지정할 각 버튼에 대해 세 개의 서로 다른 그리기 가능한 그림을 만들어야 합니다(하나는 정지 상태의 버튼, 하나는 초점을 맞출 때, 다른 하나는 누를 때).그것은 제가 필요로 하는 것보다 더 복잡하고 건조하지 않은 것처럼 보입니다.

제가 정말로 하고 싶은 것은 버튼에 일종의 색 변환을 적용하는 것입니다.단추의 색을 바꾸는 것이 나보다 쉬운 방법이 있습니까?

저는 이 모든 것을 하나의 파일로 매우 쉽게 수행할 수 있다는 것을 알게 되었습니다. 파일에 .custom_button.xml에 그음에다를 합니다.background="@drawable/custom_button"단추 보기에서:

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

    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="@color/yellow1"
                android:endColor="@color/yellow2"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="@color/orange4"
                android:startColor="@color/orange5"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@color/blue2"
                android:startColor="@color/blue25"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Tomasz의 답변에 이어 PorterDuff 곱하기 모드를 사용하여 전체 버튼의 음영을 프로그래밍 방식으로 설정할 수도 있습니다.이렇게 하면 색조뿐만 아니라 버튼 색상이 변경됩니다.

표준 회색 음영 버튼으로 시작하는 경우:

button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

빨간색 음영 버튼을 제공합니다.

button.getBackground().setColorFilter(0xFF00FF00, PorterDuff.Mode.MULTIPLY);

은 녹색 음영 버튼 등을 제공하며, 여기서 첫 번째 값은 16진수 형식의 색상입니다.

현재 버튼 색상 값에 색상 값을 곱하면 작동합니다.이 모드로 할 수 있는 일이 더 많을 것이라고 확신합니다.

당신은 컬러 필터에 관심이 있을 것입니다.

예:

button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));

당신이 원하는 색을 얻기 위해 이것을 시도해 보세요.

이것은 API 15부터 완벽하게 작동하는 나의 솔루션입니다.이 솔루션은 재료와 같은 모든 기본 버튼 클릭 효과를 유지합니다.RippleEffect저는 하위 API에서 테스트하지 않았지만 작동할 것입니다.

필요한 것은 다음과 같습니다.

colorAccent:

<style name="Facebook.Button" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@color/com_facebook_blue</item>
</style>

를 사용하는 것이 좋습니다.ThemeOverlay.AppCompat또는 당신의 메인AppTheme부모로서, 당신의 나머지 스타일을 유지하기 위해.

두을 이두줄추다니합에 하세요.button위젯:

style="@style/Widget.AppCompat.Button.Colored"
android:theme="@style/Facebook.Button"

때때로 당신의 새로운colorAccentAndroid Studio Preview에는 표시되지 않지만 전화기에서 앱을 실행하면 색상이 변경됩니다.


샘플 버튼 위젯

<Button
    android:id="@+id/sign_in_with_facebook"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/sign_in_facebook"
    android:textColor="@android:color/white"
    android:theme="@style/Facebook.Button" />

사용자 지정 색상이 있는 샘플 버튼

이제 appcompat-v7의 AppCompatButton을 사용하여backgroundTint속성:

<android.support.v7.widget.AppCompatButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:backgroundTint="#ffaa00"/>

저는 @conjugatedirection과 @Tomasz의 이전 답변에서 컬러 필터 제안을 좋아합니다.하지만, 저는 지금까지 제공된 코드가 제가 생각했던 것만큼 쉽게 적용되지 않았다는 것을 발견했습니다.

먼저, 컬러 필터를 어디에 적용하고 클리어해야 하는지에 대해서는 언급되지 않았습니다.이를 위한 다른 좋은 장소가 있을 수도 있지만, 제게 떠오른 것은 OnTouch Listener였습니다.

제가 원래 질문을 읽은 바로는, 어떤 이미지도 포함하지 않는 것이 이상적인 해결책일 것입니다.@emby의 custom_button.xml을 사용하여 수락된 답변이 목표라면 컬러 필터보다 더 적합할 수 있습니다.저의 경우, 저는 UI 디자이너가 제공하는 버튼의 모양에 대한 png 이미지로 시작합니다.버튼 배경을 이 이미지로 설정하면 기본 하이라이트 피드백이 완전히 손실됩니다.이 코드는 해당 동작을 프로그램 다크닝 효과로 대체합니다.

button.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 0x6D6D6D sets how much to darken - tweak as desired
                setColorFilter(v, 0x6D6D6D);
                break;
            // remove the filter when moving off the button
            // the same way a selector implementation would 
            case MotionEvent.ACTION_MOVE:
                Rect r = new Rect();
                v.getLocalVisibleRect(r);
                if (!r.contains((int) event.getX(), (int) event.getY())) {
                    setColorFilter(v, null);
                }
                break;
            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                setColorFilter(v, null);
                break;
        }
        return false;
    }

    private void setColorFilter(View v, Integer filter) {
        if (filter == null) v.getBackground().clearColorFilter();
        else {
            // To lighten instead of darken, try this:
            // LightingColorFilter lighten = new LightingColorFilter(0xFFFFFF, filter);
            LightingColorFilter darken = new LightingColorFilter(filter, 0x000000);
            v.getBackground().setColorFilter(darken);
        }
        // required on Android 2.3.7 for filter change to take effect (but not on 4.0.4)
        v.getBackground().invalidateSelf();
    }
});

저는 이것을 여러 버튼에 적용하기 위한 별도의 클래스로 추출했습니다 - 아이디어를 얻기 위해 익명의 내부 클래스로 표시됩니다.

XML을 사용하여 색상 단추를 만드는 경우 포커스 상태와 누른 상태를 별도의 파일에 지정하여 코드를 조금 더 깨끗하게 만들 수 있으며 다시 사용할 수 있습니다.녹색 단추는 다음과 같습니다.

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

    <item android:state_focused="true" android:drawable="@drawable/button_focused"/>
    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>

    <item>
        <shape>
            <gradient android:startColor="#ff00ff00" android:endColor="#bb00ff00" android:angle="270" />
            <stroke android:width="1dp" android:color="#bb00ff00" />
            <corners android:radius="3dp" />
            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

</selector>

Android 버전과 함께 작동하는 가장 짧은 솔루션:

<Button
     app:backgroundTint="@color/my_color"

참고/요구사항:

  • 을 합니다.app:네임스페이스( 아니라)android:네임스페이스!
  • appcompat 버전 > 24.2.0

    종속성 {compile 'com.dll.지원:appcompat-v7:25.3.1' }

설명:

나는 이 접근법을 사용하고 있습니다.

style.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:colorPrimaryDark">#413152</item>
    <item name="android:colorPrimary">#534364</item>
    <item name="android:colorAccent">#534364</item>
    <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style name="MyButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">#534364</item>
    <item name="android:textColor">#ffffff</item>
</style>

위에서 보시는 것처럼, 저는 제 단추에 커스텀 스타일을 사용하고 있습니다.버튼 색상은 액센트 색상에 해당합니다.저는 이것이 설정보다 훨씬 더 나은 접근법이라고 생각합니다.android:background구글이 제공하는 파급 효과를 잃지 않을 것이기 때문입니다.

다음과 같은 방법으로 사용합니다.

buttonOBJ.getBackground().setColorFilter(Color.parseColor("#YOUR_HEX_COLOR_CODE"), PorterDuff.Mode.MULTIPLY);

이제 훨씬 더 쉬운 방법이 있습니다: android-holo-colors.com

모든 홀로 그리기 가능한 색상(버튼, 스피너 등)을 쉽게 변경할 수 있습니다.색상을 선택한 다음 모든 해상도에 대한 그리기 가능한 파일이 포함된 zip 파일을 다운로드합니다.

<Button>사용하다android:background="#33b5e5" 더 나은 는또그이상이상.android:background="@color/navig_button"

DroidUX 구성 요소 라이브러리에는 xml 정의를 통해 실행 시 프로그래밍 방식으로 쉽게 색상을 변경할 수 있는 위젯이 있으므로 앱에서 허용하는 경우 사용자가 버튼의 색상/테마를 설정할 수도 있습니다.

또한 이 온라인 도구를 사용하여 단추 http://angrytools.com/android/button/ 을 사용자 정의하고 다음을 사용할 수 있습니다.android:background="@drawable/custom_btn"레이아웃에서 사용자 정의 단추를 정의합니다.

단추의 테마를 다음으로 설정할 수 있습니다.

<style name="AppTheme.ButtonBlue" parent="Widget.AppCompat.Button.Colored">
 <item name="colorButtonNormal">@color/HEXColor</item>
 <item name="android:textColor">@color/HEXColor</item>
</style>

간단한 방법은 반경, 그라데이션, 누른 색상, 일반 색상 등 원하는 모든 속성을 수락하는 사용자 지정 버튼 클래스를 정의한 다음 XML을 사용하여 배경을 설정하는 대신 XML 레이아웃에 이 속성을 사용하는 것입니다.샘플이 여기 있습니다.

이 기능은 반지름, 선택한 색상 등과 같은 속성을 가진 버튼이 많은 경우에 매우 유용합니다.상속된 단추를 사용자 정의하여 이러한 추가 속성을 처리할 수 있습니다.

결과(배경 선택기가 사용되지 않음).

일반 단추

일반 이미지

누름 단추

여기에 이미지 설명 입력

values\styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="RedAccentButton" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">#ff0000</item>
</style>

그러면:

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="text" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="text" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="text"
    android:theme="@style/RedAccentButton" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="text"
    android:theme="@style/RedAccentButton" />

결과

재료 설계 지침에 따라 아래 코드와 같은 스타일을 사용해야 합니다.

<style name="MyButton" parent="Theme.AppCompat.Light>
    <item name="colorControlHighlight">#F36F21</item>
    <item name="colorControlHighlight">#FF8D00</item>
</style>

레이아웃에서 이 속성을 단추에 추가합니다.

    android:theme="@style/MyButton"

다른 스타일의 버튼을 사용하면 Button 객체를 하위 분류하고 색상 필터를 적용할 수 있습니다.또한 버튼에 알파를 적용하여 활성화 및 비활성화 상태를 처리합니다.

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LightingColorFilter;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.Button;

public class DimmableButton extends Button {

    public DimmableButton(Context context) {
        super(context);
    }

    public DimmableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DimmableButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @SuppressWarnings("deprecation")
    @Override
    public void setBackgroundDrawable(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackgroundDrawable(layer);
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void setBackground(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackground(layer);
    }

    /**
     * The stateful LayerDrawable used by this button.
     */
    protected class DimmableButtonBackgroundDrawable extends LayerDrawable {

        // The color filter to apply when the button is pressed
        protected ColorFilter _pressedFilter = new LightingColorFilter(Color.LTGRAY, 1);
        // Alpha value when the button is disabled
        protected int _disabledAlpha = 100;
        // Alpha value when the button is enabled
        protected int _fullAlpha = 255;

        public DimmableButtonBackgroundDrawable(Drawable d) {
            super(new Drawable[] { d });
        }

        @Override
        protected boolean onStateChange(int[] states) {
            boolean enabled = false;
            boolean pressed = false;

            for (int state : states) {
                if (state == android.R.attr.state_enabled)
                    enabled = true;
                else if (state == android.R.attr.state_pressed)
                    pressed = true;
            }

            mutate();
            if (enabled && pressed) {
                setColorFilter(_pressedFilter);
            } else if (!enabled) {
                setColorFilter(null);
                setAlpha(_disabledAlpha);
            } else {
                setColorFilter(null);
                setAlpha(_fullAlpha);
            }

            invalidateSelf();

            return super.onStateChange(states);
        }

        @Override
        public boolean isStateful() {
            return true;
        }
    }

}

단순합니다.프로젝트에 이 종속성을 추가하고 1이 있는 단추를 만듭니다.임의의 모양 2.어떤 색이든 3.임의의 테두리 4.재료 효과 포함

https://github.com/manojbhadane/QButton

<com.manojbhadane.QButton
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="OK"
       app:qb_backgroundColor="@color/green"
       app:qb_radius="100"
       app:qb_strokeColor="@color/darkGreen"
       app:qb_strokeWidth="5" />

언급URL : https://stackoverflow.com/questions/1521640/standard-android-button-with-a-different-color

반응형