Question Detail

How can I create a customize dialog box where is an ImageView, TextView, and EditText?
Is there any Easy way to develop this type of dialogbox ?
Image result for customize dialogbox android


Thread Reply

Hemant Sharma

- 1 years ago

Creating a custom layout for dialog

Here in this example, we are creating a simple layout with an ImgeView, TextView and a Button. You may like to add your own layout with different UI widgets you need with your custom styles.

custom_dialog_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:contentDescription="@drawable/ic_pen"
        android:src="@drawable/ic_launcher" />

    <EditText android:id="@+id/edittext" 
        android:layout_width="match_parent" 
        android:layout_height="35dp"
android:inputType="textMultiLine"
android:lines="3"  />

    <Button
        android:id="@+id/button_btn"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/image"
        android:layout_centerHorizontal="true"
        android:text="Dismiss" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_above="@+id/button"
        android:layout_toRightOf="@+id/image"
        android:gravity="center_vertical"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Attaching layout to dialog instance

Now, let us go back to our activity and create an instance of Dialog. We can attach our custom layout to the Dialog by using setContentView() method call.

package com.javatechig;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {
	private Button button;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		button = (Button) findViewById(R.id.button_btn);
		button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View view) {
				final Dialog dialog = new Dialog(MainActivity.this);

				//setting custom layout to dialog
				dialog.setContentView(R.layout.cusotm_dialog_layout);
				dialog.setTitle("Custom Dialog");

				//adding text dynamically
				TextView txt = (TextView) dialog.findViewById(R.id.textView);
				txt.setText("Put your dialog text here.");

				ImageView image = (ImageView)dialog.findViewById(R.id.image);
				image.setImageDrawable(getResources().getDrawable(android.R.drawable.ic_dialog_info));

				//adding button click event
				Button dismissButton = (Button) dialog.findViewById(R.id.button);
				dismissButton.setOnClickListener(new OnClickListener() {
					@Override
					public void onClick(View v) {
						dialog.dismiss();
					}
				});
				dialog.show();
			}
		});
	}
}

Hemant Sharma

- 1 years ago

Creating a custom layout for dialog

Here in this example, we are creating a simple layout with an ImgeView, TextView and a Button. You may like to add your own layout with different UI widgets you need with your custom styles.

custom_dialog_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:contentDescription="@drawable/ic_pen"
        android:src="@drawable/ic_launcher" />

    <EditText android:id="@+id/edittext" 
        android:layout_width="match_parent" 
        android:layout_height="35dp"
android:inputType="textMultiLine"
android:lines="3"  />

    <Button
        android:id="@+id/button_btn"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/image"
        android:layout_centerHorizontal="true"
        android:text="Dismiss" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_above="@+id/button"
        android:layout_toRightOf="@+id/image"
        android:gravity="center_vertical"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Attaching layout to dialog instance

Now, let us go back to our activity and create an instance of Dialog. We can attach our custom layout to the Dialog by using setContentView() method call.

package com.javatechig;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {
	private Button button;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		button = (Button) findViewById(R.id.button_btn);
		button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View view) {
				final Dialog dialog = new Dialog(MainActivity.this);

				//setting custom layout to dialog
				dialog.setContentView(R.layout.cusotm_dialog_layout);
				dialog.setTitle("Custom Dialog");

				//adding text dynamically
				TextView txt = (TextView) dialog.findViewById(R.id.textView);
				txt.setText("Put your dialog text here.");

				ImageView image = (ImageView)dialog.findViewById(R.id.image);
				image.setImageDrawable(getResources().getDrawable(android.R.drawable.ic_dialog_info));

				//adding button click event
				Button dismissButton = (Button) dialog.findViewById(R.id.button);
				dismissButton.setOnClickListener(new OnClickListener() {
					@Override
					public void onClick(View v) {
						dialog.dismiss();
					}
				});
				dialog.show();
			}
		});
	}
}

Anonymous

- 4 months ago

To create A beautiful Dialog Box for your Android App.

First of all, we have to create a Custome Dialog Class to Create custom DIalog

  BaseDialog.java

 

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;


public abstract class BaseDialog extends Dialog {

    protected Context context;
    protected DisplayMetrics dm;
    protected float widthScale = 1;

    protected AnimatorSet enterAnim;
    protected AnimatorSet exitAnim;

    protected int width;

    public BaseDialog(Context context) {
        super(context, R.style.DialogTransparent);
        this.context = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getContentViewId() <= 0) {
            throw new RuntimeException("layout resId undefind");
        }
        setContentView(getContentViewId());
        dm = context.getResources().getDisplayMetrics();
        init();
    }

    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
        Window window = getWindow();

        widthScale = setWidthScale();
        if (widthScale == 0) {
            width = ViewGroup.LayoutParams.WRAP_CONTENT;
        } else {
            width = (int) (dm.widthPixels * widthScale);
        }

        WindowManager.LayoutParams layoutParams = window.getAttributes();
        layoutParams.width = width;
        window.setAttributes(layoutParams);
        enterAnim = setEnterAnim();
        if (enterAnim != null) {
            enterAnim.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) { }
                @Override
                public void onAnimationEnd(Animator animation) { }
                @Override
                public void onAnimationCancel(Animator animation) {
                    superDismiss();
                }
                @Override
                public void onAnimationRepeat(Animator animation) { }
            });
            enterAnim.start();
        }
    }

    @Override
    public void dismiss() {
        exitAnim = setExitAnim();
        if (exitAnim == null) {
            superDismiss();
            return;
        }
        exitAnim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                superDismiss();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                superDismiss();
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        exitAnim.start();
    }

    public void superDismiss() {
        super.dismiss();
    }

    protected abstract float setWidthScale();

    protected abstract AnimatorSet setEnterAnim();

    protected abstract AnimatorSet setExitAnim();

    protected abstract void init();

    protected abstract int getContentViewId();
}

 

Add Dialog Style in your Style.XML file

R.style.DialogTransparent

<!-- Base application theme. -->
<style name="AppTheme" 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="android:windowActionBar">false</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <!--<item name="android:windowIsTranslucent">true</item>-->
    <item name="android:windowBackground">@color/white</item>
    <!-- Remove shadow below action bar Android < 5.0 -->
    <item name="android:windowContentOverlay">@null</item>
    <!-- Support library compatibility -->
    <item name="elevation">0dp</item>
    <item name="android:actionMenuTextColor">@android:color/white</item>
</style>

<style name="DialogTransparent" parent="@android:style/Theme.Dialog">
    <!-- Background color and transparency  -->
    <item name="android:windowBackground">@android:color/transparent</item>
    <!--  Is there a title?  -->
    <item name="android:windowNoTitle">true</item>
    <!--  Whether it is above the activity  -->
    <item name="android:windowIsFloating">true</item>
    <!-- Whether it is fuzzy  -->
    <item name="android:backgroundDimEnabled">true</item>
    <!--full screen-->
    <item name="android:windowFullscreen">true</item>
    <!--Activity switching animation-->
    <!--<item name="android:windowAnimationStyle">@style/AnimationDialogActivity</item>-->
    <item name="android:backgroundDimAmount">0.4</item>
    <item name="android:windowCloseOnTouchOutside">false</item>
</style>

 

According to requirement add UI DialogPermission.java

import android.animation.AnimatorSet;
import android.content.Context;
import android.view.View;
import android.widget.TextView;


public class DialogPermission extends BaseDialog {

    private TextView mBtnPermission;
    private onClickListener mOnClickListener;

    public DialogPermission(Context context) {
        super(context);
    }

    @Override
    protected float setWidthScale() {
        return 0.9f;
    }

    @Override
    protected AnimatorSet setEnterAnim() {
        return null;
    }

    @Override
    protected AnimatorSet setExitAnim() {
        return null;
    }

    @Override
    protected void init() {
        mBtnPermission = (TextView) findViewById(R.id.btn_permission);
        mBtnPermission.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mOnClickListener != null) {
                    dismiss();
                    mOnClickListener.onClick();
                }
            }
        });
    }
    public void setOnClickListener(onClickListener onClickListener) {
        mOnClickListener = onClickListener;
    }
    public interface onClickListener {
        void onClick();
    }
    @Override
    protected int getContentViewId() {
        return R.layout.dialog_permission;
    }
}

 

Now create Custome Dialog UI in 
dialog_permission.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="wrap_content"
              android:background="@color/white"
              android:orientation="vertical"
              android:paddingLeft="16dp"
              android:paddingRight="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:gravity="center"
        android:text="Prompt"/>

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_system_error"
    android:layout_margin="10dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_horizontal"
        android:text="@string/dialog_tip"/>

    <TextView
        android:id="@+id/btn_permission"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/bg_btn_blue"
        android:gravity="center"
        android:text="Go to get"
        android:textColor="@color/white"/>
</LinearLayout>

 

Button background  @drawable/bg_btn_blue

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_enabled="true">
        <shape>
            <solid android:color="#2994ec" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item android:state_pressed="false" android:state_enabled="true">
        <shape>
            <solid android:color="#2c9ffe" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape>
            <solid android:color="#4d1f90f9" />
            <corners android:radius="5dp" />
        </shape>
    </item>
</selector>

 

 

Beautiful Customize DialogBox is ready to use now. Where you want to show the Customize Dialog Follow below Code

DialogPermission customizeDialog = new DialogPermission(MainActivity.this);
customizeDialog.show();
customizeDialog.setOnClickListener(new DialogPermission.onClickListener() {
    @Override
    public void onClick() {
        //...........DO WHAT YOU WNAT TO DO ON BUTTON CLICK..................
    }
});