How to create a dialog like this in Android?
My idea is to create a custom xml view and inflate it into the dialog.
any other suggestions?
and what is the "drag line" at the middle of the dialog called? I really need that.
Thanks in advance
Try below code for your reference:
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/buttonShowCustomDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Custom Dialog" />
</LinearLayout>
dialog.xml: Make design whatever you want in dialog.
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp" />
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_toRightOf="#+id/image"/>/>
<Button
android:id="#+id/dialogButtonOK"
android:layout_width="100px"
android:layout_height="wrap_content"
android:text=" Ok "
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/image"
/>
</RelativeLayout>
MainActivity:
public class MainActivity extends Activity {
final Context context = this;
private Button button;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
button = (Button) findViewById(R.id.buttonShowCustomDialog);
// add button listener
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
// custom dialog
final Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.dialog);
dialog.setTitle("Title...");
// set the custom dialog components - text, image and button
TextView text = (TextView) dialog.findViewById(R.id.text);
text.setText("Android custom dialog example!");
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.ic_launcher);
Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
// if button is clicked, close the custom dialog
dialogButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
});
}
}
Create Alert Dialog and Inflate Custom Layout and set layout to your Alert Dialog.
Here is the link for some demo examples for reference
http://examples.javacodegeeks.com/android/core/ui/dialog/android-custom-dialog-example/
http://www.mkyong.com/android/android-custom-dialog-example/
and drag line is called as Progress Bar/Seek Bar in android. You can add this into your layout and handle it's progress.
I think this is the standard dialog for android if you are using the Holo theme. You just need to use the holo theme for your application and it should work.
Add this to your application tag in your manifest file
android:theme="#android:style/Theme.Holo"
Related
I am just trying to build a alertdialog for my android application.
what I actually want is a dialog box like this:
whose positive and negative button are filled across dialog box
but I always get something like this:
and these two buttons stick together at the right corner of dialog box
can anybody tell me what to do to change the alertdialog from the second one to first one?
many thanks
For that You need to create custom dilogbox Like this
Dialog 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="50dp"
android:layout_height="50dp"
android:contentDescription="#drawable/ic_launcher"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button"
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>
And In your Activity :
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();
You can set customized layout to alert dialog by using setView(view) method like this:
AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(this);
LayoutInflater inflater = this.getLayoutInflater();
View dialogView = inflater.inflate(R.layout.alert_layout, null);
dialogBuilder.setView(dialogView);
AlertDialog alertDialog = dialogBuilder.create();
alertDialog.show();
For example, say I have a layout file that is a relative layout and has many buttons and text fields etc etc, and the background is transparent.
Is it possible to use this file as the content for a alert dialog (or some sort of pop up) so when I create the dialog, the layout contents will show? Also, I want the background to still be shown, that is why I've declared the layout file's background as transparent.
Is this possible to implement, if so, how can I do it?
You can do it easily:
Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.custom_dlg);
dialog.setTitle("Custom dialog");
And you are done. You can refer this tutorial for more details.
Yes you can create custom dialogs in android. below is the code snippet you would need to do this.
Custom dialog xml file: custom.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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp" />
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_toRightOf="#+id/image"/>/>
<Button
android:id="#+id/dialogButtonOK"
android:layout_width="100px"
android:layout_height="wrap_content"
android:text=" Ok "
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/image"
/>
</RelativeLayout>
Simple main activity xml with a button: main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/buttonShowCustomDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Custom Dialog" />
</LinearLayout>
And once you have set this up in your MainActivity.java file you can click the button and popup the custom dialog as following,
In your MainActivity.java file
public void onClick(View arg0) {
// custom dialog
final Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.custom);
dialog.setTitle("Title...");
// set the custom dialog components - text, image and button
TextView text = (TextView) dialog.findViewById(R.id.text);
text.setText("Android custom dialog example!");
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.ic_launcher);
Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
// if button is clicked, close the custom dialog
dialogButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
});
I have created a fixed size dialog in my application. While i tested with a phone of 240x320 pixel size, it shows perfect. But it shows not proper in a tablet. see the images below
image from phone
image from tab
i tried with below code
public void showDialog(){
// Create custom dialog object
final Dialog dialog = new Dialog(MainActivity.this);
// Include dialog.xml file
dialog.setContentView(R.layout.dialog);
// Set dialog title
dialog.setTitle("Custom Dialog");
// set values for custom dialog components - text, image and button
TextView text = (TextView) dialog.findViewById(R.id.textDialog);
text.setText("Custom dialog Android example.");
ImageView image = (ImageView) dialog.findViewById(R.id.imageDialog);
image.setImageResource(R.drawable.ic_launcher);
dialog.show();
dialog.getWindow().setLayout(180, 150);
Button declineButton = (Button) dialog.findViewById(R.id.declineButton);
// if decline button is clicked, close the custom dialog
declineButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// Close dialog
dialog.dismiss();
}
});
}
dialog.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/imageDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="6dp" />
<TextView
android:id="#+id/textDialog"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_toRightOf="#+id/imageDialog"/>
<Button
android:id="#+id/declineButton"
android:layout_width="100px"
android:layout_height="wrap_content"
android:text=" Submit "
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/textDialog"
android:layout_toRightOf="#+id/imageDialog"
/>
</RelativeLayout>
how to solve this ?
thank in advance
Finally i found the solution
I removed the lines dialog.setTitle("Custom Dialog"); and dialog.getWindow().setLayout(180, 150); lines and added dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
Corrected code as follow
public void showDialog(){
// Create custom dialog object
final Dialog dialog = new Dialog(MainActivity.this);
// Include dialog.xml file
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dialog);
// set values for custom dialog components - text, image and button
TextView text = (TextView) dialog.findViewById(R.id.textDialog);
text.setText("Custom dialog Android example.");
ImageView image = (ImageView) dialog.findViewById(R.id.imageDialog);
image.setImageResource(R.drawable.ic_launcher);
dialog.show();
Button declineButton = (Button) dialog.findViewById(R.id.declineButton);
// if decline button is clicked, close the custom dialog
declineButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// Close dialog
dialog.dismiss();
}
});
}
I made another change in layout file. Replaced to and lines android:layout_width="fill_parent" android:layout_height="fill_parent" to android:layout_width="180dp" android:layout_height="150dp"
Corrected layout as follows
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="180dp"
android:layout_height="150dp" >
<ImageView
android:id="#+id/imageDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="6dp" />
<TextView
android:id="#+id/textDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFF" />
<Button
android:id="#+id/declineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Submit "
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
/>
</LinearLayout>
I want my imagebutton to open (not an activity) but something like a new xml layout or something of the sort. I want the users to be able to press the button and when they do so, it then opens and the users can see text and pictures of information about what thay clicked. I would like ten image buttons on one single activity. Or is there an alternative method to acheive this?
You can use a customized dialog here there's an example. http://www.helloandroid.com/tutorials/how-display-custom-dialog-your-android-application
Imagine this is your main layout, which contains a button:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button android:id="#+id/btn"
android:text="Press me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
And your activity is something like that:
public class MainActivity extends Activity {
/** Called when the activity is first created. */
Dialog dialog;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
dialog = new Dialog(this);
dialog.setContentView(R.layout.customizeddialog);
dialog.setTitle("This is my custom dialog box");
dialog.setCancelable(true);
Button b=(Button)findViewById(R.id.btn);
b.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
dialog.show();
}
});
}
}
Each time a user clicks the button "Press me!" the activity will display a dialog, this dialog contains the information you need, in this case an image and a text the customized dialog looks like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This icon means.." >
</TextView>
So you are showing a new layout, each time a user clicks your button/imagebutton in the same activity.
i am using a layout file for showing a dialog. My xml file is
<?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:orientation="vertical">
<EditText android:id="#+id/dialogEditText" android:text="Enter Your Text Here" android:layout_height="wrap_content" android:layout_width="match_parent"></EditText>
<DatePicker android:id="#+id/datPicker" android:layout_height="wrap_content" android:layout_width="match_parent" ></DatePicker>
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
<Button android:text="Add" android:id="#+id/dialogAddBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true"></Button>
<Button android:text="Cancel" android:id="#+id/dialogCancelBtn" android:layout_width="200px" android:layout_height="wrap_content" android:layout_centerHorizontal="true"></Button>
</LinearLayout>
</LinearLayout>
I want to do something when user clicks on "OK" or Cancel button . So i have created anonymous handlers for those button. My Coding is
LayoutInflater inflater = LayoutInflater.from(obj);
View inflatedView1= inflater.inflate(R.layout.dialog_view,null);
final Dialog d= new Dialog(obj);
final Window window= d.getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND, WindowManager.LayoutParams.FLAG_BLUR_BEHIND);
window.setTitle("Add Item");
window.setContentView(R.layout.dialog_view);
final EditText input= (EditText) inflatedView1.findViewById(R.id.dialogEditText);
Button okBtn= (Button)inflatedView1.findViewById(R.id.dialogAddBtn);
okBtn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast msg= Toast.makeText(obj.getApplicationContext(),"Hello",Toast.LENGTH_LONG);
msg.show();
}
});
Button cancelBtn= (Button) inflatedView1.findViewById(R.id.dialogCancelBtn);
cancelBtn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
d.dismiss();
}
});
d.show();
When i am clicking on "Ok" or "Cancel button" nothing is happening. I am not able to understand why this is happening.
Please suggest me some solution.
you are setting the event handlers on your inflated view but at the same setting the content view to your plain layout:
window.setContentView(R.layout.dialog_view);
Just change this line to
window.setContentView(inflatedView1);
Or, perhaps a better approach without using the layout inflater would be to use
d.setContentView(R.layout.dialog_view);
And then setting the event handlers via
Button okBtn = (Button) d.findViewById(R.id.dialogAddBtn);
okBtn.setOnClickListener(...
Michael