UI stands for User Interface, which represents the graphical interface that allows the user to interact with software or any other devices. It comprises some visual elements like Buttons, icons, text, and Images that allow users to steer and interact with the software. UI basically concentrate on creating instinctive and User-Friendly interfaces that make user easily learn and adapt to the environment of the software or device.
What are CardViews In Android?
A CardView is a user interface widget that is used by developers to create a holder that ideally looks like a normal card having defined corners as well as elevated shadow. It was first introduced in Android Support Library but now you will find it in AndroidX Library.
What Actually Gradients Are?
In android, gradients represent transition or progression between two or more colors, shades, or tones. They are basically used for backgrounds like Buttons, Splash Screens, and CardView. So now let’s start the implementation of Gradient in CardView.
Step By Step Implementation
Step 1: Create a CardView in your Android Studio
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:background = "#F3F0F8"
android:gravity = "center_horizontal"
tools:context = ".MainActivity" >
< TextView
android:id = "@+id/txtAdd"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginTop = "50dp"
android:textSize = "24sp"
android:text = "Add Gradient To Your CardView" />
< androidx.cardview.widget.CardView
android:id = "@+id/grad"
android:layout_width = "300dp"
android:layout_marginTop = "90dp"
android:layout_height = "400dp"
app:cardCornerRadius = "15dp" />
</ LinearLayout >
|
Step 2: Create an xml file for the gradient in your drawable section
<? xml version = "1.0" encoding = "utf-8" ?>
< item >
< shape
android:shape = "rectangle" >
< corners
android:radius = "15dp" >
</ corners >
< gradient
android:startColor = "#026A3D"
android:endColor = "#22C686" >
</ gradient >
</ shape >
</ item >
</ selector >
|
Step 3: See through your Themes folder in the res folder in your Android Studio and add the Style attribute to it
Note: Make sure that you attach the same drawable file in which you have created the gradient.
Step 4: Now go to your CardView xml file and add this new style to it.
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:background = "#F3F0F8"
android:gravity = "center_horizontal"
tools:context = ".MainActivity" >
< TextView
android:id = "@+id/txtAdd"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginTop = "50dp"
android:textSize = "24sp"
android:text = "Add Gradient To Your CardView" />
< androidx.cardview.widget.CardView
android:id = "@+id/grad"
android:layout_width = "300dp"
android:layout_marginTop = "90dp"
android:layout_height = "400dp"
app:cardCornerRadius = "15dp"
style = "@style/CardView." />
</ LinearLayout >
|
Points To Remember
- Take the start color as Dark Color and the end Color as light color of that same color which you have chosen and vice versa for better visualization.
- Keep the cardView corner radius and grad corner radius the same so that it fits perfectly on it.
- If you want any other color then find its hexa color code and copy and paste it into your gradient file.