Welcome to ronnystudio.com as you know I started this website for those who need a ready free Android XML layout for your project. with some good support and viewer, I started a premium section as well which is 1$ UI Kit. in this action you will get all the source code till 2020. I try to add at least 2 kits in this premium section. In today’s post, I develop an Article screen using the CardView list with ready free Android XML layout.
my website has two main sections one is a free UI kit and the other is 1$ UI Kit.todays post is Free for everyone. today’s post is about the Article screen. in this project, we used the card view for making a good looking List. and also we used some third-party libraries as well. I would like to mention the design Author who makes this design in Adobe XD. I got this design from UI8 and the designer name is Design Crazy you can visit this Adobe XD design as well the link is Here
Video Demo
Lets Start Step by Step
Saving your ample hours of designing and developing the Android UI is our goal, We now present to you the Article screen using CardView list with free Android XML layout with the detailed process.
Step 01 :
Create a new project in Android Studio from the File ⇒ New Project. As it prompts you to select the default activity, select Empty Activity and proceed.
Download this drawable.zip and add them to your project res folder. This file contains a few drawable images required for this app.
Now that we are done with the images, moving on to changing the text font. For this, we would need to add a custom font in our directory to find a custom fonts folder and paste it under the res.
Step 02 :
Go to the build Gradle and do the needful changes as follows.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
implementation 'com.google.android.material:material:1.0.0'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'com.mikhaellopez:circularimageview:3.2.0'
}Open colors.xml located under res ⇒ values and add the below color values.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary"> #983fff</color>
<color name="colorPrimaryDark">#7d27e1</color>
<color name="colorAccent">#D81B60</color>
</resources>
Open styles.xml located under res ⇒ values and add the below values.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
Step 03 :
Now is the time for making the XML file. For this, Open activity_main.xml and paste the following code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eeecf1"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="22dp"
android:layout_marginRight="22dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/poppins_medium"
android:gravity="center_horizontal"
android:letterSpacing="0.02"
android:lineSpacingExtra="9sp"
android:text="Newest"
android:textColor="#2e2e2e"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:fontFamily="@font/poppins_medium"
android:gravity="center_horizontal"
android:letterSpacing="0.02"
android:lineSpacingExtra="9sp"
android:text="Popular"
android:textColor="#4b4b4b"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:cardCornerRadius="14dp"
app:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/img_one" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:gravity="end"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="38dp"
android:layout_height="38dp"
android:src="@drawable/shape_circle" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_bookmark_border_white_24dp" />
</FrameLayout>
</LinearLayout>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginTop="18dp"
android:layout_marginRight="34dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/poppins_semibold"
android:lineSpacingExtra="6sp"
android:text="My Workplace!"
android:textColor="#161616"
android:textSize="18sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/poppins_regular"
android:lineSpacingExtra="7sp"
android:text="Workplace design refers to the process of designing & organizing your workplace to .."
android:textColor="#4f4f4f"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginTop="18dp"
android:layout_marginRight="22dp"
android:layout_marginBottom="18dp"
android:orientation="horizontal">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/image"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/profile_imgone"
app:civ_border="true"
app:civ_border_color="@android:color/white"
app:civ_border_width="1dp"
app:civ_shadow="true"
app:civ_shadow_radius="0" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:fontFamily="@font/poppins_medium"
android:lineSpacingExtra="7sp"
android:text="Steve Smith"
android:textColor="#2b2b2b"
android:textSize="14sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/poppins_regular"
android:gravity="end"
android:lineSpacingExtra="9sp"
android:text="30 mins ago"
android:textColor="#4f4f4f"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:layout_marginBottom="22dp"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:cardCornerRadius="14dp"
app:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/img_two" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:gravity="end"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="38dp"
android:layout_height="38dp"
android:src="@drawable/shape_circle" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_bookmark_border_white_24dp" />
</FrameLayout>
</LinearLayout>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginTop="18dp"
android:layout_marginRight="34dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/poppins_semibold"
android:lineSpacingExtra="6sp"
android:text="My Workplace!"
android:textColor="#161616"
android:textSize="18sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/poppins_regular"
android:lineSpacingExtra="7sp"
android:text="Workplace design refers to the process of designing & organizing your workplace to .."
android:textColor="#4f4f4f"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginTop="18dp"
android:layout_marginRight="22dp"
android:layout_marginBottom="18dp"
android:orientation="horizontal">
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/profile_imgtwo"
app:civ_border="true"
app:civ_border_color="@android:color/white"
app:civ_border_width="1dp"
app:civ_shadow="true"
app:civ_shadow_radius="0" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:fontFamily="@font/poppins_medium"
android:lineSpacingExtra="7sp"
android:text="Steve Smith"
android:textColor="#2b2b2b"
android:textSize="14sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/poppins_regular"
android:gravity="end"
android:lineSpacingExtra="9sp"
android:text="30 mins ago"
android:textColor="#4f4f4f"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
</LinearLayout>
Step : 04
Now is the time for making the XML file toolbar. For this, create toolbar.xml and paste the following code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@color/colorPrimary"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_menu_white_24dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#ffffff"
android:letterSpacing="0.01"
android:layout_marginLeft="17dp"
android:fontFamily="@font/poppins_medium"
android:lineSpacingExtra="8sp"
android:gravity="center_horizontal"
android:text="Latest Blogs"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="22dp"
android:src="@drawable/icon_search"/>
</LinearLayout>
</androidx.appcompat.widget.Toolbar>Now run the app and see the output, you will see the beautiful Article screen for your next android project.
output screen :
So that’s all for this Article screen using the CardView list with free Android XML layout Tutorial. If you are having any confusion or queries please do comment. Thank You.
