머티리얼 디자인 스타일링 경고 대화 상자


161

appCompat 재질 디자인을 앱에 추가했는데 경고 대화 상자에서 기본, 기본 어두운 또는 강조 색을 사용하지 않는 것 같습니다.

내 기본 스타일은 다음과 같습니다.

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
</style>

내 이해를 바탕으로 대화 상자 버튼 텍스트 도이 색상을 사용해야합니다. 이해가 잘못 되었습니까? 아니면 더해야 할 일이 있습니까?


해결책:

표시된 답변이 올바른 길로 안내했습니다.

<style name="MaterialNavyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
    <item name="android:actionModeBackground">@color/apptheme_color_dark</item>
    <item name="android:textColorPrimary">@color/action_bar_gray</item>
    <item name="sdlDialogStyle">@style/DialogStyleLight</item>
    <item name="android:seekBarStyle">@style/SeekBarNavyTheme</item>
</style>

<style name="StyledDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/apptheme_color</item>
    <item name="colorPrimaryDark">@color/apptheme_color_dark</item>
    <item name="colorAccent">@color/apptheme_color</item>
</style>

내가 만든이 라이브러리를 사용해 볼 수 있습니다 : github.com/AndroidDeveloperLB/MaterialStuffLibrary
Android 개발자

15
바닥 부분이 해결책으로되어 있습니까? 그렇다면 자체 답변 으로 게시 하고 질문에 대한 답변을 편집하지 마십시오.
Adi Inbar

답변:


463

안드로이드 라이브러리의 머티리얼 컴포넌트로 2019 년 8 월에 업데이트 됨 :

Android 라이브러리 의 새로운 머티리얼 컴포넌트를 사용 com.google.android.material.dialog.MaterialAlertDialogBuilder하면 기존 androidx.appcompat.AlertDialog.Builder클래스 에서 확장되고 최신 머티리얼 디자인 사양을 지원 하는 새 클래스를 사용할 수 있습니다 .

다음과 같이 사용하십시오.

new MaterialAlertDialogBuilder(context)
            .setTitle("Dialog")
            .setMessage("Lorem ipsum dolor ....")
            .setPositiveButton("Ok", /* listener = */ null)
            .setNegativeButton("Cancel", /* listener = */ null)
            .show();

ThemeOverlay.MaterialComponents.MaterialAlertDialog스타일을 확장하는 색상을 사용자 정의 할 수 있습니다 .

  <style name="CustomMaterialDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
     <!-- Background Color-->
     <item name="android:background">#006db3</item>
     <!-- Text Color for title and message -->
     <item name="colorOnSurface">@color/secondaryColor</item>
     <!-- Text Color for buttons -->
     <item name="colorPrimary">@color/white</item> 
     ....
  </style>  

사용자 정의 스타일을 적용하려면 생성자를 사용하십시오.

new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)

여기에 이미지 설명을 입력하십시오

단추, 제목 및 본문 텍스트사용자 정의 하려면 자세한 내용은 이 게시물확인 하십시오.

앱 테마에서 스타일을 전체적으로 변경할 수도 있습니다 .

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialAlertDialogTheme">@style/CustomMaterialDialog</item>
 </style>

지원 라이브러리 및 APPCOMPAT 테마 :

새로운으로 AppCompat v22.1새 사용할 수 있습니다 android.support.v7.app.AlertDialog을 .

다음과 같은 코드를 사용하십시오.

import android.support.v7.app.AlertDialog

AlertDialog.Builder builder =
       new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
builder.setTitle("Dialog");
builder.setMessage("Lorem ipsum dolor ....");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();

그리고 다음과 같은 스타일을 사용하십시오.

<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#FFCC00</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:background">#5fa3d0</item>
    </style>

그렇지 않으면 현재 테마에서 정의 할 수 있습니다.

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- your style -->
    <item name="alertDialogTheme">@style/AppCompatAlertDialogStyle</item>
</style>

그런 다음 코드에서 :

 import android.support.v7.app.AlertDialog

    AlertDialog.Builder builder =
           new AlertDialog.Builder(this);

Kitkat의 AlertDialog : 여기에 이미지 설명을 입력하십시오


2
AlertDialog.Builder가 기본 테마를 업데이트하는 대신 정확한 테마를 사용하도록 강제하는 이유는 무엇입니까? Java 코드 대신 styles.xml에서이 문제를 해결하고 싶습니다.
Tomáš Hubálek

2
롤리팝 이전 장치에서는 제목 및 단추 글꼴이 굵게 표시되지 않습니다.
jimmy0251

9
나는 그것을 작동시키기 위해 "android :"를 <item name="android:alertDialogTheme">@style/AppCompatAlertDialogStyle</item>

1
최고의 답변을 얻으려면 +1이지만 롤리팝 아래의 Android 버전에서 동일한 UI를 어떻게 얻을 수 있습니까?
realpranav

1
수입 추가 android.support.v7.app.AlertDialog 작동
FlipNovid

9

대화 상자 작성기를 초기화 할 때 두 번째 매개 변수를 테마로 전달하십시오. API 레벨 21의 머티리얼 디자인이 자동으로 표시됩니다.

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);

또는,

AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);

4

AppCompat은 대화 상자에서 그렇게하지 않습니다 (최소한은 아닙니다)

편집 : 이제 그렇습니다 . 사용하십시오android.support.v7.app.AlertDialog


AppCompat를 사용하여 대화 상자 스타일을 약간 수정할 수 있습니다.
Matthew

기본적으로 내 Android Studio import app.AlertDialog는 appCompat을 제공하지 않았습니다. 나는 실제로 그것을 확인하기 전에 약 40 분 동안 무엇이 잘못되었는지 알아 내려고 노력했다 ... 구글 젠장!
Glorifind

2

이 프로젝트를 고려할 수 있습니다 : https://github.com/fengdai/AlertDialogPro

롤리팝과 거의 동일한 머티리얼 테마 경고 대화 상자를 제공 할 수 있습니다. 안드로이드 2.1과 호환됩니다.


참고 사항 :이 답변은 더 오래된 것입니다.
7

2

당신은 사용할 수 있습니다

머티리얼 디자인 라이브러리

머티리얼 디자인 라이브러리 는 예쁜 경고 대화 상자 , 버튼 및 스낵바 와 같은 다른 것들을 위해 만들어졌습니다 . 현재 많이 개발되었습니다.

가이드, 코드, 예제 -https : //github.com/navasmdc/MaterialDesignLibrary

Android Studio 1.0 에 라이브러리를 추가하는 방법 안내서 - 재질 디자인 라이브러리를 Android Studio로 가져 오려면 어떻게합니까?

.

행복한 코딩;)


1

이 라이브러리를 사용해보십시오 :

https://github.com/avast/android-styled-dialogs

@afollestad의 것과 같은 DialogFragments대신에 기반합니다 AlertDialogs. 주요 장점 : 회전 후에 대화 상자가 닫히지 않고 콜백이 계속 작동합니다.


내 도서관은 훨씬 더 능력이 있습니다. 그리고 항상 DialogFragment로 대화 상자를 감쌀 수 있습니다. 😛
afollestad

1

어떤 이유로 android : textColor는 제목 색상 만 업데이트하는 것 같습니다. 를 사용하여 메시지 텍스트 색상을 변경할 수 있습니다

SpannableString.AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.MyDialogTheme));

AlertDialog dialog = builder.create();
                Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");
                wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                dialog.setMessage(wordtoSpan);
                dialog.show();

0

머티리얼 디자인 스타일링 경고 대화 상자 : 사용자 정의 글꼴, 버튼, 색상 및 모양 ..

 MaterialAlertDialogBuilder(requireContext(),
                R.style.MyAlertDialogTheme
            )
                .setIcon(R.drawable.ic_dialogs_24px)
                .setTitle("Feedback")
                //.setView(R.layout.edit_text)
                .setMessage("Do you have any additional comments?")
                .setPositiveButton("Send") { dialog, _ ->

                    val input =
                        (dialog as AlertDialog).findViewById<TextView>(
                            android.R.id.text1
                        )
                    Toast.makeText(context, input!!.text, Toast.LENGTH_LONG).show()

                }
                .setNegativeButton("Cancel") { _, _ ->
                    Toast.makeText(requireContext(), "Clicked cancel", Toast.LENGTH_SHORT).show()
                }
                .show()

스타일:

  <style name="MyAlertDialogTheme" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
  
        <item name="android:textAppearanceSmall">@style/MyTextAppearance</item>
        <item name="android:textAppearanceMedium">@style/MyTextAppearance</item>
        <item name="android:textAppearanceLarge">@style/MyTextAppearance</item>

        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>

        <item name="android:backgroundDimEnabled">true</item>

        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded
        </item>

    </style>




    <style name="MyTextAppearance" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily">@font/rosarivo</item>
    </style>


        <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
   <!--     <item name="backgroundTint">@color/colorPrimaryDark</item>-->
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
       <!-- <item name="android:textColor">@android:color/white</item>-->
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>


    <style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <!--<item name="android:textColor">@android:color/darker_gray</item>-->
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>


  <style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

산출: 여기에 이미지 설명을 입력하십시오

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.