Dialog Fragments - Part 1

Start course
1h 33m

This course explores fragment operators in Kotlin. You'll learn about the different types of fragments and how you can use them.

Learning Objectives

  • Understand the basics of fragments, including where and why we use them
  • Learn how to create them
  • Learn how to change fragments inside an activity with another fragment
  • Learn about fragment backtrack, list fragments, and dialog fragments

Intended Audience

This course is intended for anyone who wants to learn how to start building their own apps on Android.


To get the most out of this course, you should have some basic knowledge of the fundamentals of Android.


Hello, everyone. What do you know it's then already. So, we're going to talk about this subject called Dialog Fragments. Alright, going to learn everything about them.

A dialog fragment is a fragment that is used for getting data from the user. And as you may have experienced in some of these earlier videos using fragments is a great way to work. So, this example is showing you, I think you remember right from the dialog message lesson, we used layout to interact with the user. So, here we use a fragment. So, what are the differences between dialog message and dialog fragment? Well, here the dialog fragment has all the aspects of fragment structure. So, in other words, it gives you all the advantages that all of these fragments have that we've been working with. And if you use dialog fragment, your dialog messages life cycle is going to leave from the activity life cycle and combine with a fragment lifecycle. Now, I don't want to go too deep into that because it might get a little confusing. We're going to talk about it as we go along.

But what you do have to know is, there are many, many, many advantages waiting to be discovered when you're using dialog fragment. So, why don't we just go ahead and start working in Android Studio. Alright, so here you can see I've created a new project for this video. Now, before I start I do want to show you what it's going to look like when you're done. So, as you see here there's one button and two TextViews in the main activity. And when we click the button, the dialog fragment is opening and in that dialog fragment, we want from the user the name, the age. So, here if the user clicks a 'Cancel' button, the fragment closes up. If the user enters a name and age and click the 'OK' button, the data is taken and it'll show in the TextView. So, you can use this example in well, just a simple yes, no chat, maybe form of alert dialog or you can design more complex interfaces and grab some more detailed data from users like. Well, you can always use it in a form, stuff like that. But I'll leave that to you. I want to start to develop this application.

So, first up, I want to add a button to the main activity. And then, I'm going to change the text of the button so the text can be Show Dialog Fragment. Alright. And also, of course, a text of the button can be 20sp. Now, add the TextViews. So, I want to add the first TextView under the button. I'll increase the font size of the TextView and textcolor of the TextView can be black. Alright. So, let's have the second TextView, textsize of this TextView 24sp, textcolor can also be black. Alright. So, also since the main layout is the ConstraintLayout. I want to select these three components and just right click with the mouse, select 'Center, Horizontally'. Alright. So, I'll define the vertical constraints now. Layout margin top value of the button can be 100dp and layout margin top value this first TextView can be 75dp. And for the second one, let's make it 30. Alright. So, finally let's give an idea to these components. So, for the button I'll just write buttonShow and for the TextView I'll write textViewName. Second TextView, textViewAge. So, now let's go over to Kotlin of the main activity. Alright. So, here we are and first we've got to define components, lateinit var show : Button, lateinit var name : TextView, lateinit var age : TextView.

Then, inside the onCreate method, I want to match the components with their id's, show = findViewById(R.id.buttonShow), name = findViewById(R.id.textViewName), age = findViewById(R.id.texViewAge). Alright, and now we just add a ClickListener to the button. So, now it's time to create the dialog fragment and for that, I just want to create a new fragment. Again, I'll just select the empty fragment. Alright, MyDialogFragment for the name of this fragment. So, when I press that 'Finish' button, Android Studio creates a new fragment for me. What do you think? Alright. So, that's my fragment and let's just delete some of the unnecessary code here So, now let's design this fragment just like in the example. And first I'll just delete the TextVew. Now, I'm ready.

So, I need to change the FrameLayout to the ConstraintLayout here. Their of course, will be a TextView in the Design area to show the headline. So, for this I'll add a TextView to the design area. And I'll change the text of this TextView. Of course, you can write any text you want. I'll increase the textSize of the TextView as well. And the TextView, textColor will be black. Alright. So, I'll add the plain edit text here. So, this edit text for the user name, I will delete the text of the edit text. I'll add a hint and the hint can be Write your name. So, now I want to add the second edit text so this edit text will be the number edit text because we're going to use this edit text for the user age. And I'll add a hint to the edit text as well, a hint can be Write your age. So, now I want to select both edit text and change their common property. So, the width can be 250 dp, height can be 50dp. And the textSize, let's make it 20sp. So, now the gravity property, well, let's make it center. And now I want to add two button. And so I'll write the text of the first button to be Cancel and for another button let's do, all right, just Ok.

All right. Now, since the main layout is in ConstraintLayout, I want to select all the components, right click and select 'Center, Horizontally' as my option. All right. So, now I need to determine the top constraint values of the component. The TextView, it can be 30dp. For the first edit text 20dp, second edit text 10dp. For the buttons 40. All right. So, lastly I want to adjust the width and the height of the ConstraintLayout and that'll be wrap_content. All right, I want to change the padding property to ConstraintLayout2.

So, I'm going to make it 10. All right. So, it looks to me like the dialog window. Well, the design anyway is finished. But I do want to curl the corners of the dialog window. And I was saying that makes it look a little nicer. So, for that what I do is I create a new design file and the drawable folder, right click on drawable folder and choose 'New, Drawable Resource File' as my option. So, I have to give this a name to this file. So, the name of the file can just be custom_layout. Now I will also delete this selector in the root element section and write shape here. And then lastly, click the 'OK' button. So, what I'll do is I'll state that this shape will be a rectangle. And now I will use the corner tag to curl the corner. So, here I can set the radius property to 20dp. And that way, you'll now see a 20dp curvature of the corners of the ConstraintLayout component. All right. So, we can also set the background color. So, let's do that. I'm going to use the solid tag for this and here I'm using the color property and for the background color, I'll just choose teal_200 and that's defined in the color.xml file. So, now we can define the shape for the background of the ConstraintLayout. So, I select the ConstraintLayout, click here and as you can see the design that we created under the drawable folder appears right here.

So, I'll select this design and click 'OK'. And as you can see the background of the ConstraintLayout now has changed. And of course, there is another thing that we need to pay attention to here. So, I choose teal_200 as a background color. But if you open the themes.xml file. Well, you're going to see that this color is set to colorSecondary. So, the cursor in the edit text component gets its color from here. So, therefore if we were on the application as it is when you click on the edit text component, well, you won't really be able to see the cursor that automatically appears in the, when you go to enter data. So, I'm going to need to change this color. So, I'll click on the color box here and just choose a color like this.

All right guys. So, that finishes the design. So, let's just determine the id of the components. id of the first edit text component can be editTextName, the id of the second edit text component can be editTextAge. And the id of the Cancel button well, can be buttonCancel. id of the Ok button, buttonOk. All right. So, now the design of the dialog fragment is ready. And so is this video, we're done here. We're going to write the necessary code for the dialog fragment in the next video. All right, so I want to see there.


About the Author
Learning Paths

Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.

Covered Topics