方向更改后还原视图

Question

I have a Fragment that contain EditText and ImageView that's need to be retain across configuration changes so I tried to save the text and the bitmap via onSaveInstanceState .

But when I rotate the device problems start.

the text i saved overlap with the hint of EditText and the bitmap overlap with the original placeholder of the ImageView .

I've tried to do the restore from various methods ( onCreateView , onViewCreated and onViewStateRestored ). But still the same problem remain.

so instead of onSaveInstanceState I used setRetainInstance(true) and the problem remain with the text overlap the hint in EditText .

So where did I do wrong? AND how to solve this.

this is the EditText :

<EditText
    android:id="@+id/username_editext"
    android:layout_centerVertical="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/enter_ur_name"
    android:inputType="text"
    android:lines="1"
    android:padding="8dp"/>

and this is the ImageView :

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/profile_image"
    android:layout_above="@id/username_editext"
    android:layout_centerHorizontal="true"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/profile"
    />

and here is the code for save & restore via bundle :

public void onViewStateRestored(@Nullable Bundle savedInstanceState) {
    super.onViewStateRestored(savedInstanceState);

    if(savedInstanceState != null){
        Bitmap map = (Bitmap) savedInstanceState.getParcelable(BITMAP_KEY);
        if(map != null)
            mProfile.setImageBitmap(map);
        String name = savedInstanceState.getString(USERNAME_KEY);
        if(name != null)
            mUsernameEditext.setText(name);
    }
}

@Override
public void onSaveInstanceState(@NonNull Bundle outState) {
    if(isPhotoUploaded) {
        Bitmap map = ((BitmapDrawable)mProfile.getDrawable()).getBitmap();
        outState.putParcelable(BITMAP_KEY, map);
    }

    if(!mUsernameEditext.getText().toString().trim().equals("")){
        outState.putString(USERNAME_KEY , mUsernameEditext.getText().toString());
    }
}

Edit 1: This is the complete layout code:

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

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_above="@id/username_text_input_layout"
        android:layout_centerHorizontal="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/profile"
        />

    <android.support.design.widget.TextInputLayout
        android:layout_centerVertical="true"
        android:id="@+id/username_text_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/enter_ur_name"
        >
        <EditText
            android:id="@+id/username_editext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text"
            android:lines="1"
            android:padding="8dp"/>
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/upload_photo_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/upload_photo"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/username_text_input_layout"/>

    <Button
        android:id="@+id/next_btn"
        android:layout_below="@id/upload_photo_btn"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next"/>

</RelativeLayout>

Answer 1

I have found that if I use tag instead of container's id the issue is gone.

This is the code before to build the fragment :

    FragmentManager manager = getSupportFragmentManager();
    if (manager.findFragmentById(R.id.container) == null) {
        usernameFragment = UsernameFragment.newInstance();
        manager.beginTransaction()
                .add(R.id.container , usernameFragment)
                .commit();
    }

And this is the code now:

    FragmentManager manager = getSupportFragmentManager();
    if (manager.findFragmentByTag("user_name") == null) {
        usernameFragment = UsernameFragment.newInstance();
        manager.beginTransaction()
                .add(R.id.container , usernameFragment , "user_name")
                .commit();
    }

I still don't know why the first code make overlap in views if rotated. and returned null if I call getter of any view in fragment