Android free XML layout for Blog Detail Screen – part 04

Android free XML layout for Blog Detail Screen - Blog layout series 04-ronnystudio
Saving your ample hours of designing and developing the Android UI is our goal, We now present to you Android free XML layout for Blog Detail Screen

Saving your ample hours of designing and developing the Android UI is our goal, We now present to you Android free XML layout for Blog Detail Screen

Please Find the previous post here

 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

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 Android free XML layout for Blog Detail Screen 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 acustom 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'
}

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#fd0686</color>
    <color name="colorPrimaryDark">#fd0686</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:orientation="vertical">

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

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="61dp"
                        android:layout_gravity="bottom"
                        android:gravity="end">

                        <FrameLayout
                            android:layout_width="64dp"
                            android:layout_height="match_parent"
                            android:layout_gravity="center">

                            <ImageView
                                android:layout_width="64dp"
                                android:layout_height="match_parent"
                                android:background="@color/colorPrimary" />

                            <ImageView
                                android:layout_width="18dp"
                                android:layout_height="20dp"
                                android:layout_gravity="center"
                                android:scaleType="centerCrop"
                                android:src="@drawable/ic_share_white_24dp" />

                        </FrameLayout>


                    </LinearLayout>


                </FrameLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="35dp"
                    android:layout_marginRight="27dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/btn_rounded"
                        android:fontFamily="@font/poppins_medium"
                        android:gravity="center_horizontal"
                        android:letterSpacing="0.01"
                        android:lineSpacingExtra="56sp"
                        android:paddingLeft="7dp"
                        android:paddingTop="4dp"
                        android:paddingRight="7dp"
                        android:paddingBottom="4dp"
                        android:text="rave parties"
                        android:textAllCaps="true"
                        android:textColor="#fd0686"
                        android:textSize="12sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:fontFamily="@font/poppins_medium"
                        android:lineSpacingExtra="14sp"
                        android:text="Popular Rave Parties"
                        android:textColor="#2b2b2b"
                        android:textSize="22sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/poppins_bold"
                        android:lineSpacingExtra="14sp"
                        android:text="in London you will love!  "
                        android:textColor="#000000"
                        android:textSize="22sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:fontFamily="@font/poppins_regular"
                        android:lineSpacingExtra="5sp"
                        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor sed do eiusmod tempor aliquip ex ea. Lorem ipsum dds olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor sed do eiusmod tempor aliquip ex ea."
                        android:textColor="#202020"
                        android:textSize="13sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:layout_marginBottom="22dp"
                        android:fontFamily="@font/poppins_regular"
                        android:lineSpacingExtra="5sp"
                        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor sed do eiusmod tempor aliquip ex ea. Lorem ipsum dds olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor sed do eiusmod tempor aliquip ex ea.  Lorem ipsum dds olor sit amet, consdafas ectetur adipiscing elit, Lorem ipsum dds olor sit amet, consectetur adipiscing elit,"
                        android:textColor="#202020"
                        android:textSize="13sp" />


                </LinearLayout>


            </LinearLayout>


        </androidx.core.widget.NestedScrollView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:layout_alignParentBottom="true"
            android:background="#ffffff"
            android:orientation="horizontal">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"

                android:gravity="center"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/like" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="8dp"
                    android:fontFamily="@font/poppins_semibold"
                    android:letterSpacing="0.02"
                    android:lineSpacingExtra="4sp"
                    android:text="2,687"
                    android:textColor="#fd0686"
                    android:textSize="14sp" />

            </LinearLayout>

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

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/eye" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="8dp"
                    android:fontFamily="@font/poppins_semibold"
                    android:letterSpacing="0.02"
                    android:lineSpacingExtra="4sp"
                    android:text="2,687"
                    android:textColor="#fd0686"
                    android:textSize="14sp" />

            </LinearLayout>

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

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/message" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="8dp"
                    android:fontFamily="@font/poppins_semibold"
                    android:letterSpacing="0.02"
                    android:lineSpacingExtra="4sp"
                    android:text="2,687"
                    android:textColor="#fd0686"
                    android:textSize="14sp" />

            </LinearLayout>


        </LinearLayout>

    </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/colorPrimaryDark"
    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_chevron_left_white_24dp" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_regular"
            android:letterSpacing="0.01"
            android:lineSpacingExtra="7sp"
            android:text="Prev"
            android:textColor="#ffffff"
            android:textSize="14sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_regular"
            android:letterSpacing="0.01"

            android:lineSpacingExtra="7sp"
            android:text="Next"
            android:textColor="#ffffff"
            android:textSize="14sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="26dp"
            android:src="@drawable/ic_chevron_right_white_24dp" />


    </LinearLayout>

</androidx.appcompat.widget.Toolbar>

Now run the app and see the output, you will see the beautiful Android free XML layout for Blog Detail Screen.

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Leave a comment

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