Article screen using CardView list with free Android XML layout

Article screen using CardView list with free Android XML layout ronnystudio
Saving your ample hours of designing and developing the Android UIis our goal, We now present to you the Article screen using Card-view list with free Android XML layout with the detailed process.

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 &amp; 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 &amp; 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.

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Join the Conversation

1 Comment

  1. Pingback: Build A Simple android Blog App screen In Android Studio - RonnyStudio
Leave a comment

Your email address will not be published. Required fields are marked *