Android Create popup Dialog Header
1. Project Structure
2. Gradle
plugins {
id 'com.android.application'
}
android {
compileSdkVersion 30
buildToolsVersion "30.0.3"
defaultConfig {
applicationId "com.example.header"
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 '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.header;
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.AppCompatButton;
import androidx.appcompat.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.Toast;
import com.example.header.R;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
((Button) findViewById(R.id.dialog_header_polygon)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogPolygon();
}
});
((Button) findViewById(R.id.dialog_header_blue)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogProductBlue();
}
});
((Button) findViewById(R.id.dialog_header_yellow)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogProductYellow();
}
});
((Button) findViewById(R.id.dialog_header_news)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogProductNews();
}
});
}
private void showDialogPolygon() {
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before
dialog.setContentView(R.layout.dialog_header_polygon);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setCancelable(true);
((Button) dialog.findViewById(R.id.bt_join)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Button Join Clicked", Toast.LENGTH_SHORT).show();
}
});
((Button) dialog.findViewById(R.id.bt_decline)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Button Decline Clicked", Toast.LENGTH_SHORT).show();
}
});
dialog.show();
}
private void showDialogProductBlue() {
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before
dialog.setContentView(R.layout.dialog_product_blue);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setCancelable(true);
dialog.show();
}
private void showDialogProductYellow() {
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before
dialog.setContentView(R.layout.dialog_product_yellow);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setCancelable(true);
dialog.show();
}
private void showDialogProductNews() {
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before
dialog.setContentView(R.layout.dialog_header_news);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setCancelable(true);
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_header_polygon"
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="HEADER POLYGON"
android:textColor="@color/white" />
<Button
android:id="@+id/dialog_header_blue"
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="HEADER PRODUCT BLUE"
android:textColor="@color/white" />
<Button
android:id="@+id/dialog_header_yellow"
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="HEADER PRODUCT YELLOW"
android:textColor="@color/white" />
<Button
android:id="@+id/dialog_header_news"
android:layout_width="match_parent"
style="@style/Button.Primary.Borderless"
android:layout_height="@dimen/spacing_xxlarge"
android:background="@drawable/btn_rounded_grey_outline"
android:text="HEADER PRODUCT NEWS"
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="@android:color/white"
app:cardCornerRadius="@dimen/spacing_xsmall"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="330dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/image_30" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/overlay_light_30" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/spacing_mlarge">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/medium_lorem_ipsum"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
android:textColor="@color/grey_90"
app:fontFamily="sans-serif-medium" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="@dimen/spacing_mlarge"
android:layout_marginRight="@dimen/spacing_mlarge"
android:background="@color/grey_10" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/spacing_xxlarge"
android:layout_margin="@dimen/spacing_medium"
android:gravity="center_vertical"
android:orientation="horizontal">
<View
android:layout_width="@dimen/spacing_large"
android:layout_height="0dp" />
<ImageView
android:layout_width="@dimen/spacing_smlarge"
android:layout_height="@dimen/spacing_smlarge"
android:tint="@color/red_300"
app:srcCompat="@drawable/ic_favorites" />
<View
android:layout_width="@dimen/spacing_middle"
android:layout_height="0dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.4k peoples like this news"
android:textAppearance="@style/TextAppearance.AppCompat.Small"
android:textColor="@color/grey_60" />
</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="@dimen/spacing_xmedium"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="280dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="220dp"
android:scaleType="centerCrop"
android:src="@drawable/bg_polygon" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/spacing_large">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:text="Invitation"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/grey_90" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_medium"
android:fontFamily="sans-serif-light"
android:text="@string/medium_lorem_ipsum"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
android:textColor="@color/grey_60" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/spacing_medium"
android:gravity="end"
android:orientation="horizontal">
<Button
android:id="@+id/bt_decline"
style="@style/Button.Primary.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="DECILNE"
android:textColor="@color/colorAccent" />
<Button
android:id="@+id/bt_join"
style="@style/Button.Primary.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="JOIN"
android:textColor="@color/colorPrimary" />
</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="@dimen/spacing_xmedium"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="280dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/img_plant_2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/spacing_large">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Maecenas Quis"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/grey_90"
app:fontFamily="sans-serif-medium" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="$9.20"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
android:textColor="@color/green_500"
app:fontFamily="sans-serif-medium" />
</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:layout_margin="@dimen/spacing_medium"
android:gravity="end"
android:orientation="horizontal">
<ImageButton
android:layout_width="@dimen/spacing_xlarge"
android:layout_height="@dimen/spacing_xlarge"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/blue_400"
app:srcCompat="@drawable/ic_favorites" />
<View
android:layout_width="@dimen/spacing_middle"
android:layout_height="0dp" />
<ImageButton
android:layout_width="@dimen/spacing_xlarge"
android:layout_height="@dimen/spacing_xlarge"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/blue_400"
app:srcCompat="@drawable/ic_add_box" />
<View
android:layout_width="@dimen/spacing_middle"
android:layout_height="0dp" />
</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="@dimen/spacing_xmedium"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="280dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="220dp"
android:scaleType="centerCrop"
android:src="@drawable/img_plant_1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="@dimen/spacing_large">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Maecenas Quis"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/grey_80"
app:fontFamily="sans-serif-medium" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="$9.20"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
android:textColor="@color/orange_500"
app:fontFamily="sans-serif-medium" />
</LinearLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackgroundBorderless"
android:tint="@color/orange_500"
app:srcCompat="@drawable/ic_favorites" />
</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_40">#999999</color>
<color name="overlay_light_30">#4DFFFFFF</color>
<color name="grey_90">#263238</color>
<color name="grey_10">#e6e6e6</color>
<color name="grey_60">#666666</color>
<color name="red_300">#E57373</color>
<color name="grey_80">#37474F</color>
<color name="orange_500">#FF9800</color>
<color name="blue_400">#42A5F5</color>
<color name="green_500">#4CAF50</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">Header</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.Header" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/colorPrimary</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>
