Android Programming Tutorial 61 :CircularImage Example in Android Studio

Showning Profile Image in Circular Type:
Displaying the image in the Circular type,In this example we are discussing to show the our profile pic in circular type, when we are using the navigation or swiping screen this example is very useful.

CircularImageExample:

File >> New >> Android Application
Enter Project name: CircularImageApp
Package: com.kdms.circularimages
Keep other default selections, click Next until you reach Finish

                                    

  Add Following jar in build.gradle display below in the
 dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'de.hdodenhof:circleimageview:2.0.0'
    compile 'com.android.support:design:23.1.0'
}
Copy and Past the following code in the MainActivity.java
package com.kdms.circularimages;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}
 Copy and Past the following code in the layout file called activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#335781"
        android:gravity="center">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile"
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:src="@drawable/andi"
            app:civ_border_color="#000000"
            app:civ_border_width="2dp"/>

    </LinearLayout>

    <LinearLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="#000000"
        android:layout_weight="1">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:src="@drawable/andi"
            app:civ_border_width="2dp"
            app:civ_border_color="#ffffff"/>

    </LinearLayout>

</LinearLayout>
 Copy and Past the following code in the Manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.kdms.circularimages" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Run Your Project as the below by clicking on shift+10 or like the below-->Android Application and observe the output
      


OUTPUT: 




 

Please Send Your Comments To ambilpura.sunil@gmail.com

 
 Stay Tune For Next Tutorial... :What's App Type Example - I in Android StudioIn Android: