Blog post app screen with Android source code

ronnystudio-blogpost-androidapp-screen
Here is the blog post android app for your next project UI screen with clean and ready with Android source code UI for your next android project.spending 1000+ hours on building XML layout for your project? , well now, you can relax as you can use our free android kit which is a click away.

Saving your ample hours of designing and developing the Android UI is our goal, We now present to you the Newsblog post app screen with Android source code 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 res.zip and add them to your project res folder. This file contains a few drawable images and font folder 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 and asset folder as well. find custom fonts folder and asset folder and paste it under the java. Here is a reference image for custom fonts folder

For custom fonts folder

ronnystudio-custom-font-path-1

For asset folder

onnystudio-asset-location

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:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'de.hdodenhof:circleimageview:3.0.1'
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'com.android.support:design:29.0.2'
    implementation 'com.github.siyamed:android-shape-imageview:0.9.+@aar'
    implementation 'de.hdodenhof:circleimageview:3.0.1'
    implementation 'com.balysv:material-ripple:1.0.2'
    implementation 'com.android.support:support-vector-drawable:29.0.2'
    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">#1976D2</color>
    <color name="colorPrimaryDark">#1565C0</color>
    <color name="colorAccent">#FDD835</color>
    <color name="transparent">#00000000</color>
    <color name="white">#ffffff</color>
    <color name="overlay_dark_10">#1A000000</color>
    <color name="black">#000000</color>
    <color name="overlay_dark_20">#33000000</color>
</resources>

Open strings.xml located under res ⇒ values and add the below values.

<resources>
    <string name="app_name">RohanSurve</string>
    <string name="by_jaxon_in_travel">By Jaxon in Travel</string>
    <string name="_7_days_ago">7 days ago</string>
    <string name="_5_min_read">5 min read</string>
    <string name="comments">Comments</string>
    <string name="see_all_52">See All (52)</string>
    <string name="related_posts">Related Posts</string>
</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>
        <item name="android:windowFullscreen">true</item>
    </style>

</resources>

Step 03 :

Now is the time for making the XML file. in this project, our main XML is too large so we divided some parts and make two different XML and then include that XML in activity_main. For this, Open activity_main.xml and paste the following code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context=".MainActivity">

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


        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">



                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="336dp">


                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        android:src="@drawable/blogpost_image"/>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="24dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_margin="15.8dp"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_keyboard_backspace_black_24dp"
                            android:tint="@color/white"/>

                    </LinearLayout>



                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="24dp"
                        android:background="#33000000"/>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/black"
                        android:layout_gravity="bottom"
                        android:paddingBottom="5dp"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="41dp"
                            android:layout_height="41dp"
                            android:layout_marginLeft="13dp"

                            android:layout_marginTop="15.8dp"
                            android:layout_marginStart="13dp">

                            <de.hdodenhof.circleimageview.CircleImageView
                                xmlns:app="http://schemas.android.com/apk/res-auto"
                                android:layout_width="38dp"
                                android:layout_height="38dp"
                                android:layout_gravity="center"
                                android:layout_marginLeft="1.5dp"
                                android:layout_marginRight="0.5dp"
                                android:src="@drawable/blogpost_profile"
                                app:civ_border_color="@color/white"
                                app:civ_border_width="2.5dp"
                                android:layout_marginStart="1.5dp"
                                android:layout_marginEnd="0.5dp" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="8dp"
                            android:layout_marginTop="16.9dp"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:layout_marginStart="8dp">

                            <customfonts.TextView_Lato_Regular
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:lineSpacingExtra="2.6sp"
                                android:text="@string/by_jaxon_in_travel"
                                android:textColor="#c2c2cc"
                                android:textSize="13.4sp" />

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

                                <customfonts.TextView_Lato_Regular
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:lineSpacingExtra="2.1sp"
                                    android:text="@string/_7_days_ago"
                                    android:textColor="#c2c2cc"
                                    android:textSize="12sp" />

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

                                    <ImageView
                                        android:layout_width="3dp"
                                        android:layout_height="3dp"
                                        android:layout_gravity="center_vertical"
                                        android:layout_marginLeft="12.5dp"
                                        android:tint="@color/white"
                                        android:src="@drawable/ic_brightness_1_black_24dp"
                                        android:layout_marginStart="12.5dp" />

                                    <customfonts.TextView_Lato_Regular
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="3.2dp"
                                        android:lineSpacingExtra="2.1sp"
                                        android:text="@string/_5_min_read"
                                        android:textColor="#c2c2cc"
                                        android:textSize="12sp"
                                        android:layout_marginStart="3.2dp" />
                                </LinearLayout>

                            </LinearLayout>

                        </LinearLayout>




                    </LinearLayout>




                </FrameLayout>

                <customfonts.MyTextView_LoraBold
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="30.7sp"
                    android:textColor="#131314"
                    android:layout_margin="15.8dp"
                    android:lineSpacingExtra="8.3sp"
                    android:text="40 things about life I wish I could travel back in time and tell myself"
                    />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="15.8dp"
                    android:orientation="horizontal">
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/iconblog_text"/>

                    <customfonts.MyTextView_Lato_LightItalic
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="23sp"
                        android:layout_marginLeft="15.8dp"
                        android:textColor="#131314"
                        android:lineSpacingExtra="5sp"
                        android:text="Most of us have, at some point, considered what we would do if we could travel back in time."
                        android:layout_marginStart="15.8dp" />



                </LinearLayout>

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15.4sp"
                    android:layout_margin="15.8dp"
                    android:textColor="#131314"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="3.8sp"
                    android:text="Rewritten on his or improve found. Is and of continued rather, rationale I illustrated people, the absolutely let bed which of brains the he of hesitated he of and is yet in the early "
                    />

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="15.8dp"
                    android:layout_marginRight="15.8dp"
                    android:layout_marginBottom="15.8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/blogpost_imgtwo"/>

                <include layout="@layout/blog_relatedpostlayout"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="15.8dp"
                    android:layout_marginLeft="15.8dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginBottom="20dp"
                    android:orientation="horizontal">

                    <customfonts.MyTextView_LatoBold
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="15.4sp"
                        android:textColor="#131314"
                        android:letterSpacing="0.01"
                        android:lineSpacingExtra="3.8sp"
                        android:text="@string/comments"
                        />

                    <customfonts.MyTextView_LatoBold
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="15.4sp"
                        android:textColor="#f73069"
                        android:letterSpacing="0.01"
                        android:lineSpacingExtra="3.8sp"
                        android:gravity="end"
                        android:text="@string/see_all_52"
                        />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="4dp"
                    android:layout_marginTop="7dp"
                    android:layout_marginLeft="15.8dp"
                    android:layout_marginRight="8dp"
                    android:background="@drawable/bg_gradient_soft"
                    android:layout_marginStart="15.8dp"
                    android:layout_marginEnd="8dp" />

                <include layout="@layout/blog_commentlayout"/>






            </LinearLayout>
        </androidx.core.widget.NestedScrollView>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_marginTop="7dp"
        android:layout_above="@+id/bottomlayout"
        android:background="@drawable/bg_gradient_soft" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottomlayout"
        android:background="@color/white"
        android:layout_alignParentBottom="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="52.2dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:paddingLeft="18.7dp"
                android:src="@drawable/iconblog_fav"
                android:paddingStart="18.7dp" />

            <customfonts.MyTextView_LatoBold
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="7.3dp"
                android:lineSpacingExtra="2.6sp"
                android:text="101"
                android:textColor="#0d0e15"
                android:textSize="13.4sp"
                android:layout_marginStart="7.3dp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="20.6dp"
                android:src="@drawable/iconblog_comment"
                android:tint="@color/black"
                android:layout_marginStart="20.6dp" />

            <customfonts.MyTextView_LatoBold
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="7.3dp"
                android:lineSpacingExtra="2.6sp"
                android:text="8"
                android:textColor="#0d0e15"
                android:textSize="13.4sp"
                android:layout_marginStart="7.3dp" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="20.6dp"
                    android:src="@drawable/iconblog_share"
                    android:tint="@color/black"
                    android:layout_marginStart="20.6dp" />

                <customfonts.MyTextView_LatoBold
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="7.3dp"
                    android:lineSpacingExtra="2.6sp"
                    android:text="3"
                    android:textColor="#0d0e15"
                    android:textSize="13.4sp"
                    android:layout_marginStart="7.3dp" />
            </LinearLayout>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="24.6dp"
                android:layout_marginRight="15.4dp"
                android:src="@drawable/iconblog_save"
                android:tint="@color/black"
                android:layout_marginStart="24.6dp"
                android:layout_marginEnd="15.4dp" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Now Create another XML file and name it as blog_commentlayout.xml. and write the following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="wrap_content">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="47dp"
            android:layout_height="47dp"
            android:layout_marginLeft="13dp"
            android:layout_marginTop="20.8dp"
            >

            <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_gravity="center"
                android:layout_marginLeft="1.5dp"
                android:layout_marginRight="0.5dp"
                android:src="@drawable/blogpost_profiletwo"
                app:civ_border_color="@color/white"
                app:civ_border_width="2.5dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="25.9dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <customfonts.MyTextView_LatoBold
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="2.6sp"
                android:text="Amanda McDonald"
                android:textColor="#0d0e15"
                android:textSize="13.4sp" />

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

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:lineSpacingExtra="2.1sp"
                    android:text="8 days ago"
                    android:textColor="#768196"
                    android:textSize="11.5sp" />



            </LinearLayout>

        </LinearLayout>



    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13.4sp"
        android:textColor="#131314"
        android:letterSpacing="0.01"
        android:layout_margin="15.8dp"
        android:lineSpacingExtra="5.8sp"
        android:text="Me is its behind decades agency, longer the big times then may to one-by-one, own with by this half subdued parent, this incentive it all you in the slight in gave human nonsense, he I searching opinion."
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52.2dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingLeft="18.7dp"
            android:src="@drawable/iconblog_fav" />

        <customfonts.MyTextView_LatoBold
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="7.3dp"
            android:lineSpacingExtra="2.6sp"
            android:text="42"
            android:textColor="#0d0e15"
            android:textSize="13.4sp" />




        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1">




        </LinearLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="24.6dp"
            android:layout_marginRight="15.4dp"
            android:src="@drawable/iconblog_save"
            android:tint="@color/black" />

    </LinearLayout>

</LinearLayout>

Now Create another XML file and name it as blog_relatedpostlayout.xml. and write 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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f0f0f0"
        android:orientation="vertical">

        <customfonts.MyTextView_LatoBold
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15.4sp"
            android:textColor="#797980"
            android:layout_margin="20dp"
            android:letterSpacing="0.01"
            android:lineSpacingExtra="3.8sp"
            android:text="@string/related_posts"
            />


        <FrameLayout
            android:layout_width="match_parent"

            android:layout_height="match_parent">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:weightSum="2"
                android:layout_marginBottom="30dp"
                android:orientation="horizontal">

                <LinearLayout

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="15.8dp"
                    android:layout_weight="1"

                    android:orientation="vertical">



                        <LinearLayout
                            android:layout_width="157dp"
                            android:layout_height="126.7dp"
                            android:layout_gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:scaleType="centerCrop"
                                android:src="@drawable/blogpost_imgthree" />

                        </LinearLayout>


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="19.2sp"
                        android:textColor="#131314"
                        android:layout_gravity="center"
                        android:layout_marginTop="15.8dp"
                        android:lineSpacingExtra="7.7sp"
                        android:text="How (And Why)\n
To Travel Alone"
                        />


                </LinearLayout>

                <LinearLayout

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="15.8dp"
                    android:layout_weight="1"
                    android:orientation="vertical">



                        <LinearLayout
                            android:layout_width="157dp"
                            android:layout_height="126.7dp"
                            android:layout_gravity="center"
                            android:orientation="vertical">

                            <ImageView

                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:scaleType="centerCrop"
                                android:src="@drawable/blogpost_imgfour" />

                        </LinearLayout>


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="19.2sp"
                        android:textColor="#131314"
                        android:layout_gravity="center"
                        android:layout_marginTop="15.8dp"
                        android:lineSpacingExtra="7.7sp"
                        android:text="The Truth About\n
Travelers"
                        />


                </LinearLayout>


            </LinearLayout>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginBottom="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/blog_pagination"/>
        </FrameLayout>



    </LinearLayout>

</LinearLayout>

Now run the app and see the output. you will see the beautiful UI screen for your next android project.

So that’s all for this Blog post app screen with Android source code Tutorial. If you are having any confusion or queries please do comment. Thank You.

Happy Coding

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Leave a comment

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

Related Posts