Circle Image Profile - Android Layouts

Circle Image

Download MaterialX 2.8

Get the Full Android Source Code for all the listed Layouts and more.

Layout Screenshot

Layout
Java

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent"
    android:background="@color/grey_10"
    android:fitsSystemWindows="true">

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:background="@color/blue_500"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/blue_500"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:titleEnabled="false">

<androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:contentInsetStartWithNavigation="0dp"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</FrameLayout>

</com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
        android:id="@+id/nested_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="-200dp"
        android:clipToPadding="false"
        android:scrollbars="none"
        android:scrollingCache="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

<com.mikhaellopez.circularimageview.CircularImageView
                    android:id="@+id/image"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/photo_male_2"
                    app:civ_border="true"
                    app:civ_border_color="@android:color/white"
                    app:civ_border_width="1dp"
                    app:civ_shadow="true"
                    app:civ_shadow_radius="0" />

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>

<androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/spacing_large"
                android:layout_marginTop="@dimen/spacing_middle"
                android:layout_marginRight="@dimen/spacing_large"
                android:background="@android:color/white"
                app:cardCornerRadius="2dp"
                app:cardElevation="1dp"
                app:cardUseCompatPadding="true">

<com.mikhaellopez.circularimageview.CircularImageView
                            android:id="@+id/image_1"
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            app:civ_border="false" />

<com.mikhaellopez.circularimageview.CircularImageView
                            android:id="@+id/image_2"
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            app:civ_border="false" />

<com.mikhaellopez.circularimageview.CircularImageView
                            android:id="@+id/image_3"
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            app:civ_border="false" />

<com.mikhaellopez.circularimageview.CircularImageView
                            android:id="@+id/image_4"
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            app:civ_border="false" />

</LinearLayout>

</LinearLayout>

</androidx.cardview.widget.CardView>

<com.mikhaellopez.circularimageview.CircularImageView
                                android:layout_width="@dimen/spacing_xlarge"
                                android:layout_height="@dimen/spacing_xlarge"
                                android:foreground="@color/overlay_light_20"
                                android:src="@drawable/photo_male_7"
                                app:civ_border="false"
                                app:civ_shadow="true"
                                app:civ_shadow_radius="0" />

</LinearLayout>

</LinearLayout>

<com.mikhaellopez.circularimageview.CircularImageView
                                android:layout_width="@dimen/spacing_xlarge"
                                android:layout_height="@dimen/spacing_xlarge"
                                android:foreground="@color/overlay_light_20"
                                android:src="@drawable/photo_female_1"
                                app:civ_border="false"
                                app:civ_shadow="true"
                                app:civ_shadow_radius="0" />

</LinearLayout>

</LinearLayout>

</androidx.cardview.widget.CardView>

</LinearLayout>

</androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

											
package com.material.components.activity.profile;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.Toast;

import com.material.components.R;
import com.material.components.utils.Tools;

public class ProfileCircleImage extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_profile_circle_image);
        initToolbar();

        // display image
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_1), R.drawable.image_18);
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_2), R.drawable.image_30);
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_3), R.drawable.image_21);
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_4), R.drawable.image_23);
    }

    private void initToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle(null);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        Tools.setSystemBarColor(this, R.color.indigo_500);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_search_setting, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        } else {
            Toast.makeText(getApplicationContext(), item.getTitle() + " clicked", Toast.LENGTH_SHORT).show();
        }
        return super.onOptionsItemSelected(item);
    }
}