What is a dialog box?
How to implement a custom dialog box in an android app using Java?
Through this example, you are going to learn how you can implement a dialog box easily.
Step 1: Create a new Android Studio project
File -> new -> New Project and fill all the required details.
Step 2: Create a new layout file and name it custom_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/layout_bg">
<TextView
android:textAlignment="center"
android:id="@+id/textView49"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="50dp"
android:text="@string/we_gave_you_choice"
android:textColor="@color/black"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:textAlignment="center"
android:id="@+id/textView51"
android:textColor="@color/black"
android:layout_margin="20dp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/edit_the_data_you_enterd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView49" />
<LinearLayout
android:layout_marginTop="20dp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="2"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView51">
<Button
android:layout_marginStart="20dp"
android:id="@+id/editButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@null"
android:padding="10dp"
android:text="@string/edit"
android:textColor="@color/orangeThemeBg"
android:textStyle="bold" />
<Button
android:id="@+id/cancelButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_weight="1"
android:background="@drawable/button_orange_custom"
android:padding="10dp"
android:text="@string/cancel"
android:textColor="@color/white"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
(Design your layout according to your design)
Step 3: In your main screen XML file add a button to the layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Open Dialog"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 4: Initialize the button and set onClickListener on the button.
public class MainActivity extends AppCompatActivity {
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
}
}
Step 5: Now add the following code in your onClick method.
public class MainActivity extends AppCompatActivity {
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
ViewGroup viewGroup = view.findViewById(android.R.id.content);
View dialogView = LayoutInflater.from(view.getContext()).inflate(R.layout.custom_dialog, viewGroup, false);
builder.setView(dialogView);
final AlertDialog alertDialog = builder.create();
alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
alertDialog.show();
}
});
}
}
In this above example, we are inflating a custom layout using the AlertDialog builder.
Conclusion - Custom dialog box
Time to look at what we learned. AlertDialog will come handy whenever required whenever we need to inflate the custom dialogs in our application. In fact, It is much easier and recommended to implement the custom dialog box by inflating through AlertDialog rather than making the whole activity behave as a dialog.
Comment your thoughts below.
0 comments: