# material-dialogs

**Repository Path**: HarmonyOS-tpc/material-dialogs

## Basic Information

- **Project Name**: material-dialogs
- **Description**: Material Dialog is a combination of various types of dialog supported by openharmony APIs.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 3
- **Created**: 2021-04-15
- **Last Updated**: 2024-11-08

## Categories & Tags

**Categories**: harmonyos-popup

**Tags**: None

## README

## MaterialDialogs

## Introduction
Material Dialog is a combination of various types of dialog supported by openharmony APIs. It has approx all the UI components with multiple test cases which includes dialog with Text, Image, Buttons, ListContainer items, Color Palette, Custom Views & Progressbar.

## Usage Instructions:

**Core**
The core module contains everything you need to get started with the library. It contains all core and normal-use functionality.
`dependencies {
  ...
  implementation 'com.afollestad.material-dialogs:core:3.2.1'
}`
- **Basics**
	Here's a very basic example of creating and showing a dialog:
	<img src="screenshot/BasicNoTitle.jpg" height="50%" width="50%"/>
		
		new MaterialDialog.Builder(this)
          .content(ResourceTable.String_shareLocationPrompt)
          .positiveText(ResourceTable.String_agree)
          .negativeText(ResourceTable.String_disagree)
          .show();
	<span style="background-color:#eeece1;">this</span> should be a <span style="background-color:#eeece1;">Context</span> which is attached to a window, like an <span style="background-color:#eeece1;">Ability</span>.
    
- **Action Buttons**
	There are simple methods for adding action buttons:
    <img src="screenshot/Basic.jpg" width="75%"/>
    	
		new MaterialDialog.Builder(this)
           .title(ResourceTable.String_useGoogleLocationServices)
           .content(ResourceTable.String_useGoogleLocationServicesPrompt)
           .positiveText(ResourceTable.String_agree)
           .negativeText(ResourceTable.String_disagree)
           .show();
           
     If action buttons together are too long to fit in the dialog's width, they will be automatically stacked:
	<img src="screenshot/Stacked.jpg" width="75%"/>
    
- **Adding an Icon**
	You can display an icon to the left of the title:
    <img src="screenshot/BasicIcon.jpg" width="75%"/>
    	
		new MaterialDialog.Builder(this)
          .icon(ResourceTable.Media_ic_launcher)
          .limitIconToDefaultSize()
          .title(ResourceTable.String_useGoogleLocationServices)
          .content(ResourceTable.String_useGoogleLocationServicesPrompt)
          .positiveText(ResourceTable.String_agree)
          .negativeText(ResourceTable.String_disagree)
          .show();

- **Callbacks**
	There are a few lifecycle callbacks you can hook into:
		new MaterialDialog.Builder(this)
        	.title(ResourceTable.String_useGoogleLocationServices)
            .content(ResourceTable.String_useGoogleLocationServicesPrompt)
            .positiveText(ResourceTable.String_agree)
            .negativeText(ResourceTable.String_disagree)
            .neutralText(ResourceTable.String_more_info)
            .showListener(dialog -> showToast("onShow"))
            .cancelListener(dialog -> showToast("onCancel"))
            .dismissListener(dialog -> showToast("onDismiss"))
            .show();


**List**
The List test cases are having multiple test cases which has single & multi choice list.
- **Plain**
	You can show lists using the <span style="background-color:#eeece1;">listItems</span> extension on <span style="background-color:#eeece1;">MaterialDialog</span>:
    <img src="screenshot/BasicList.jpg" width="75%"/>
    	
		new MaterialDialog.Builder(this)
        	.title(ResourceTable.String_socialNetworks)
            .items(new String[]{"Twitter", "Google", "Instagram", "Facebook"})
            .itemsCallback((dialog, view, which, text) -> showToast(which + ": " + text))
            .show();
            
 - **Single Choice**
 	You can show single choice (radio button) lists using the <span style="background-color:#eeece1;">listItemsSingleChoice</span> extension on <span style="background-color:#eeece1;">MaterialDialog</span>:
    <img src="screenshot/SingleChoice.jpg" width="75%"/>
    	
		new MaterialDialog.Builder(this)
        	.title(ResourceTable.String_socialNetworks)
            .items(new String[]{"Twitter", "Google", "Instagram", "Facebook"})
            .itemsDisabledIndices(1, 3)
            .itemsCallbackSingleChoice(2, (dialog, view, which, text) -> {
            	showToast(which + ": " + text);
                return true; // allow selection
            })
            .positiveText(ResourceTable.String_md_choose_label)
            .show();

- **Multiple Choice**
	You can show multiple choice (checkbox) lists using the <span style="background-color:#eeece1;">listItemsMultiChoice</span> extension on <span style="background-color:#eeece1;">MaterialDialog</span>:
    <img src="screenshot/MultipleChoice.jpg" width="75%"/>
    	
		new MaterialDialog.Builder(this)
        	.title(ResourceTable.String_socialNetworks)
            .items(new String[]{"Twitter", "Google", "Instagram", "Facebook"})
            .itemsCallbackMultiChoice(
            	new Integer[]{1, 3},
                (dialog, which, text) -> {
                	StringBuilder str = new StringBuilder();
                    for (int i = 0; i < which.length; i++) {
                    	if (i > 0) {
                        	str.append('\n');
                        }
                        str.append(which[i]);
                        str.append(": ");
                        str.append(text[i]);
                	}
                	showToast(str.toString());
                    return true; // allow selection
            })
            .onNeutral((dialog, which) -> dialog.clearSelectedIndices(true))
            .onPositive((dialog, which) -> dialog.hide())
            .alwaysCallMultiChoiceCallback()
            .positiveText(ResourceTable.String_md_choose_label)
            .autoDismiss(false)
            .neutralText(ResourceTable.String_clear_selection)
            .show();
 
- **Custom Adapters**
	If you want to customize lists to use your own views, you need to use a custom adapter.
    	final ButtonItemAdapter buttonItemAdapter = new ButtonItemAdapter(this, new String[]{"Twitter", "Google", "Instagram", "Facebook"});
        buttonItemAdapter.setCallbacks(
        	itemIndex -> showToast("Item clicked: " + itemIndex),
            buttonIndex -> showToast("Button clicked: " + buttonIndex));
       	new MaterialDialog.Builder(this).title(ResourceTable.String_socialNetworks).baseItemProvider(buttonItemAdapter).show();
        
**Checkbox Prompts**
Checkbox prompts can be used together with any other dialog type, it gets shown in the same view which shows the action buttons.
   <img src="screenshot/CheckboxPrompt.jpg" width="75%"/>
	
	new MaterialDialog.Builder(this)
    	.icon(ResourceTable.Media_ic_launcher)
        .limitIconToDefaultSize()
        .title(ResourceTable.String_permissionSample)
        .positiveText(ResourceTable.String_allow)
        .negativeText(ResourceTable.String_deny)
        .onAny((dialog, which) -> showToast("Prompt checked? " + dialog.isPromptCheckBoxChecked()))
       	.checkBoxPrompt(ResourceTable.String_dont_ask_again, false, new AbsButton.CheckedStateChangedListener() {
        	@Override
            public void onCheckedChanged(AbsButton absButton, boolean checked) {
            	if (checked) {
                	setAbsButtonBackgroundElement(absButton, ResourceTable.Media_abc_btn_check_to_on_mtrl_015);
                } else {
                	setAbsButtonBackgroundElement(absButton, ResourceTable.Media_abc_btn_check_to_on_mtrl_000);
                }
            }
        })
        .show();

**Custom Views**
A lot of the included extensions use custom views, such as the color chooser dialog. There's also a simple example in the sample project.
<img src="screenshot/CustomViews.jpg" width="75%"/>
	
	case ResourceTable.Id_customView:
    	showCustomView();
    break;


**Progress**
In this module we have progressbar test case with horizintal & circular progressbar execution.
   <img src="screenshot/ProgressDialog.jpg" width="75%"/>


**Input**
The input module contains extensions to the core module, such as a text input dialog.
   <img src="screenshot/Input.jpg" width="75%"/>


**Color**
The color module contains extensions to the core module, such as a color chooser. This test case will help us to change the navigation & status bar color using selected color from the palatte. We can also change the color from the custom color section which has SeekBar to change the **ARGB** color.
- **Basics**
	Color choosers show a simple grid of colors.
    <img src="screenshot/ColorChooser.jpg" width="75%"/>
    	
		new ColorChooserDialog.Builder(this, ResourceTable.String_color_palette)
    		.titleSub(ResourceTable.String_colors)
        	.preselect(primaryPreselect)
        	.show();
    
- **Sub Colors**
	You can specify sub-colors, which are a level down from each top level color. The size of the top level array must match the size of the sub-colors array.
	<img src="screenshot/ColorChooserSubColor.jpg" width="75%"/>
    
- **ARGB Selection**
	<img src="screenshot/ColorChooserARGB.jpg" width="75%"/>


**DateTime**
The datetime module contains extensions to make date, time, and date-time picker dialogs.
    <img src="screenshot/DateTime.jpg" width="75%"/>
		
		MaterialDialog dialog = new MaterialDialog.Builder(this)
    		.title(ResourceTable.String_date_picker)
        	.customView(ResourceTable.Layout_dialog_datepicker, false)
        	.positiveText(ResourceTable.String_ok)
        	.negativeText(ResourceTable.String_cancel)
        	.build();
		DatePicker datePicker = (DatePicker) dialog.getCustomView().findComponentById(ResourceTable.Id_datePicker);
    	datePicker.setDateOrder(DatePicker.DateOrder.DMY);
    	dialog.show();


**Files**
The files module contains extensions to the core module, such as a file and folder chooser. Using this test case we can select file & folder from the local storage.
    <img src="screenshot/FileFolderChooser.jpg" width="75%"/>
	
	new FolderChooserDialog.Builder(this)
    	.chooseButton(ResourceTable.String_md_choose_label)
        .allowNewFolder(true, 0)
        .show();

## Installation instructions
Method 1:
    Generate the .har package through the library and add the .har package to the libs folder.
    Add the following code to the entry gradle:
        implementation fileTree  (dir: 'libs', include: ['*.jar', '*.har'])

Method 2:
    allprojects{
        repositories{
            mavenCentral()
        }
    }
implementation 'io.openharmony.tpc.thirdlib:material-dialogs:1.0.2'