Overlapping two circular image views

Question

I am working on the following design:

I have used the following code to implement this in android :

1.activity_welcome.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin40"
        android:text="Welcome to Almachat"
        android:textColor="#ffffff"
        android:textSize="20dp" />

    <com.almabay.almachat.circularImageView.CircularImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="210dp"
        android:background="@drawable/color" />
    <com.almabay.almachat.circularImageView.CircularImageView
        android:id="@+id/profilePic"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="-50dp" />

    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="#ffffff"
        android:textSize="30dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txtSomeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Some static text will be here"
        android:textColor="#ffffff"
        android:textSize="20dp" />

    <Button
        android:id="@+id/btnContinue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin20"
        android:background="#F7AE21"
        android:padding="@dimen/padding20"
        android:text="Continue"
        android:textColor="#ffffff" />
</LinearLayout>

2. colors.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:angle="270"
        android:endColor="#F7AE21"
        android:startColor="#F7AE21" />
    <stroke
        android:width="10dp"
        android:color="#F7AE21"></stroke>
</shape>

3.WelcomeActivity.java

    package com.almabay.almachat.activity;

import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.media.Image;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;

import com.almabay.almachat.R;
import com.almabay.almachat.bean.Bean_LoginDetails;
import com.almabay.almachat.sharedPreference.Prefs_Registration;
import com.squareup.picasso.Picasso;

/**
 * Created by deepakr on 1/29/2016.
 */
public class WelcomeActivity extends Activity {
    ImageView imgProfilePic;
    TextView txtName;
    String name, thumbnailURL;
    SharedPreferences preferences;

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

        //findViewById
        imgProfilePic = (ImageView) findViewById(R.id.profilePic);
        txtName = (TextView) findViewById(R.id.txtName);

        //initialization
        preferences = getApplicationContext().getSharedPreferences(Prefs_Registration.prefsName, Context.MODE_PRIVATE);

        //Getting values form Shared Preferences
        name = preferences.getString(Prefs_Registration.get_user_name,null);
        Log.e("Name", name);
        thumbnailURL = preferences.getString(Prefs_Registration.get_user_thumbnail,null);
        Log.e("thumbnail URL",thumbnailURL);
        // Loading thumbnailURL into circular image view using Picasso
        Picasso.with(WelcomeActivity.this).load(thumbnailURL).into(imgProfilePic);
        txtName.setText(name);

    }
}

After using the above mentioned code ,i am getting the following design:

My problem is that circular image view having orange color should be above the circular image view having profile pic .But here the profile pic is above the image view having orange color.How can i fix it?

Answer 1

That's very easy i think.

Just switch the CircularImageViews in the xml.

So

<com.almabay.almachat.circularImageView.CircularImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginLeft="210dp"
    android:background="@drawable/color" />
<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/profilePic"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:layout_marginTop="-50dp" />

becomes

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/profilePic"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:layout_marginTop="-50dp" />
<com.almabay.almachat.circularImageView.CircularImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginLeft="210dp"
    android:background="@drawable/color" />

Views in xml are added in order, so the latest added will be on top.

You should tweak the marginTops after that I think

EDIT: I think a better solution is to wrap the two CircularImageViews in a FrameLayout.
can you try something like this and maybe tweak the sizes to your liking?

<FrameLayout
    android:layout_width="220dp"
    android:layout_height="230dp"
    android:layout_gravity="center">
    <com.almabay.almachat.circularImageView.CircularImageView
        android:id="@+id/profilePic"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom" />
    <com.almabay.almachat.circularImageView.CircularImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="top|right"
        android:background="@drawable/color" />
</FrameLayout>

Answer 2

您应在布局中将橙色的一个放在蓝色的一个之后 。

Answer 3

将RelativeLayout末尾的视图显示在顶部，并将其他视图重叠时，对图像使用RelativeLayout。