Saturday, August 15, 2015

Profile Page With Circular Image View


.

Profile Page With Circular Image View
Using Android Studio 1.4

1) Create a new Empty Project

Project Name: MyProfile
Activity Template: Empty Activity
Activity Name: MyProfile
Layout Name: activity_myprofile

2) Add Dependencies Item

apply plugin'com.android.application'
android {
   compileSdkVersion 23
   buildToolsVersion "23.0.1"
   defaultConfig {
       applicationId "com.notarazi.myprofile"
       minSdkVersion 14
       targetSdkVersion 23
       versionCode 1
       versionName "1.0"
   }
   buildTypes {
       release {
           minifyEnabled false
           proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
       }
   }
}
dependencies {
   compile fileTree(dir'libs'include: ['*.jar'])
   testCompile 'junit:junit:4.12'
   compile 'com.android.support:appcompat-v7:23.1.0'
   compile 'com.joooonho:selectableroundedimageview:1.0.1'
}

3) Edit Resource

3.1) Add image to drawable folder

res/drawable/photo.png
photo.png

3.2) Edit Layout (add Circular Image View)

res/layout/activity_my_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MyProfile">
   <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical" >
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical" >
           <com.joooonho.SelectableRoundedImageView
               android:layout_width="120dp"
               android:layout_height="120dp"
               android:layout_gravity="center"
               android:scaleType="centerCrop"
               android:src="@drawable/photo"
               app:sriv_border_color="#FFCC00"
               app:sriv_border_width="2dp"
               app:sriv_oval="true" />
       </LinearLayout>
   </ScrollView>
</RelativeLayout>
OUTCOME.

DOWNLOAD

3.3) Edit Layout (add Profile Fields)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MyProfile">
   <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical" >
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical" >
           <com.joooonho.SelectableRoundedImageView
               android:layout_width="120dp"
               android:layout_height="120dp"
               android:layout_gravity="center"
               android:scaleType="centerCrop"
               android:src="@drawable/photo"
               app:sriv_border_color="#FFCC00"
               app:sriv_border_width="2dp"
               app:sriv_oval="true" />
           <TextView
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:layout_marginTop="20dp"
               android:text="Personal Profile"/>
           <EditText
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:inputType="text"
               android:hint="Name"/>
           <EditText
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:inputType="phone"
               android:hint="Phone number"/>
           <EditText
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:inputType="textEmailAddress"
               android:hint="Email"/>
           <Button
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:text="OK"
               />
       </LinearLayout>
   </ScrollView>
</RelativeLayout>
OUTCOME.

DOWNLOAD

REFERENCES

Original Project:http://www.devexchanges.info/2015/10/tip-shapebordercircle-image-in-android.html 
Original Master Codes: RoundImageSample-master.zip

.

2 comments:

  1. Hi! What is the code for storing the user input and showing it afterwards in the editText?

    ReplyDelete