Free profile design with Collapsing Toolbar for android – Source Code included

Published by Kapil Mohan on March 24, 2019March 24, 2019

Free profile design for Android Studio. Minimal design with gradient header, for editing, use yellow-shadow icons from flaticon.com. For header edit header with your gradient start and end color. Suitable for Material design and clean UI Apps. Full Source code included

Instructions:

Include Scrolling Activity from New > Activity > Scrolling Activity
Remove FAB from Java Code, as this won’t be used in the design

Preview
Gradle
Manifest
Layout
Drawables
Values

No additional libraries required, other than support, constraint layout from android.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:design:27.1.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Set the activity theme to ProfileTheme

android:theme="@style/AppTheme.ProfileTheme"

Complete Activity Code

        <activity
            android:name=".ProfileActivity"
            android:label="@string/title_activity_profile"
            android:theme="@style/AppTheme.ProfileTheme">
        </activity>

Currently, we are having only one activity so back button is not added. If you need back button set parent meta in manifest.

activity_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.appsnipp.profiledesigns.ProfileActivity"
    android:background="@color/profileBackground">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/profilePrimaryDark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/TransparentText">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:orientation="vertical"
                    android:id="@+id/linearLayout"
                    android:background="@drawable/profile_bk">

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

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="\@appsnippuser"
                        android:textSize="28dp"
                        android:textStyle="bold"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="[email protected]"
                        android:textSize="12dp"
                        android:textStyle="bold"/>

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:layout_gravity="bottom"
                        android:layout_marginTop="20dp"
                        android:background="@color/profileBackground">

                        <View
                            android:layout_alignParentTop="true"
                            android:layout_width="match_parent"
                            android:layout_height="30dp"
                            android:background="@drawable/profile_bk"/>

                        <TextView
                            android:text="Back to\nHome"
                            style="@style/profileStyledBackButton" />
                    </RelativeLayout>

                </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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


</android.support.design.widget.CoordinatorLayout>

content_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.appsnipp.profiledesigns.ProfileActivity"
    tools:showIn="@layout/activity_profile">

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

            <TextView
                style="@style/headerText"
                android:text="Account Info"
                android:layout_marginBottom="20dp"/>

            <RelativeLayout style="@style/profileDetailsLayout">
                <ImageView
                    android:id="@+id/nameImageView"
                    android:src="@drawable/ic_name"
                    style="@style/profileDetailsImage" />

                <TextView
                    android:id="@+id/nameTextView"
                    android:text="Name"
                    android:layout_toRightOf="@id/nameImageView"
                style="@style/profileDetailsTextMain" />

                <TextView
                    android:text="developer"
                    android:layout_toRightOf="@id/nameImageView"
                    style="@style/profileDetailsMiniText" />

            </RelativeLayout>

            <View style="@style/proifleDetailsView" />
            <RelativeLayout style="@style/profileDetailsLayout">
                <ImageView
                    android:id="@+id/mobileImageView"
                    android:src="@drawable/ic_mobile"
                    style="@style/profileDetailsImage" />

                <TextView
                    android:text="Mobile"
                    android:layout_toRightOf="@id/mobileImageView"
                    style="@style/profileDetailsTextMain"/>

                <TextView
                    android:text="+91-8129999999"
                    android:layout_toRightOf="@id/mobileImageView"
                    style="@style/profileDetailsMiniText" />

            </RelativeLayout>

            <View style="@style/proifleDetailsView" />
            <RelativeLayout style="@style/profileDetailsLayout">
                <ImageView
                    android:id="@+id/emailImageView"
                    android:src="@drawable/ic_email"
                    style="@style/profileDetailsImage" />

                <TextView
                    android:text="Email"
                    android:layout_toRightOf="@id/emailImageView"
                    style="@style/profileDetailsTextMain" />

                <TextView
                    android:text="[email protected]"
                    android:layout_toRightOf="@id/emailImageView"
                    style="@style/profileDetailsMiniText" />

            </RelativeLayout>

            <View style="@style/proifleDetailsView" />
            <RelativeLayout style="@style/profileDetailsLayout">
                <ImageView
                    android:id="@+id/addressImageView"
                    android:src="@drawable/ic_address"
                    style="@style/profileDetailsImage" />

                <TextView
                    android:text="Address"
                    android:layout_toRightOf="@id/addressImageView"
                    style="@style/profileDetailsTextMain" />

                <TextView
                    android:text="Avenue 2nd Street NW SY."
                    android:layout_toRightOf="@id/addressImageView"
                    style="@style/profileDetailsMiniText" />

            </RelativeLayout>

            <View style="@style/proifleDetailsView" />
            <RelativeLayout style="@style/profileDetailsLayout">
                <ImageView
                    android:id="@+id/dobImageView"
                    android:src="@drawable/ic_dob"
                    style="@style/profileDetailsImage" />

                <TextView
                    android:text="D.O.B"
                    android:layout_toRightOf="@id/dobImageView"
                    style="@style/profileDetailsTextMain" />

                <TextView
                    android:text="12-05-1990"
                    android:layout_toRightOf="@id/dobImageView"
                    style="@style/profileDetailsMiniText" />

            </RelativeLayout>

            <View style="@style/proifleDetailsView" />

        </LinearLayout>

</android.support.v4.widget.NestedScrollView>

ProfileActivity.Java

Doesn’t include any additional code, given for reference only.

package com.appsnipp.profiledesigns;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class ProfileActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_profile);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
}

download drawable Download

download drawables folder and copy the contents to drawables.

Included files:

back_to_home_button.xml
ic_address.png
ic_dob.png
ic_email.png
ic_mobile.png
ic_name.png
profile_back_button.xml
profile_bk.xml
profile_round.png

NB:- if the folder contains any other filer, please ignore.

Use yellow shadow icons from flaticon.com for editing.

colors.xml

    <!--colors for profile-->
    <color name="profilePrimaryDark">#FF3B30</color>
    <color name="profileAccentColor">#F7F7F7</color>
    <color name="whiteTextColor">#fff</color>
    <color name="profileBackground">#fff</color>
    <color name="blackTextColor">#000</color>
    <color name="profileEditTextColor">#707070</color>

dimens.xml

<resources>
    <dimen name="app_bar_height">180dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="text_margin">16dp</dimen>
    <dimen name="headerTextSize">28sp</dimen>
</resources>

strings.xml

    <string name="title_activity_profile">Profile</string>
    <string name="action_settings">Settings</string>

styles.xml

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <!--styles for profile-->
    <style name="AppTheme.ProfileTheme">
        <item name="colorPrimaryDark">@color/profilePrimaryDark</item>
        <item name="colorAccent">@color/profileAccentColor</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:textColor">@color/whiteTextColor</item>
    </style>

    <style name="TransparentText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00000000</item>
    </style>

    <style name="parent">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="headerText" parent="parent">
        <item name="android:textSize">@dimen/headerTextSize</item>
        <item name="android:textColor">@color/blackTextColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="textInputHintStyle" parent="TextAppearance.AppCompat.Medium.Inverse">
        <item name="android:textColorHint">@color/blackTextColor</item>
        <item name="android:textColor">@color/blackTextColor</item>
        <item name="android:textSize">17sp</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="viewParent">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="profileDetailsLayout" parent="parent">
        <item name="android:layout_marginTop">20dp</item>
    </style>

    <style name="profileDetailsImage">
        <item name="android:layout_width">40dp</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:layout_alignParentTop">true</item>
        <item name="android:layout_alignParentLeft">true</item>
    </style>

    <style name="profileDetailsTextMain" parent="viewParent">
        <item name="android:textColor">@color/blackTextColor</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">16sp</item>
        <item name="android:layout_marginLeft">10dp</item>
    </style>

    <style name="profileDetailsMiniText" parent="viewParent">
        <item name="android:layout_alignParentBottom">true</item>
        <item name="android:textColor">@color/blackTextColor</item>
        <item name="android:textSize">14sp</item>
        <item name="android:layout_marginLeft">10dp</item>
    </style>

    <style name="proifleDetailsView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">2dp</item>
        <item name="android:background">@color/profileAccentColor</item>
        <item name="android:layout_marginTop">5dp</item>
    </style>

    <style name="profileStyledBackButton">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">@drawable/profile_back_button</item>
        <item name="android:textAlignment">center</item>
        <item name="android:paddingLeft">30dp</item>
        <item name="android:paddingRight">50dp</item>
        <item name="android:paddingTop">10dp</item>
        <item name="android:paddingBottom">10dp</item>
        <item name="android:drawableLeft">@drawable/back_to_home_button</item>
        <item name="android:textStyle">bold</item>
        <item name="android:layout_centerHorizontal">true</item>
        <item name="android:layout_alignParentTop">true</item>
        <item name="android:minWidth">250dp</item>
    </style>

Download Source Code

Project Details:

Android Studio : 3.0.1
minSDK : 16
Target SDK : 27

Keywords:

android ui, android designs, android profile designs, free designs, profile snippets, free android profile design, android design with source code, free android source code, free minimal profile designs, gradient design inspirations, android profile design, android profile design sample.

For XD designs, please comment on your email.