stackoom
  简体   繁体   中英

How to make a fragment fit in a FrameLayout in all screen sizes?

 原文  2019-03-27 19:06:43  4   1    android/ xml/ android-layout/ android-fragments

Question

I am developing an app where I want to show few fragments in a container(Framelayout) one after other. I want my fragments to fit in the framelayout without its parts going out of the screen.

I want this:

我要这个：

But Getting this:

但我明白了：

Here is my code snippet: 

<android.support.constraint.ConstraintLayout
    android:id="@+id/relativeLayout"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="24dp"
    android:layout_marginEnd="24dp"
    android:layout_marginBottom="24dp"
    android:background="@drawable/grey_border_circular_rect"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline3"
    app:layout_constraintVertical_bias="0.0">


     <FrameLayout
        android:id="@+id/fragment_holder"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="32dp"
        app:layout_constraintBottom_toTopOf="@+id/elipse1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

    <android.support.constraint.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="32dp" />


    <ImageView
        android:id="@+id/elipse1"
        android:layout_width="14dp"
        android:layout_height="14dp"
        app:layout_constraintEnd_toStartOf="@+id/elipse2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline4"
        app:srcCompat="@drawable/ic_elipse_filled"
        tools:layout_editor_absoluteY="568dp" />

    <ImageView
        android:id="@+id/elipse2"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/elipse1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/elipse1"
        app:srcCompat="@drawable/ic_elipse_blank" />
</android.support.constraint.ConstraintLayout>

I can't share the full xml code as I have some restriction on the code. But the Root layout is also a ConstraintLayout.

fragment.xml 

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">

<TextView
    android:id="@+id/otpVerificationTV"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="OTP Verification"
    android:textColor="@color/blue"
    android:textSize="24sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/view2"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_marginTop="8dp"
    android:background="@color/btn_grey"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/otpVerificationTV" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="40dp"
    android:layout_marginEnd="8dp"
    android:text="We sent you a code"
    android:textColor="@android:color/black"
    android:textSize="26sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/view2" />

<Button
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="56dp"
    android:background="@color/transparent"
    android:text="Resend OTP"
    android:textAllCaps="false"
    android:textColor="@color/grey_secondary"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/view3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView6" />

<View
    android:id="@+id/view3"
    android:layout_width="3dp"
    android:layout_height="30dp"
    android:layout_marginStart="10dp"
    android:background="@color/grey_secondary"
    app:layout_constraintBottom_toBottomOf="@+id/textView7"
    app:layout_constraintEnd_toStartOf="@+id/textView7"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/textView5" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:textColor="@color/blue"
    android:textSize="20sp"
    android:textStyle="bold"
    app:layout_constraintBaseline_toBaselineOf="@+id/textView5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/view3"
    tools:text="29 sec" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="56dp"
    android:text="OTP"
    android:textColor="@android:color/black"
    android:textSize="26sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView5" />

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="262dp"
    android:layout_height="48dp"
    android:layout_marginTop="8dp"
    android:background="@color/blue"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="@+id/textView8"
    app:layout_constraintTop_toBottomOf="@+id/textView8" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="72dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/blue_circular_rect"
    android:elevation="@dimen/btn_elevation"
    android:text="Next"
    android:textAllCaps="false"
    android:textColor="@color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/linearLayout"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
</android.support.constraint.ConstraintLayout>

So is there any possible way that I can make the fragment fit on any screen size and all of it is visible inside the framelayout.

1 answers

solution1
 0  2019-03-28 12:15:09

Below code will help with your fragment.xml file. You didn't provided more values files means color code, string file and other. So below are some changes from your file like drawable and value related data.

Fill free to put comment if you have any question related to below views. If below code work for you then please approve this answer. 

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        android:id="@+id/otpVerificationTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="OTP Verification"
        android:textColor="@android:color/holo_blue_light"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorGrey"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/otpVerificationTV" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="We sent you a code"
        android:textColor="@android:color/black"
        android:textSize="26sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/group2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/group2" />

    <android.support.constraint.Group
        android:id="@+id/group2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:constraint_referenced_ids="textView6"
        app:layout_constraintBottom_toTopOf="@id/group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view2" />

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:constraint_referenced_ids="view3,textView7,textView5"
        app:layout_constraintBottom_toTopOf="@id/group1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/group2" />

    <android.support.constraint.Group
        android:id="@+id/group1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:constraint_referenced_ids="linearLayout,textView8"
        app:layout_constraintBottom_toTopOf="@id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/group" />

    <Button
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:text="Resend OTP"
        android:textAllCaps="false"
        android:textColor="@color/colorGrey"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/view3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@id/group"
        app:layout_constraintTop_toTopOf="@+id/group" />

    <View
        android:id="@+id/view3"
        android:layout_width="3dp"
        android:layout_height="30dp"
        android:layout_marginStart="10dp"
        android:background="@color/colorGrey"
        app:layout_constraintBottom_toBottomOf="@+id/textView7"
        app:layout_constraintEnd_toStartOf="@+id/textView7"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView5" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:textColor="@android:color/holo_blue_light"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView5"
        app:layout_constraintEnd_toEndOf="@id/group"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view3"
        tools:text="29 sec" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:text="OTP"
        android:textColor="@android:color/black"
        android:textSize="26sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/group1" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="262dp"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/holo_blue_light"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="@+id/textView8"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="@android:color/holo_blue_light"
        android:elevation="1dp"
        android:text="Next"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/linearLayout"
        app:layout_constraintTop_toBottomOf="@+id/group1" />
</android.support.constraint.ConstraintLayout>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make painted canvas fit all screen sizes? How to make android app to fit for all screen sizes How to make the android app fit all Screen Sizes? How to make an image of splashscreen fit all mobile screen sizes? Make android activity fit all screen sizes Fit to all screen sizes How can i make an app to fit all screen sizes using relative layout? recyclerview is not fit for all screen sizes FrameLayout on different screen sizes How to set a framelayout to fit the entire screen?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM