无法为片段交易获得正确的设计

Question

currently i am trying to create a fragment design that will show when the plus button is clicked. It looks like this.

This is what i am getting.

this is the code for the fragment to display. promptFragment xml:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="316dp"
    android:layout_height="250dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="24dp"
    android:background="@drawable/promptforadd"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.433"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <TextView
        android:id="@+id/textViewTakePhoto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:paddingBottom="180dp"
        android:text="Take Photo"
        android:textSize="24sp" />


</LinearLayout>

<Button
    android:id="@+id/buttonCancel"
    android:layout_width="316dp"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/cancelbutton"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout2"
    app:layout_constraintVertical_bias="1.0" />

This is the current design corresponding to the above xml file.

This is the code to inflate my fragment.

public class PromptFragment extends Fragment {

TextView textViewTakePhoto;
TextView textViewAlbum;
TextView textViewAddOutfit;
Button buttonCancel;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.layout_promptforadd,container,false);
    textViewTakePhoto = v.findViewById(R.id.textViewTakePhoto);
    //textViewAlbum = v.findViewById(R.id.textViewAlbum);
    //textViewAddOutfit = v.findViewById(R.id.textViewAddOutfit);
    buttonCancel = v.findViewById(R.id.buttonCancel);

    buttonCancel.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(v.getContext(),"you clicked on button ",Toast.LENGTH_SHORT).show();
        }
    });
    return v;
    }
}

I added a frame layout inside the home activity where i want my fragment to inflate. I use fragment transaction to add my fragment in the frame layout. My fragment design does not even correspond to the output that i am getting so I am not sure how to go about doing it.

Answer 1

Okay i managed to solve it ! here is the xml file for anyone who is interested.

promptFrag xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">


<Button
    android:id="@+id/buttonCancel"
    android:layout_width="316dp"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="10dp"
    android:background="@drawable/cancelbutton" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="316dp"
    android:layout_height="217dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="80dp"
    android:background="@drawable/promptforadd"
    android:contentDescription="@null" />

<TextView
    android:id="@+id/textViewTakePhoto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="247dp"
    android:text="Take Photo"
    android:textSize="24sp" />

<TextView
    android:id="@+id/textViewAlbum"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="170dp"
    android:text="Choose from album"
    android:textSize="24sp" />

<TextView
    android:id="@+id/textViewAddOutfit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="99dp"
    android:text="Add Outfit"
    android:textSize="24sp" />

</RelativeLayout>