Free profile design with Collapsing Toolbar for android – Source Code included
Free profile design for Android Studio. Minimal design with gradient header, for
Instructions:
- Include Scrolling Activity from New > Activity > Scrolling Activity
- Remove FAB from Java Code, as this won’t be used in the design
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
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 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>
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.
