Android Create popup Dialog Contact Us
1. Project Structure
2. Gradle
plugins { id 'com.android.application' } android { compileSdkVersion 30 buildToolsVersion "30.0.3" defaultConfig { applicationId "com.example.contactus" minSdkVersion 19 targetSdkVersion 30 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { implementation 'com.balysv:material-ripple:1.0.2' // ripple effect implementation 'com.mikhaellopez:circularimageview:4.3.0' implementation 'androidx.appcompat:appcompat:1.3.1' implementation 'com.google.android.material:material:1.4.0' implementation 'androidx.constraintlayout:constraintlayout:2.1.0' testImplementation 'junit:junit:4.+' androidTestImplementation 'androidx.test.ext:junit:1.1.3' androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0' }
3. Main Activity
package com.example.contactus; import android.app.Dialog; import android.graphics.PorterDuff; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.Window; import android.widget.Toast; import com.example.contactus.R; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); (findViewById(R.id.dialog_contact_project)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialogProject(); } }); (findViewById(R.id.dialog_contact_designer)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialogDesigner(); } }); (findViewById(R.id.dialog_contact_dark)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialogDark(); } }); (findViewById(R.id.dialog_contact_image)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialogImage(); } }); } private void showDialogProject() { final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before dialog.setContentView(R.layout.dialog_contact_project); dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); dialog.setCancelable(true); (dialog.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } private void showDialogDesigner() { final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before dialog.setContentView(R.layout.dialog_contact_designer); dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); dialog.setCancelable(true); (dialog.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } private void showDialogDark() { final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before dialog.setContentView(R.layout.dialog_contact); dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); dialog.setCancelable(true); (dialog.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } private void showDialogImage() { final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before dialog.setContentView(R.layout.dialog_contact_image); dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); dialog.setCancelable(true); (dialog.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } }
4. Layout
<?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"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" android:paddingLeft="@dimen/spacing_xlarge" android:paddingRight="@dimen/spacing_xlarge"> <Button android:id="@+id/dialog_contact_project" style="@style/Button.Primary.Borderless" android:layout_width="match_parent" android:layout_height="@dimen/spacing_xxlarge" android:background="@drawable/btn_rounded_grey_outline" android:text="PROJECT" android:textColor="@color/white" /> <Button android:id="@+id/dialog_contact_designer" style="@style/Button.Primary.Borderless" android:layout_width="match_parent" android:layout_height="@dimen/spacing_xxlarge" android:background="@drawable/btn_rounded_grey_outline" android:text="DESIGNER" android:textColor="@color/white" /> <Button android:id="@+id/dialog_contact_dark" style="@style/Button.Primary.Borderless" android:layout_width="match_parent" android:layout_height="@dimen/spacing_xxlarge" android:background="@drawable/btn_rounded_grey_outline" android:text="DARK" android:textColor="@color/white" /> <Button android:id="@+id/dialog_contact_image" style="@style/Button.Primary.Borderless" android:layout_width="match_parent" android:layout_height="@dimen/spacing_xxlarge" android:background="@drawable/btn_rounded_grey_outline" android:text="IMAGE" android:textColor="@color/white" /> </LinearLayout> </RelativeLayout> </LinearLayout> <?xml version="1.0" encoding="utf-8"?> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardBackgroundColor="@color/grey_90" app:cardCornerRadius="8dp" app:cardElevation="3dp" app:cardUseCompatPadding="true"> <LinearLayout android:layout_width="300dp" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:orientation="horizontal"> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1" /> <ImageButton android:id="@+id/bt_close" android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@color/light_green_800" app:srcCompat="@drawable/ic_close" /> </LinearLayout> <View android:layout_width="0dp" android:layout_height="20dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:padding="@dimen/spacing_mlarge"> <com.mikhaellopez.circularimageview.CircularImageView android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/photo_female_4" app:civ_border="true" app:civ_border_color="@color/grey_10" app:civ_border_width="0dp" app:civ_shadow="true" app:civ_shadow_radius="0dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_large" android:text="Mary Jackson" android:textAppearance="@style/TextAppearance.AppCompat.Headline" android:textColor="@android:color/white" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="UI UX Designer" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_xlarge" android:gravity="center" android:text="@string/medium_lorem_ipsum" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_40" /> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_large" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/light_green_800" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:padding="@dimen/spacing_middle"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Check my social media" android:textColor="@color/overlay_light_40" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_middle" android:layout_marginBottom="@dimen/spacing_middle" android:gravity="center" android:orientation="horizontal"> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:tint="@color/light_green_800" app:srcCompat="@drawable/ic_social_twitter" /> <View android:layout_width="30dp" android:layout_height="0dp" /> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:tint="@color/light_green_800" app:srcCompat="@drawable/ic_social_facebook" /> <View android:layout_width="30dp" android:layout_height="0dp" /> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:tint="@color/light_green_800" app:srcCompat="@drawable/ic_social_instagram" /> </LinearLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <?xml version="1.0" encoding="utf-8"?> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardBackgroundColor="@android:color/white" app:cardCornerRadius="8dp" app:cardElevation="3dp" app:cardUseCompatPadding="true"> <LinearLayout android:layout_width="300dp" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:orientation="horizontal"> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1" /> <ImageButton android:id="@+id/bt_close" android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@color/blue_900" app:srcCompat="@drawable/ic_close" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/grey_5" /> <View android:layout_width="0dp" android:layout_height="20dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/spacing_mlarge"> <com.mikhaellopez.circularimageview.CircularImageView android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/photo_male_6" app:civ_border="true" app:civ_border_color="@color/grey_10" app:civ_border_width="0dp" app:civ_shadow="true" app:civ_shadow_radius="0dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_large" android:text="Evans Collins" android:textAppearance="@style/TextAppearance.AppCompat.Headline" android:textColor="@color/grey_80" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Product Designer" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_xlarge" android:text="@string/medium_lorem_ipsum" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_40" /> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_large" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/blue_900" android:gravity="center" android:orientation="vertical" android:padding="@dimen/spacing_middle"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Check my social media" android:textColor="@color/overlay_light_40" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_middle" android:layout_marginBottom="@dimen/spacing_middle" android:gravity="center" android:orientation="horizontal"> <ImageView android:layout_width="20dp" android:layout_height="20dp" app:srcCompat="@drawable/ic_social_twitter" /> <View android:layout_width="30dp" android:layout_height="0dp" /> <ImageView android:layout_width="20dp" android:layout_height="20dp" app:srcCompat="@drawable/ic_social_facebook" /> <View android:layout_width="30dp" android:layout_height="0dp" /> <ImageView android:layout_width="20dp" android:layout_height="20dp" app:srcCompat="@drawable/ic_social_instagram" /> </LinearLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <?xml version="1.0" encoding="utf-8"?> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="400dp" app:cardCornerRadius="5dp" app:cardElevation="3dp" app:cardUseCompatPadding="true"> <RelativeLayout android:layout_width="280dp" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/photo_male_2" /> <View android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlay_dark_40" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/spacing_middle"> <LinearLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:orientation="horizontal"> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1" /> <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_apps" /> </LinearLayout> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="end" android:orientation="vertical" android:padding="@dimen/spacing_mlarge"> <com.mikhaellopez.circularimageview.CircularImageView android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/photo_male_2" app:civ_border="true" app:civ_border_color="@color/grey_20" app:civ_border_width="2dp" app:civ_shadow="true" app:civ_shadow_radius="0dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_large" android:text="Adams Green" android:textAppearance="@style/TextAppearance.AppCompat.Headline" android:textColor="@android:color/white" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Freelance Designer" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_large" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_middle" android:layout_marginBottom="@dimen/spacing_middle" android:gravity="center" android:orientation="horizontal"> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:tint="@android:color/white" app:srcCompat="@drawable/ic_social_twitter" /> <View android:layout_width="30dp" android:layout_height="0dp" /> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:tint="@android:color/white" app:srcCompat="@drawable/ic_social_instagram" /> <View android:layout_width="30dp" android:layout_height="0dp" /> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:tint="@android:color/white" app:srcCompat="@drawable/ic_social_facebook" /> </LinearLayout> </LinearLayout> </LinearLayout> </RelativeLayout> </androidx.cardview.widget.CardView> <?xml version="1.0" encoding="utf-8"?> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardBackgroundColor="@android:color/white" app:cardCornerRadius="@dimen/spacing_medium" app:cardElevation="3dp" app:cardUseCompatPadding="true"> <LinearLayout android:layout_width="300dp" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/spacing_large"> <LinearLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" 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="@color/green_600" app:srcCompat="@drawable/ic_arrow_back" /> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> <View android:layout_width="0dp" android:layout_height="60dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/spacing_mlarge"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_large" android:text="Get in touch if you need help with a project" android:textAppearance="@style/TextAppearance.AppCompat.Headline" android:textColor="@color/grey_80" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_xxlarge" android:text="California" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_medium" android:text="4023 Glendale Avenue" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_medium" android:text="Northridge" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_xlarge" android:orientation="horizontal"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="best@company.com" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_medium" android:text="0818-725-8539" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/grey_40" /> </LinearLayout> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:tint="@android:color/white" app:backgroundTint="@color/green_600" app:elevation="0dp" app:fabSize="mini" app:rippleColor="@android:color/white" app:srcCompat="@drawable/ic_email" /> <View android:layout_width="@dimen/spacing_middle" android:layout_height="0dp" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:tint="@android:color/white" app:backgroundTint="@color/green_600" app:elevation="0dp" app:fabSize="mini" app:rippleColor="@android:color/white" app:srcCompat="@drawable/ic_phone" /> </LinearLayout> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_large" /> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView>
5. Values
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="purple_200">#FFBB86FC</color> <color name="purple_500">#FF6200EE</color> <color name="purple_700">#FF3700B3</color> <color name="teal_200">#FF03DAC5</color> <color name="teal_700">#FF018786</color> <color name="black">#FF000000</color> <color name="white">#FFFFFFFF</color> <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="grey_10">#e6e6e6</color> <color name="grey_40">#999999</color> <color name="green_600">#43A047</color> <color name="grey_80">#37474F</color> <color name="grey_5">#f2f2f2</color> <color name="blue_900">#0D47A1</color> <color name="overlay_light_40">#66FFFFFF</color> <color name="grey_20">#cccccc</color> <color name="overlay_dark_40">#66000000</color> <color name="light_green_800">#558B2F</color> <color name="grey_90">#263238</color> </resources> <?xml version="1.0" encoding="utf-8"?> <resources> <!--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> </resources> <resources> <string name="app_name">Contact Us</string> <string name="medium_lorem_ipsum">Quisque imperdiet nunc at massa dictum volutpat. Etiam id orci ipsum. Integer id ex dignissim</string> </resources> <resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.ContactUs" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_700</item> <item name="colorOnSecondary">@color/black</item> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> </style> <style name="Button.Primary.Borderless" parent="@style/Widget.AppCompat.Button.Borderless.Colored"> <item name="android:textColor">@color/colorPrimary</item> </style> </resources>