Android Floating Profile Image Outside Fragment/Activity in XML

问题

I am trying to build a profile ui such that the user image is just outside/floating on top of the remaining content like in this image.

I have used a bottom sheet dialog fragment and created the necessary xml widgets but it doesn't appear like this. How do I stack this type of ui.

Here's my xml implementation so far:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"

android:gravity="bottom"
android:background="@android:color/transparent">

<LinearLayout
    android:id="@+id/imageLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="bottom|center_horizontal"
    android:background="@android:color/transparent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/infoCIV"
        android:layout_width="100dp"
        android:layout_height="100dp"
        tools:src="@drawable/ic_players"
        app:civ_border_color="@color/colorPrimary"
        app:civ_border_width="1dp"/>

</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/date_dialog_bkg"
    android:layout_below="@+id/imageLayout"
    android:layout_marginTop="1dp">

    <android.support.design.widget.TabLayout
        android:id="@+id/playerTabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?android:attr/actionBarSize"
        app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:tabIndicatorHeight="3dp"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabTextColor="@color/text_color"
        app:tabSelectedTextColor="@color/colorPrimary"
        android:background="@drawable/tabs_underline_bkg"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/playerVP"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="100dp"
        android:layout_below="@+id/playerTabs"/>

</RelativeLayout>

</RelativeLayout>

Which layout do I use to achieve this ui. I've tried replacing the main Relative Layout with a Frame Layout but not worked the way I want it. Any help would be appreciated. Thanks.

Here's the resulting output of this xml and contribution from comments in contrast with the desired output above:

and where the fragment is called from in adapter code:

 viewholder.playerRootLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            PlayerInfoFragment fragment = new PlayerInfoFragment();
            Bundle bundle = new Bundle();
            bundle.putString(PLAYER_KEY_IMAGE_URL, players.getImageURL());
            String fullName = players.getFirstName() + " " + players.getLastName();
            bundle.putString(PLAYER_KEY_NAME, fullName);
            bundle.putString(PLAYER_KEY_ADDRESS, players.getAddress());
            bundle.putString(PLAYER_KEY_STATE, players.getStatePlayer());
//                bundle.putString(KEY_, players.);
            fragment.setArguments(bundle);
            fragment.setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_Material_Light_NoActionBar);
            fragment.show(((AppCompatActivity)context).getSupportFragmentManager(), "PlayerInfoFragment");
        }
    });

The fragment java file has only xml objects initializing and the tab layout fragments added using findviewbyid() and viewpageradapter to add fragments

回答1:

Take the answer: Add to your style this:

<style name="CustomBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
</style>

<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
</style>

and to your java class CustomDialogFragment extends BottomSheetDialogFragment this:

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setStyle(BottomSheetDialogFragment.STYLE_NORMAL, R.style.CustomBottomSheetDialogTheme);
}

来源：https://stackoverflow.com/questions/53806628/android-floating-profile-image-outside-fragment-activity-in-xml