Build A Simple android Blog App screen In Android Studio

Build A Simple android Blog App screen In Android Studio
Saving your ample hours of designing and developing the Android UI is our goal, We now present to you Build A Simple android Blog App screen In Android Studio

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 Build A Simple android Blog App screen In Android Studio with ready free Android XML layout.

 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

Blog Screen series previous post found here

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.makeramen:roundedimageview:2.3.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">#ffffff</color>
    <color name="colorPrimaryDark">#efefef</color>
    <color name="colorAccent">#D81B60</color>
    <color name="textcolor">#161616</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:orientation="vertical">


                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="330dp"
                        android:layout_marginTop="28dp">

                        <com.makeramen.roundedimageview.RoundedImageView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:scaleType="centerCrop"
                            android:src="@drawable/main_image"
                            app:riv_corner_radius="8dp" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="end"
                            android:layout_marginTop="36dp"
                            android:layout_marginRight="36dp"
                            android:gravity="end"
                            android:orientation="horizontal">

                            <FrameLayout
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content">



                                <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>


                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom"
                            android:layout_marginLeft="25dp"
                            android:layout_marginBottom="33dp"
                            android:orientation="vertical">


                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:fontFamily="@font/poppins_medium"
                                android:letterSpacing="0.08"
                                android:lineSpacingExtra="40sp"
                                android:text="editor&apos;s pick"
                                android:textColor="#ffffff"
                                android:textSize="14sp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:fontFamily="@font/poppins_semibold"
                                android:lineSpacingExtra="10sp"
                                android:text="Popular Rave Parties\nin China you will love!  "
                                android:textColor="#ffffff"
                                android:textSize="22sp" />

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:orientation="horizontal">


                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:fontFamily="@font/poppins_medium"
                                    android:letterSpacing="0.01"
                                    android:lineSpacingExtra="42sp"
                                    android:text="South China"
                                    android:textColor="#ffffff"
                                    android:textSize="12sp" />

                                <ImageView
                                    android:layout_width="8dp"
                                    android:layout_height="8dp"
                                    android:layout_gravity="center"
                                    android:layout_marginLeft="6dp"
                                    android:layout_marginRight="6dp"
                                    android:src="@drawable/ic_lens_white_24dp" />

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:fontFamily="@font/poppins_medium"
                                    android:letterSpacing="0.01"
                                    android:lineSpacingExtra="42sp"
                                    android:text="Tony Smith"
                                    android:textColor="#ffffff"
                                    android:textSize="12sp" />

                            </LinearLayout>


                        </LinearLayout>


                    </FrameLayout>


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="40dp"
                        android:fontFamily="@font/poppins_bold"
                        android:letterSpacing="0.01"
                        android:lineSpacingExtra="10sp"
                        android:text="This Week&apos;s Popular"
                        android:textColor="#000000"
                        android:textSize="20sp" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="22dp"
                        android:orientation="horizontal">

                        <com.makeramen.roundedimageview.RoundedImageView
                            android:layout_width="100dp"
                            android:layout_height="100dp"
                            android:scaleType="centerCrop"
                            android:src="@drawable/img_one"
                            app:riv_corner_radius="8dp" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="22dp"
                            android:orientation="vertical">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:fontFamily="@font/poppins_semibold"
                                android:lineSpacingExtra="8sp"
                                android:text="Top Workplace design\nfor UI Designers."
                                android:textColor="@color/textcolor"
                                android:textSize="16sp" />

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="12dp"
                                android:orientation="horizontal">

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:orientation="horizontal">

                                    <ImageView
                                        android:layout_width="14dp"
                                        android:layout_height="14dp"
                                        android:layout_gravity="center"
                                        android:src="@drawable/ic_thumb_up_black_24dp" />


                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="8dp"
                                        android:lineSpacingExtra="7sp"
                                        android:text="2,687"
                                        android:textColor="#333333"
                                        android:textSize="13sp" />

                                </LinearLayout>

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:layout_marginLeft="22dp"
                                    android:layout_weight="1"
                                    android:orientation="horizontal">

                                    <ImageView
                                        android:layout_width="14dp"
                                        android:layout_height="14dp"
                                        android:layout_gravity="center"
                                        android:src="@drawable/ic_remove_red_eye_black_24dp" />


                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="8dp"
                                        android:lineSpacingExtra="7sp"
                                        android:text="32,577"
                                        android:textColor="#333333"
                                        android:textSize="13sp" />

                                </LinearLayout>


                            </LinearLayout>


                        </LinearLayout>


                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="22dp"
                        android:layout_marginBottom="80dp"
                        android:orientation="horizontal">

                        <com.makeramen.roundedimageview.RoundedImageView
                            android:layout_width="100dp"
                            android:layout_height="100dp"
                            android:scaleType="centerCrop"
                            android:src="@drawable/img_two"
                            app:riv_corner_radius="8dp" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="22dp"
                            android:orientation="vertical">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:fontFamily="@font/poppins_semibold"
                                android:lineSpacingExtra="8sp"
                                android:text="Top Workplace design\nfor UI Designers."
                                android:textColor="#161616"
                                android:textSize="16sp" />

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="12dp"
                                android:orientation="horizontal">

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:orientation="horizontal">

                                    <ImageView
                                        android:layout_width="14dp"
                                        android:layout_height="14dp"
                                        android:layout_gravity="center"
                                        android:src="@drawable/ic_thumb_up_black_24dp" />


                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="8dp"
                                        android:lineSpacingExtra="7sp"
                                        android:text="2,687"
                                        android:textColor="#333333"
                                        android:textSize="13sp" />

                                </LinearLayout>

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:layout_marginLeft="22dp"
                                    android:layout_weight="1"
                                    android:orientation="horizontal">

                                    <ImageView
                                        android:layout_width="14dp"
                                        android:layout_height="14dp"
                                        android:layout_gravity="center"
                                        android:src="@drawable/ic_remove_red_eye_black_24dp" />


                                    <TextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="8dp"
                                        android:lineSpacingExtra="7sp"
                                        android:text="32,577"
                                        android:textColor="#333333"
                                        android:textSize="13sp" />

                                </LinearLayout>


                            </LinearLayout>


                        </LinearLayout>


                    </LinearLayout>

                </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:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:orientation="vertical">

    <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_black_24dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="17dp"
            android:fontFamily="@font/poppins_semibold"
            android:gravity="center_horizontal"
            android:letterSpacing="0.01"
            android:lineSpacingExtra="8sp"
            android:text="Browse Blogs"
            android:textColor="#222222"
            android:textSize="15sp" />

        <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="29.8dp"
            android:src="@drawable/bell_icon" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="22dp"
            android:src="@drawable/icon_search"
            android:tint="#222222" />

    </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 :

Build A Simple android Blog App screen In Android Studio
Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Join the Conversation

3 Comments

  1. Pingback: Android free XML layout for Blog Detail Screen - part 04 - RonnyStudio
  2. Pingback: How to make eCommerce app in the android studio-ECommerce-Product-XML Layout UI - RonnyStudio
  3. Pingback: Ecommerce product XML Layout UI-android studio - RonnyStudio
Leave a comment

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