LAB 1 – Creating custom dialog boxes in Android Studio – Software Development for Connected

Devices 2.2
Step 1: Open the list of colors. Add those that are missing to the xml file according to the code
below:

Step 2: Create a new drawable resource file inside the drawable folder and write the following code:

Step 3: Create a new drawable resource file inside the drawable folder and write the following code:
Step 4: Copy and paste the previous one but calling the warning parameter(s), like this:

Step 5: Copy and paste the previous one but calling the error parameter(s). It should look like this:

Step 6: Now let’s make the design for the buttons! Create a new drawable resource file to make the
“success” button, like this:
Step 7: Copy and paste the same to create the design of “neutral”, “warning” and “error” buttons
(one file for each, as you did previously for the background).

Step 8: Now it is time to create a vector asset, a drawable to be used together with the previous
designs. You need to create one for the “success” dialog box, one for the “warning” dialog box and
one for the “error” dialog box. Choose icons that match the choice (considering a nice user interface)
and name them as following: “ic_success”, “ic_warning” and “ic_error”. The code for each xml file
will be generated automatically.

Step 9: Now let’s create a new layout design file for the dialog boxes (what folder should that be
in?). Confirm the following parameters when you create it:

Step 10: Copy the following code:

Get….

ready….

and…

…..enjoy!
(Opportunity to learn autocomplete tools)
Step 11: Copy and paste the previous file to make a “warning” layout design. There are some
differences, can you spot them?
Step 12: Copy the “success” file to create an “error” layout design. However, keep the same structure
of the “success” one: just make sure you have the compatible backgrounds for the “error” design
model (only 2 changes are required).

Step 13: Now, inside the main_activity.xml, use the following code:

Step 14: Create the strings that will be used in the dialog boxes. It should look like this (make your
changes considering possible event boxes that will be used in your project).
Step 15: Make your styles.xml look like this: (why is this used?)

Step 16: Finally, open the main activity of the java folder and write this code: (you should try to do this
part by part. Run “showSuccessDialog()” first, identify the methods, parameters and functions behind
its functionality. Then compare with the others.
package com.example.myapplication;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

//@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

findViewById(R.id.buttonSuccess).setOnClickListener(new View.OnClickListener() {
//@Override
public void onClick(View v) {
showSuccessDialog();
}
});

findViewById(R.id.buttonWarning).setOnClickListener(new View.OnClickListener(){
//@Override
public void onClick(View view) {
showWarningDialog();
}
});

findViewById(R.id.buttonError).setOnClickListener(new View.OnClickListener() {
// @Override
public void onClick(View view){
showErrorDialog();
}
});
}

private void showSuccessDialog() {

 AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,
R.style.AlertDialogTheme);
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_success_dialog,
(ConstraintLayout)findViewById(R.id.layoutDialogContainer));
builder.setView(view);
((TextView)
view.findViewById(R.id.textTitle)).setText(getResources().getString(R.string.success_title));
((TextView)
view.findViewById(R.id.textMessage)).setText(getResources().getString(R.string.dummy_text));
((Button)
view.findViewById(R.id.buttonAction)).setText(getResources().getString(R.string.okay));
((ImageView) view.findViewById(R.id.imageIcon)).setImageResource(R.drawable.ic_success);

final AlertDialog alertDialog = builder.create();

view.findViewById(R.id.buttonAction).setOnClickListener(new View.OnClickListener(){
// @Override
public void onClick(View view){
alertDialog.dismiss();
}
});

if(alertDialog.getWindow() != null){
alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable());
}
alertDialog.show();
}

private void showWarningDialog(){

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,
R.style.AlertDialogTheme);
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_warning_dialog,
(ConstraintLayout)findViewById(R.id.layoutDialogContainer));
builder.setView(view);
((TextView)
view.findViewById(R.id.textTitle)).setText(getResources().getString(R.string.warning_title));
((TextView)
view.findViewById(R.id.textMessage)).setText(getResources().getString(R.string.dummy_text));
((Button) view.findViewById(R.id.buttonYes)).setText(getResources().getString(R.string.yes));
((Button) view.findViewById(R.id.buttonNo)).setText(getResources().getString(R.string.no));
((ImageView) view.findViewById(R.id.imageIcon)).setImageResource(R.drawable.ic_warning);

final AlertDialog alertDialog = builder.create();

view.findViewById(R.id.buttonYes).setOnClickListener(new View.OnClickListener(){
// @Override
public void onClick(View view){
alertDialog.dismiss();
Toast.makeText(MainActivity.this,"Yes",Toast.LENGTH_SHORT).show();
}
});

view.findViewById(R.id.buttonNo).setOnClickListener(new View.OnClickListener(){
//@Override
public void onClick(View view){
alertDialog.dismiss();
Toast.makeText(MainActivity.this,"No",Toast.LENGTH_SHORT).show();
}
});

if(alertDialog.getWindow() != null){
alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable());
}
alertDialog.show();
}

private void showErrorDialog(){

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,
R.style.AlertDialogTheme);
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_error_dialog,
(ConstraintLayout)findViewById(R.id.layoutDialogContainer));
builder.setView(view);
((TextView)
view.findViewById(R.id.textTitle)).setText(getResources().getString(R.string.error_title));
 ((TextView)
view.findViewById(R.id.textMessage)).setText(getResources().getString(R.string.dummy_text));
((Button)
view.findViewById(R.id.buttonAction)).setText(getResources().getString(R.string.okay));
((ImageView) view.findViewById(R.id.imageIcon)).setImageResource(R.drawable.ic_error);

final AlertDialog alertDialog = builder.create();

view.findViewById(R.id.buttonAction).setOnClickListener(new View.OnClickListener(){
//@Override
public void onClick(View view){
alertDialog.dismiss();
}
});

if(alertDialog.getWindow() != null){
alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable());
}
alertDialog.show();
}