Home Tutorials Design Facebook Feed UI using Android Studio

Design Facebook Feed UI using Android Studio

250
0

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