표준 보더리스 버튼을 만드는 방법 (언급 된 디자인 가이드 라인과 같음)?


113

디자인 가이드 라인을 확인하고 테두리없는 버튼이 궁금합니다. 나는 고글을하고 소스에서 찾으려고했지만 혼자서 모을 수는 없었다. 이것은 일반적인 Button 위젯이지만 사용자 정의 (Android 기본) 스타일을 추가합니까? 이 테두리없는 버튼을 만드는 방법 (물론 배경을 비워 둘 수 있지만 구분선이 없습니다)?

다음은 설계 지침에 대한 링크입니다.

여기에 이미지 설명 입력


답변:


163

혼란을 없애려면 :

이 작업은 2 단계로 수행됩니다. 버튼 배경 속성을 android : attr / selectableItemBackground로 설정 하면 피드백이 있지만 배경은없는 버튼이 생성됩니다.

android:background="?android:attr/selectableItemBackground"

나머지 레이아웃에서 테두리없는 버튼을 나누는 선은 android : attr / dividerVertical 배경이있는 뷰에 의해 수행됩니다.

android:background="?android:attr/dividerVertical"

더 나은 이해를 위해 화면 하단에 테두리없는 확인 / 취소 버튼 조합의 레이아웃이 있습니다 (위 오른쪽 그림 참조).

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true">
        <View
            android:layout_width="match_parent"
            android:layout_height="1dip"
            android:layout_marginLeft="4dip"
            android:layout_marginRight="4dip"
            android:background="?android:attr/dividerVertical"
            android:layout_alignParentTop="true"/>
        <View
            android:id="@+id/ViewColorPickerHelper"
            android:layout_width="1dip"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="4dip"
            android:layout_marginTop="4dip"
            android:background="?android:attr/dividerVertical" 
            android:layout_centerHorizontal="true"/>
        <Button
            android:id="@+id/BtnColorPickerCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/ViewColorPickerHelper"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/cancel" 
            android:layout_alignParentBottom="true"/>
        <Button
            android:id="@+id/BtnColorPickerOk"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/ok" 
            android:layout_alignParentBottom="true" 
            android:layout_toRightOf="@id/ViewColorPickerHelper"/>
    </RelativeLayout>

25
지적할만한 가치가 있습니다.이 솔루션은 API 레벨 11 이상에서만 작동합니다.

9
HoloEverywhere 를 사용하는 경우 API 레벨 7 이상에서 작동합니다. 당신은 변경해야합니다 ?android:attr/selectableItemBackground위해 ?attr/selectableItemBackground?android:attr/dividerVertical위해?attr/dividerVertical
Brais 가빈

1
?android:attr/dividerVerticalfor그리고 ?attr/dividerVertical또한 ABS 작동
oscarthecat


22

늦은 답변이지만 많은 견해. API <11은 아직 죽지 않았기 때문에 여기에 관심이있는 사람들에게는 트릭이 있습니다.

용기에 원하는 색상을 지정하십시오 (투명 할 수 있음). 그런 다음 버튼에 기본 투명 색상의 선택기를 제공하고 눌렀을 때 일부 색상을 지정합니다. 이렇게하면 투명한 버튼이 생기지 만 눌렀을 때 색상이 변경됩니다 (홀로처럼). 일부 애니메이션 (예 : holo)을 추가 할 수도 있습니다. 선택자는 다음과 같아야합니다.

res/drawable/selector_transparent_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
          android:exitFadeDuration="@android:integer/config_shortAnimTime">
     <item android:state_pressed="true"
         android:drawable="@color/blue" />

   <item android:drawable="@color/transparent" />
</selector>

그리고 버튼은 android:background="@drawable/selector_transparent_button"

추신 : 컨테이너에 구분선을 갖도록하십시오 ( android:divider='@android:drawable/...API <11)

PS [Newbies] : values ​​/ colors.xml에서 해당 색상을 정의해야합니다.


이것은 API Level 10API Level > 10!
theblang 2014-08-25

둘 다 작동하더라도 프로그래밍 방식으로 수행하는 것보다 낫습니다.
Eran Goldin 2014 년

1
속성 "exitFadeDuration"은 API 레벨 11 이상에서만 사용됩니다.
Bevor

예 @Bevor, 좋은 사람. 독자는 알 수없는 xml 태그가 무시되므로 api> = 11에 페이딩을 사용하고 <11
aacotroneo

18

테두리없는 버튼을 원하지만 클릭해도 애니메이션이 유지되는 사용자를위한 것입니다. 버튼에 이것을 추가하십시오.

style="?android:attr/borderlessButtonStyle"

그들 사이에 구분선 / 선을 원한다면. 선형 레이아웃에 이것을 추가하십시오.

style="?android:buttonBarStyle"

요약

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   style="?android:buttonBarStyle">

    <Button
        android:id="@+id/add"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

    <Button
        android:id="@+id/cancel"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/cancel_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

</LinearLayout>

plus for buttonBarStyle. 그리고 이것은 대답 btw입니다.
frostymarvelous 2015-06-22

7

재료 스타일의 style="@style/Widget.AppCompat.Button.Borderless"경우 AppCompat 라이브러리를 사용할 때 추가하십시오 .


5

로부터 iosched 응용 프로그램 소스 나는이 함께했다 ButtonBar클래스 :

/**
 * An extremely simple {@link LinearLayout} descendant that simply reverses the 
 * order of its child views on Android 4.0+. The reason for this is that on 
 * Android 4.0+, negative buttons should be shown to the left of positive buttons.
 */
public class ButtonBar extends LinearLayout {

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

    public ButtonBar(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public ButtonBar(Context context, AttributeSet attributes, int def_style) {
        super(context, attributes, def_style);
    }

    @Override
    public View getChildAt(int index) {
        if (_has_ics)
            // Flip the buttons so that "OK | Cancel" becomes "Cancel | OK" on ICS
            return super.getChildAt(getChildCount() - 1 - index);

        return super.getChildAt(index);
    }

    private final static boolean _has_ics = Build.VERSION.SDK_INT >= 
                                        Build.VERSION_CODES.ICE_CREAM_SANDWICH;
}

이것은 LinearLayout"확인"및 "취소"버튼이 들어가는 곳이며 적절한 순서로 배치하는 것을 처리합니다. 그런 다음 버튼을 원하는 레이아웃에 넣으십시오.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:divider="?android:attr/dividerHorizontal"
          android:orientation="vertical"
          android:showDividers="middle">
    <!--- A view, this approach only works with a single view here -->
    <your.package.ButtonBar style="?android:attr/buttonBarStyle"
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0">
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/ok_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/ok_button" />
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/cancel_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/cancel_button" />
    </your.package.ButtonBar>
</LinearLayout>

이렇게하면 테두리없는 버튼이있는 대화 상자의 모양이 나타납니다. 프레임 워크의 res에서 이러한 속성을 찾을 수 있습니다. buttonBarStyle세로 구분선과 패딩을 수행합니다. Holo 테마 buttonBarButtonStyle로 설정되어 borderlessButtonStyle있지만 프레임 워크가 표시하려고 할 때 이것이 표시하는 가장 강력한 방법이라고 생각합니다.


이 (? android : attr / buttonBarButtonStyle)을 스타일 항목으로 styles.xml에 어떻게 넣을 수 있습니까?
lis

4

주제로 봐 속성 buttonBarStyle, buttonBarButtonStyleborderlessButtonStyle.


사용 buttonBarButtonStyle하면 예외가 발생 합니다. E/AndroidRuntime(17134): Caused by: java.lang.reflect.InvocationTargetException E/AndroidRuntime(17134): Caused by: android.content.res.Resources$NotFoundException: Resource is not a Drawable (color or path): TypedValue{t=0x1/d=0x1030281 a=2 r=0x1030281}이유는 모르겠지만 selectableItemBackground작업을 사용하는 것은 놀라운 일입니다.
Someone Somewhere

4

코드를 통해 버튼을 테두리없이 만들 수도 있습니다.

TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
 myButton.setBackgroundResource(value.resourceId);

고마워요. 그러나 android.R.attr.selectableItemBackgroundAPI 21이 필요합니다. 이전 버전에서이 작업을 수행하는 방법을 알고 계십니까?
arenaq 2011

작동하지 않습니다. android.R.attr.buttonBarButtonStyle의 리소스를 설정하려고하는데 리소스를 찾을 수 없다는 메시지가 표시됩니다.
Kristy Welsh

사용 android.R.attr.selectableItemBackground
Isj

2

API의> = 8에 대해 프로그래밍 방식으로 테두리없는 버튼을 만들고 싶은 사람들을 위해

ImageButton smsImgBtn = new ImageButton(this);
//Sets a drawable as the content of this button
smsImgBtn.setImageResource(R.drawable.message_icon);    
//Set to 0 to remove the background or for bordeless button
smsImgBtn.setBackgroundResource(0);

이것은 lsj의 솔루션보다 더 좋고 간단합니다. 그냥 setBackgroundResource (0)
jk7

2

이전 및 최신 Android 플랫폼에서 모두 작동해야하는 또 다른 솔루션은

android:background="@android:color/transparent"

버튼보기의 속성입니다. 그러나 위의 라인 버튼을 추가하면 터치 피드백이 제공되지 않습니다.

터치 피드백을 제공하려면 Activity 클래스에 다음 코드를 추가하십시오.

button.setOnTouchListener(new View.OnTouchListener() {          
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:    
                ((Button)view).setBackgroundColor(Color.LTGRAY);
                break;
            case MotionEvent.ACTION_UP:
                ((Button)view).setBackgroundColor(Color.TRANSPARENT);
        }
        return false;
    }
});

나를 위해 잘 작동합니다.


나는 또한 case MotionEvent.ACTION_CANCEL: 아래에 추가 할 것 case MotionEvent.ACTION_UP:입니다.
Medo

2

아직 검색중인 모든 사용자 :

Holo 버튼 바에 대한 고유 한 스타일 상속 :

<style name="yourStyle" parent="@android:style/Holo.ButtonBar">
  ...
</style>

또는 홀로 라이트 :

<style name="yourStyle" parent="@android:style/Holo.Light.ButtonBar">
  ...
</style>

테두리없는 Holo 버튼의 경우 :

<style name="yourStyle" parent="@android:style/Widget.Holo.Button.Borderless.Small">
  ...
</style>

또는 홀로 라이트 :

<style name="yourStyle" parent="@android:style/Widget.Holo.Light.Button.Borderless.Small">
  ...
</style>

2

XML을 사용하지 않고 프로그래밍 방식으로 테두리없는 (평면) 버튼을 만드는 방법입니다.

ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

Button myButton = new Button(myContext, null, 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

나는 사용 ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), R.style.Widget_AppCompat_Button_Borderless_Colored); Button myButton = new Button(myContext); 하고 있었다 : 그리고 그것은 작동하지 않을 것이다. 두 번째와 세 번째 매개 변수를 추가하면 작동합니다!
levibostian

1

xml 파일에서 아래 코드를 사용하십시오. 투명한 색상을 사용하려면 android : background = "# 00000000"을 사용하세요.

<Button
   android:id="@+id/btnLocation"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="#00000000"
   android:text="@string/menu_location"
   android:paddingRight="7dp"
/>

1

Borderless Button에 AppCompat 지원 라이브러리 를 사용할 수 있습니다 .

다음과 같이 테두리없는 버튼을 만들 수 있습니다.

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_button"/>

다음과 같이 테두리없는 컬러 버튼을 만들 수 있습니다.

<Button
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_colored_button"/>

0

어떤 이유로도 나를 위해 일 하지도 style="Widget.Holo.Button.Borderless"않았습니다 android:background="?android:attr/selectableItemBackground". 더 정확하게 말하면 Widget.Holo.Button.BorderlessAndroid 4.0에서는 작업을 수행했지만 Android 2.3.3에서는 작동하지 않았습니다. 두 버전 모두에서 저에게 트릭은 무엇 android:background="@drawable/transparent"이며 res / drawable / transparent.xml 의이 XML 은 무엇입니까?

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

벽 접근을 통해 평범한 머리.


2
배경을 @android : color / transparent로 설정하면 추가 XML 파일 없이도 저에게 효과적이었습니다.
Nicolai Buch-Andersen

여기에는 디바이더를 얻는 방법이 포함되지 않습니다.
Navarr

3
Blundell의 대답에 따르면 @Navarr는 "테두리없는 버튼"의 일부가 아닙니다. 또한 버튼 및 기타 뷰 클래스가 주변 GUI 구성 요소에 대해 알려서는 안되기 때문입니다. 그것은 컨테이너의 책임입니다. Blundell의 게시물에 대한 의견에는 ICS 연락처 세부 항목 레이아웃으로 보이는 링크가 있습니다. 구분선을 표시하기위한 추가보기 (vertical_divider ID 포함)가 있습니다. 깔끔한 android:background="?android:attr/dividerVertical"트릭 이 있지만 자동 분배기를위한 즉시 사용 가능한 솔루션은 없습니다 .
Emperor Orionii 2012-06-27

OP 질문은 Android UX "Borderless Buttons"를 언급했으며 모든 예에서 구분선이 있습니다. 이는 분명히 buttonBarStyle의 일부입니다. 아주 유용한 정보를 주셨지만 감사합니다.
Navarr

0

Google의 Nick Butcher에서 원하는 효과를 얻는 방법대한 훌륭한 슬라이드 쇼 (슬라이드 20에서 시작). 그는 표준 안드로이드 @attr를 사용하여 버튼과 구분선의 스타일을 지정합니다.


참고 것을 링크 전용 답변 낙심, SO 응답 솔루션 (대 아직 시간이 지남에 따라 부패하는 경향 참조의 다른 경유지)에 대한 검색의 엔드 포인트이어야한다. 링크를 참조로 유지하면서 여기에 독립형 개요를 추가하는 것을 고려하십시오.
kleopatra

0

상단 답변에 추가하면 선형 레이아웃에서 어두운 회색 배경색의 뷰를 사용할 수도 있습니다.

<View
    android:layout_width="match_parent"
    android:layout_height="1dip"
    android:layout_marginBottom="4dip"
    android:layout_marginLeft="4dip"
    android:layout_marginRight="4dip"
    android:layout_marginTop="4dip"
    android:background="@android:color/darker_gray"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dip"
    android:orientation="horizontal"
    android:weightSum="1">

    <Button
        android:id="@+id/button_decline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/decline"/>

    <View
        android:layout_width="1dip"
        android:layout_height="match_parent"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:background="@android:color/darker_gray"/>

    <Button
        android:id="@+id/button_accept"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/accept"/>
</LinearLayout>

선이 수평이면 높이를 1dip으로 설정하고 너비를 부모와 일치하도록 설정하고 선이 수직이면 그 반대의 경우도 마찬가지입니다.


0

프로그래밍 방식으로 동일한 결과를 얻으려면 다음을 수행하십시오.

(이것은 C #이지만 Java로 쉽게 변환 가능)

Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);

시합

    <Button
       style="@style/Widget.AppCompat.Button.Borderless.Colored"
    .../>

0

프로그래밍 방식으로 배경 드로어 블 (@ drawable / bg)을 제거하려면이 코드를 시도해보세요. 매개 변수로 null을 제공하면됩니다.

Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);

1
제한적이고 즉각적인 도움을 제공 할 수있는이 코드 스 니펫에 감사드립니다. 적절한 설명은 크게이 문제에 대한 좋은 해결책이 왜 보여 장기적인 가치를 향상 것이고, 다른 유사한 질문을 미래의 독자들에게 더 유용 할 것입니다. 제발 편집 당신이 만든 가정 등 일부 설명을 추가 할 답변을.
NOhs
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.