Design Facebook Feed UI using Android Studio

This tutorial will teach you how to design Facebook Feed UI using Android Studio.

Design Facebook Feed UI using Android Studio

Design Facebook Feed UI using Android Studio

Source Code:

Download

Step 1:

Create a blank android project. Then add Recyclerview and Vector Support for your project.

add “vectorDrawables.useSupportLibrary = true” to your defaultConfig. Add implementation ‘com.android.support:recyclerview-v7:27.1.1’ to your dependencies.

add vector drawable support

Step 2:

Add the following codes to colors.xml

<color name="white">#FFF</color>
<color name="black">#000</color>
<color name="light_grey">#e4e4e4</color>
<color name="grey">#8b8b8b</color>
<color name="dark_grey">#696969</color>

Step 3:

Create feed_item.xml

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

    <RelativeLayout
        android:id="@+id/rellay1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp">

        <ImageView
            android:id="@+id/img_pp"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_propic3"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/img_pp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:text="Facebook Owner"
                android:textColor="@color/black"
                android:textSize="17sp"/>

            <TextView
                android:id="@+id/post_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:textColor="@color/grey"
                android:text="11 hrs"
                android:textSize="13sp"/>

        </LinearLayout>

    </RelativeLayout>

    <TextView
        android:id="@+id/status"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rellay1"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:text="This is a Facebook Post"
        android:textColor="@color/dark_grey"
        android:textSize="16sp"/>

    <ImageView
        android:id="@+id/postPic"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/status"
        android:layout_marginTop="5dp"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:src="@drawable/img_post2"/>

    <RelativeLayout
        android:id="@+id/rellay2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/postPic"
        android:layout_marginTop="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginLeft="15dp">

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

            <ImageView
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:src="@drawable/ic_like" />

            <TextView
                android:id="@+id/like_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="10"
                android:textColor="@color/black"
                android:textSize="13sp"/>
        </LinearLayout>

        <TextView
            android:id="@+id/like_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="8 comments"
            android:textColor="@color/black"
            android:textSize="13sp"/>

    </RelativeLayout>

    <ImageView
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/rellay2"
        android:layout_marginTop="10dp"
        android:background="@color/light_grey"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_below="@+id/line">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">

                <ImageView
                    android:layout_width="18dp"
                    android:layout_height="18dp"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/ic_like_btn"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:fontFamily="sans-serif-medium"
                    android:text="Like"
                    android:textColor="@color/black"
                    android:textSize="13sp"/>
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">

                <ImageView
                    android:layout_width="18dp"
                    android:layout_height="18dp"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/ic_comment_btn"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:fontFamily="sans-serif-medium"
                    android:text="Comment"
                    android:textColor="@color/black"
                    android:textSize="13sp"/>
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">

                <ImageView
                    android:layout_width="18dp"
                    android:layout_height="18dp"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/ic_share_btn"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="Share"
                    android:fontFamily="sans-serif-medium"
                    android:textSize="13sp"
                    android:textColor="@color/black"/>
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

Download Source Code.

Download

More Tutorials: How to design Calculator Using HTML, CSS and Javacript

Please Subscribe our Youtube Channel: Subscribe

LEAVE A REPLY

Please enter your comment!
Please enter your name here