Android How to Create Dialog Custom
1. Project Structure
2. Gradle
apply plugin: 'com.android.application' android { compileSdkVersion 28 defaultConfig { applicationId "dialog.androidtutorials.fyprojects.custom" minSdkVersion 16 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support.constraint:constraint-layout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'com.android.support:design:28.0.0' implementation 'com.android.support:support-v13:27.1.1' implementation 'com.wdullaer:materialdatetimepicker:3.2.0' // date & time picker }
3. Main Activity
package dialog.androidtutorials.fyprojects.custom.activity; import android.app.Dialog; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.AppCompatButton; import android.support.v7.widget.AppCompatCheckBox; import android.support.v7.widget.AppCompatSpinner; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.EditText; import android.widget.ImageButton; import android.widget.TextView; import android.widget.Toast; import dialog.androidtutorials.fyprojects.custom.model.Event; import dialog.androidtutorials.fyprojects.custom.utils.Tools; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initToolbar(); ((AppCompatButton) findViewById(R.id.custom_dialog)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showCustomDialog(); } }); } private void initToolbar() { Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.drawable.ic_menu); setSupportActionBar(toolbar); getSupportActionBar().setTitle("Custom"); getSupportActionBar().setDisplayHomeAsUpEnabled(true); Tools.setSystemBarColor(this); } private void displayDataResult(Event event) { ((TextView) findViewById(R.id.tv_email)).setText(event.email); ((TextView) findViewById(R.id.tv_name)).setText(event.name); ((TextView) findViewById(R.id.tv_location)).setText(event.location); ((TextView) findViewById(R.id.tv_from)).setText(event.from); ((TextView) findViewById(R.id.tv_to)).setText(event.to); ((TextView) findViewById(R.id.tv_allday)).setText(event.is_allday.toString()); ((TextView) findViewById(R.id.tv_timezone)).setText(event.timezone); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_search_setting, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { finish(); } else { Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show(); } return super.onOptionsItemSelected(item); } private void showCustomDialog() { final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before dialog.setContentView(R.layout.dialog_event); dialog.setCancelable(true); WindowManager.LayoutParams lp = new WindowManager.LayoutParams(); lp.copyFrom(dialog.getWindow().getAttributes()); lp.width = WindowManager.LayoutParams.MATCH_PARENT; lp.height = WindowManager.LayoutParams.WRAP_CONTENT; final Button spn_from_date = (Button) dialog.findViewById(R.id.spn_from_date); final Button spn_from_time = (Button) dialog.findViewById(R.id.spn_from_time); final Button spn_to_date = (Button) dialog.findViewById(R.id.spn_to_date); final Button spn_to_time = (Button) dialog.findViewById(R.id.spn_to_time); final TextView tv_email = (TextView) dialog.findViewById(R.id.tv_email); final EditText et_name = (EditText) dialog.findViewById(R.id.et_name); final EditText et_location = (EditText) dialog.findViewById(R.id.et_location); final AppCompatCheckBox cb_allday = (AppCompatCheckBox) dialog.findViewById(R.id.cb_allday); final AppCompatSpinner spn_timezone = (AppCompatSpinner) dialog.findViewById(R.id.spn_timezone); String[] timezones = getResources().getStringArray(R.array.timezone); ArrayAdapter<String> array = new ArrayAdapter<>(this, R.layout.simple_spinner_item, timezones); array.setDropDownViewResource(R.layout.simple_spinner_dropdown_item); spn_timezone.setAdapter(array); spn_timezone.setSelection(0); ((ImageButton) dialog.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); ((Button) dialog.findViewById(R.id.bt_save)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Event event = new Event(); event.email = tv_email.getText().toString(); event.name = et_name.getText().toString(); event.location = et_location.getText().toString(); event.from = spn_from_date.getText().toString() + " (" + spn_from_time.getText().toString() + ")"; event.to = spn_to_date.getText().toString() + " (" + spn_to_time.getText().toString() + ")"; event.is_allday = cb_allday.isChecked(); event.timezone = spn_timezone.getSelectedItem().toString(); displayDataResult(event); dialog.dismiss(); } }); dialog.show(); dialog.getWindow().setAttributes(lp); } }
4. Model
Event package dialog.androidtutorials.fyprojects.custom.model; import java.io.Serializable; public class Event implements Serializable { public String email; public String name; public String location; public String from; public String to; public Boolean is_allday; public String timezone; }
5. Layout
activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:fitsSystemWindows="true" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <include layout="@layout/toolbar" /> </android.support.design.widget.AppBarLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:orientation="vertical" android:padding="@dimen/spacing_large"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Email" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" : " /> <TextView android:id="@+id/tv_email" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="-" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Name" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" : " /> <TextView android:id="@+id/tv_name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="-" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Location" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" : " /> <TextView android:id="@+id/tv_location" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="-" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="From" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" : " /> <TextView android:id="@+id/tv_from" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="-" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="To" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" : " /> <TextView android:id="@+id/tv_to" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="-" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="All day" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" : " /> <TextView android:id="@+id/tv_allday" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="-" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Timezone" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" : " /> <TextView android:id="@+id/tv_timezone" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="-" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> </LinearLayout> <android.support.v7.widget.AppCompatButton android:id="@+id/custom_dialog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" style="@style/Widget.AppCompat.Button.Borderless" android:background="@drawable/btn_rounded_accent" android:paddingLeft="@dimen/spacing_xlarge" android:paddingRight="@dimen/spacing_xlarge" android:text="SHOW DIALOG" android:textColor="@android:color/white" /> </RelativeLayout> </LinearLayout>
dialog_event.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:fitsSystemWindows="true" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageButton android:id="@+id/bt_close" android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@android:color/white" app:srcCompat="@drawable/ic_close" /> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_vertical" android:text="New event" android:textAppearance="@style/Base.TextAppearance.AppCompat.Title" android:textColor="@android:color/white" /> <Button android:id="@+id/bt_save" style="@style/Widget.AppCompat.Button.Borderless" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:paddingLeft="@dimen/spacing_xsmall" android:paddingRight="@dimen/spacing_xsmall" android:text="@string/SAVE" android:textColor="@android:color/white" /> </LinearLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/nested_scroll_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" android:scrollingCache="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal"> <TextView android:id="@+id/tv_email" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/spacing_xsmall" android:layout_weight="1" android:paddingLeft="@dimen/spacing_large" android:paddingRight="@dimen/spacing_large" android:text="heyfromjonathan@gmail.com" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_60" /> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@color/grey_60" app:srcCompat="@drawable/ic_arrow_drop" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/grey_10" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/spacing_large"> <EditText android:id="@+id/et_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Event name" android:textAppearance="@style/Base.TextAppearance.AppCompat.Display1" android:textColorHint="@color/grey_40" /> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <EditText android:id="@+id/et_location" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Location" android:minHeight="@dimen/spacing_xxlarge" android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" android:textColorHint="@color/grey_40" /> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/spacing_xsmall" android:text="From" android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_60" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/spn_from_date" style="@style/Base.Widget.AppCompat.Spinner.Underlined" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" android:text="Fry, May 12 2017" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <Button android:id="@+id/spn_from_time" style="@style/Base.Widget.AppCompat.Spinner.Underlined" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:singleLine="true" android:spinnerMode="dialog" android:text="4:30 PM" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/spacing_xsmall" android:text="To" android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_60" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/spn_to_date" style="@style/Base.Widget.AppCompat.Spinner.Underlined" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="2" android:text="Fry, May 12 2017" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <Button android:id="@+id/spn_to_time" style="@style/Base.Widget.AppCompat.Spinner.Underlined" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:singleLine="true" android:spinnerMode="dialog" android:text="5:30 PM" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <android.support.v7.widget.AppCompatCheckBox android:id="@+id/cb_allday" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="All day" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_60" /> <View android:layout_width="match_parent" android:layout_height="@dimen/spacing_large" /> <android.support.v7.widget.AppCompatSpinner android:id="@+id/spn_timezone" style="@style/Base.Widget.AppCompat.Spinner.Underlined" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:spinnerMode="dialog" /> </LinearLayout> </LinearLayout> </android.support.v4.widget.NestedScrollView> </LinearLayout>
simple_spinner_dropdown_item.xml <?xml version="1.0" encoding="utf-8"?> <CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:ellipsize="marquee" android:gravity="center_vertical" android:paddingLeft="@dimen/spacing_large" android:paddingRight="@dimen/letter_tile_size" android:singleLine="true" android:text="asdasdasd" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" /> simple_spinner_item.xml <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:ellipsize="marquee" android:gravity="center_vertical" android:singleLine="true" android:text="asdasdasd" android:textAlignment="inherit" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" />
toolbar.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:contentInsetStartWithNavigation="0dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
6. Values
array.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="timezone"> <item>Pacific Standard Time</item> <item>ASEAN Common Time</item> <item>Atlantic Standard Time</item> <item>China Standard Time</item> <item>Eastern Standard Time </item> <item>Greenwich Mean Time</item> <item>Iran Standard Time</item> <item>Middle European Time</item> <item>Malaysia Time</item> <item>Western European Time</item> </string-array> </resources>
colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#1976D2</color> <color name="colorPrimaryDark">#1565C0</color> <color name="colorPrimaryLight">#1E88E5</color> <color name="colorAccent">#FF4081</color> <color name="colorAccentDark">#F50057</color> <color name="colorAccentLight">#FF80AB</color> <color name="light_green_600">#7CB342</color> <color name="overlay_light_80">#CCFFFFFF</color> <color name="grey_10">#e6e6e6</color> <color name="grey_20">#cccccc</color> <color name="grey_40">#999999</color> <color name="grey_60">#666666</color> <color name="grey_80">#37474F</color> <color name="grey_90">#263238</color> </resources>
dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="actionBarSize">56dp</dimen> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name="nav_header_vertical_spacing">16dp</dimen> <dimen name="nav_header_height">200dp</dimen> <dimen name="fab_margin">16dp</dimen> <dimen name="viewpager_margin_overlap">-60dp</dimen> <dimen name="viewpager_margin_overlap_payment">-30dp</dimen> <!--genaral spacing--> <dimen name="spacing_xsmall">2dp</dimen> <dimen name="spacing_small">3dp</dimen> <dimen name="spacing_medium">5dp</dimen> <dimen name="spacing_xmedium">7dp</dimen> <dimen name="spacing_middle">10dp</dimen> <dimen name="spacing_large">15dp</dimen> <dimen name="spacing_smlarge">18dp</dimen> <dimen name="spacing_mlarge">20dp</dimen> <dimen name="spacing_mxlarge">25dp</dimen> <dimen name="spacing_xlarge">35dp</dimen> <dimen name="spacing_xmlarge">40dp</dimen> <dimen name="spacing_xxlarge">50dp</dimen> <dimen name="spacing_xxxlarge">55dp</dimen> <dimen name="appbar_padding_top">8dp</dimen> <dimen name="letter_tile_size">32dp</dimen> </resources>
strings.xml <resources> <string name="app_name">Dialog Fullscreen</string> <string name="middle_lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur ipsum in placerat molestie. Fusce quis mauris a enim sollicitudin</string> <string name="AGREE">AGREE</string> <string name="DISAGREE">DISAGREE</string> <string name="DISCARD">DISCARD</string> <string name="CANCEL">CANCEL</string> <string name="OK">OK</string> <string name="SAVE">SAVE</string> </resources>
styles.xml <resources> <style name="AppTheme" parent="BaseTheme" /> <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="windowActionModeOverlay">true</item> </style> <style name="Button.Accent" parent="@style/Widget.AppCompat.Button.Colored"> <item name="colorButtonNormal">@color/colorAccent</item> <item name="android:textColor">@android:color/white</item> </style> </resources>