Android Create popup Dialog Header

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>