Android XML 中 Fragment/Activity 外的浮动个人资料图片

Question

我正在尝试创建一个ui个人资料ui，这样用户图片就outside/floating在剩余内容之上，就像这张图片中那样。

我使用了底部的 sheet 对话框片段并创建了必要的 xml 小部件，但它并不是这样显示的。我如何堆叠这种类型的 ui.

这是我目前的 xml 实现：

<?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>

我使用哪种布局来实现此目的ui。我试过用框架布局替换主要的相对布局，但没有按照我想要的方式工作。任何帮助，将不胜感激。谢谢。

这里是这个 xml 的结果输出和评论的贡献，与上面的期望输出形成对比：

以及在适配器代码中调用片段的位置：

 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");
        }
    });

片段 java 文件只有 xml 个正在初始化的对象和使用 findviewbyid() and viewpageradapter to add fragments

添加的选项卡布局片段

Answer 1

取答案：添加到您的风格：

<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>

还有你的 java class CustomDialogFragment extends BottomSheetDialogFragment 这个：

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

Android XML 中 Fragment/Activity 外的浮动个人资料图片

Android Floating Profile Image Outside Fragment/Activity in XML

user-interface

android

user-profile

bottom-sheet