Profile Screen for social Android Application with Android Source code.

ronnystudio-profilescreen-androidstudio
Here is the Profile Screen for social Android Application 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

In this tutorial, we will design a single screen for onboarding. you can develop a full three or four screen onboarding for your project.

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.

Name your project as per your convenience and click finish.

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

Watch this video tutorial for step 1 here.

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="gray">#8f8f8f</color>
    <color name="textcolor">#131314</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="_59">+59</string>
    <string name="architect">Architect</string>
    <string name="zofia_kowalski">Zofia Kowalski</string>
    <string name="following">Following</string>
    <string name="_8942">8942</string>
    <string name="folowers">Folowers</string>
    <string name="_1256">1256</string>
    <string name="posts">Posts</string>
    <string name="_34">34</string>

</resources>

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

<resources>

    <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. 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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_above="@+id/profile_layout"
        android:layout_height="match_parent">




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

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

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



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="3"
            android:layout_margin="27dp"
            android:layout_gravity="bottom"
            android:orientation="horizontal">

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

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15.4sp"
                    android:textColor="@color/white"
                    android:lineSpacingExtra="2.6sp"
                    android:gravity="center_horizontal"
                    android:text="@string/_34"
                    />

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="13.4sp"
                    android:textColor="#9b9ca3"
                    android:lineSpacingExtra="2.6sp"
                    android:gravity="center_horizontal"
                    android:text="@string/posts"
                    />

            </LinearLayout>

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

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15.4sp"
                    android:textColor="@color/white"
                    android:lineSpacingExtra="2.6sp"
                    android:gravity="center_horizontal"
                    android:text="@string/_1256"
                    />

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="13.4sp"
                    android:textColor="#9b9ca3"
                    android:lineSpacingExtra="2.6sp"
                    android:gravity="center_horizontal"
                    android:text="@string/folowers"
                    />

            </LinearLayout>

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

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15.4sp"
                    android:textColor="@color/white"
                    android:lineSpacingExtra="2.6sp"
                    android:gravity="center_horizontal"
                    android:text="@string/_8942"
                    />

                <customfonts.TextView_Lato_Regular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="13.4sp"
                    android:textColor="#9b9ca3"
                    android:lineSpacingExtra="2.6sp"
                    android:gravity="center_horizontal"
                    android:text="@string/following"
                    />

            </LinearLayout>


        </LinearLayout>



    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:id="@+id/profile_layout"
        android:layout_above="@+id/view"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="23sp"
            android:textColor="#131314"
            android:layout_marginLeft="15.4dp"
            android:layout_marginTop="20dp"
            android:lineSpacingExtra="5sp"
            android:text="@string/zofia_kowalski"
            android:layout_marginStart="15.4dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="13.4sp"
            android:layout_marginLeft="15.4dp"
            android:layout_marginTop="3dp"
            android:textColor="#77777a"
            android:lineSpacingExtra="2.6sp"
            android:text="@string/architect"
            />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15.4dp"
            android:weightSum="5"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="56.6dp"
                android:layout_height="56.6dp"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/pf_one"/>

            <ImageView
                android:layout_width="56.6dp"
                android:layout_height="56.6dp"
                android:layout_weight="1"
                android:layout_marginLeft="15.4dp"
                android:scaleType="centerCrop"
                android:src="@drawable/pf_two"/>


            <ImageView
                android:layout_width="56.6dp"
                android:layout_height="56.6dp"
                android:layout_weight="1"
                android:layout_marginLeft="15.4dp"
                android:scaleType="centerCrop"
                android:src="@drawable/pf_three"/>


            <ImageView
                android:layout_width="56.6dp"
                android:layout_height="56.6dp"
                android:layout_weight="1"
                android:layout_marginLeft="15.4dp"
                android:scaleType="centerCrop"
                android:src="@drawable/pf_four"
                android:layout_marginStart="15.4dp" />



            <FrameLayout
                android:layout_width="56.6dp"
                android:layout_height="56.6dp"
                android:background="@color/gray"
                android:layout_marginLeft="15.4dp"

                android:layout_weight="1"
                android:layout_marginStart="15.4dp">

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

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="15.4sp"
                        android:textColor="#fafafa"
                        android:lineSpacingExtra="2.6sp"
                        android:gravity="center_horizontal"
                        android:text="@string/_59"
                        />


                </LinearLayout>



            </FrameLayout>



        </LinearLayout>

    </LinearLayout>



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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:weightSum="3"
        android:id="@+id/bottomlayout"
        android:layout_alignParentBottom="true"

        android:layout_gravity="bottom"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_pfmenu"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/pf_btnlove"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_pfshare"/>



        </LinearLayout>


    </LinearLayout>

</RelativeLayout>

Here we include one XML file for a toolbar so here is code for toolbar_profilefour

<?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="wrap_content"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/search_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/spacing_middle"
        android:layout_marginLeft="@dimen/spacing_middle"
        android:layout_marginRight="@dimen/spacing_middle"
        android:layout_marginTop="@dimen/spacing_large"
        android:background="@android:color/transparent"
        >

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

            <ImageButton
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:tint="@color/white"
                app:srcCompat="@drawable/ic_keyboard_backspace_black_24dp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
                android:textColor="@color/textcolor" />

            <ImageButton
                android:layout_width="?attr/actionBarSize"
                android:tint="@color/white"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                app:srcCompat="@drawable/ic_more_vert_black_24dp" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Now run the app and see the output, you will see the nice Profile Screen for social Android Application with Android Source code for your next android project.

So that’s all for this Profile Screen for social Android Application with Android Source code Tutorial. If you are having any confusion or queries please do comment. Thank You.

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Leave a comment

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

Related Posts