‫Welcome back up in Android Studio.
‫Create a new project called Sports Application and let's design our layouts.
‫Go to activity underscore main dot XML file.
‫Remove this text view and let us create an image view that will act as a header for our application.
‫I'll give it zero dpi width and 230 dpi for height ID image view.
‫As you see, I need to specify an image from the drawable folders.
‫Here I'll copy these images and by the way, you can get them from the resources folder under the section
‫and copy them into the drawable folder.
‫Here we go.
‫These are the six images that we need to display in our application.
‫And this is the header I'll specify at drawable header.
‫You can see this image is appearing here in the header.
‫Let's add the constraints end to end parent I'm constraining it to the parent dot to start of parent
‫and top to top of parent.
‫This is our image view.
‫Now let's create the recycler view that will display the card views.
‫So here specify the recycler view the width zero dpi matching the constraints.
‫The height zero dpi matching the constraint.
‫Give it an ID recycler view.
‫Specify the constraints button to button of parent.
‫And constraint.
‫Top to bottom of image view.
‫And here we go.
‫This is our recycler view that it is constrained to the parent from left and right and bottom.
‫And from the top is constrained under the image view.
‫Now let's move to create the template or the layout.
‫For every item in the recycler view, go to the layouts folder, create a new layout resource file and
‫and I name it as Card Item Layout.
‫Click okay, go split mode and I want from you to focus with me.
‫Now I'll change this constraint layout and type card view Android x dot card view dot widget.
‫Dot card view.
‫In Android development Card View is a UI widget that is part of the Android X library.
‫It's designed to provide a flexible and easily customizable container for displaying information in
‫a card like format.
‫Card view is often used to create a consistent and visually appealing layout for displaying content,
‫such as a text view, images, and buttons.
‫In this application, I'll use the height to 100 dpi and you can see it's displaying here the width
‫as matchparent and the height is 220 dpi.
‫Now you can specify attributes like corner radius, background color, elevation and much more.
‫Let's start with the card.
‫Corner radius equals to 40 dpi and the elevation equals to 20 dpi.
‫The card view is defined with the specific attributes like card corner radius and card elevation.
‫To control the appearance of the card.
‫So card view supports elevation, allowing you to cast shadows on the underlying views, creating a
‫sense of depth and making it visually stand out.
‫By default, Card View has rounded corners, giving it a card like appearance.
‫You can customize the corner radius as needed, so if you look closer, you can see the rounded corner
‫and the shadows under the cards.
‫So this is our card view.
‫You can specify more attributes for the cards, for example card background color and I'll give it black
‫attribute.
‫Also, you can specify more attributes for this card view.
‫For example the margin specify a margin ADP.
‫And you can see that margin equals to ADP is applied to all sides of this card view.
‫Now inside the card view you can specify elements and other views.
‫I'll start creating a constraint layout Matchparent Matchparent.
‫And inside this constraint layout I'll create two views.
‫The first one is of type image view and the second is of type text view.
‫And here I'm creating an image view that fills the whole card view.
‫I'm constraining it to the parent from all sides.
‫I'll create a text view.
‫And here we go.
‫This is our layout.
‫This is an image view filling the whole card view.
‫And this is a text view just for displaying the title of the sport.
‫So the card view is designed to provide a flexible and easily customizable container for displaying
‫information in a card like format.
‫And card view is often used to create a consistent and visually appealing layout for displaying content
‫such as a text, images, and buttons.