android constrain layout support different screen size
Question
Dears am trying to use constrain layout with percentage to support different screen sizes its working fine if am only using pictures or button but when i add text its not appearing on small screen even though i add it as match parent with center gravity. i added the xml code.. can you help me if i can use this method to support different screen sizes or i have to create different xml files.
EDIT I
The screen sizes is LDPI API 22 240 × 320: ldpi 22 Android 5.1 (Google APIs) and MDPI Small API 22 320 × 480: mdpi 22 Android 5.1 (Google APIs)
The Layout:
<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:background="@drawable/green_background"
tools:context="com.yaacoach.gymapp.StartExercise">
<android.support.constraint.Guideline
android:id="@+id/guideline16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.18" />
<android.support.constraint.Guideline
android:id="@+id/guideline36"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="@+id/guideline37"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<android.support.constraint.Guideline
android:id="@+id/guideline38"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.03" />
<android.support.constraint.Guideline
android:id="@+id/guideline40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.08" />
<android.support.constraint.Guideline
android:id="@+id/guideline41"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.92" />
<android.support.constraint.Guideline
android:id="@+id/guideline42"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.27" />
<Button
android:id="@+id/btn_start"
style="@style/Base.TextAppearance.AppCompat.Medium"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:background="@drawable/stopwatchstyle"
android:text="start"
app:layout_constraintBottom_toTopOf="@+id/guideline43"
app:layout_constraintEnd_toStartOf="@+id/guideline47"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline39"
app:layout_constraintVertical_bias="0.833" />
<android.support.constraint.Guideline
android:id="@+id/guideline43"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.93" />
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_startExercise_information"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/guideline39"
app:layout_constraintEnd_toStartOf="@+id/guideline41"
app:layout_constraintStart_toStartOf="@+id/guideline40"
app:layout_constraintTop_toTopOf="@+id/guideline42" />
<android.support.constraint.Guideline
android:id="@+id/guideline39"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<android.support.constraint.Guideline
android:id="@+id/guideline45"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.ConstraintLayout
android:id="@+id/CL_stopWatch"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/stopwatchstyle"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:foregroundGravity="center"
app:layout_constraintBottom_toTopOf="@+id/guideline45"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline38"
app:layout_constraintVertical_bias="1.0">
</android.support.constraint.ConstraintLayout>
<Chronometer
android:id="@+id/chronometer2"
style="@android:style/TextAppearance.DeviceDefault.Medium"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textColor="@color/btnbrainiac"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/guideline46"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline38" />
<android.support.constraint.Guideline
android:id="@+id/guideline46"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.11" />
<android.support.constraint.Guideline
android:id="@+id/guideline47"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4" />
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_start_exercise_weight_rep"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/guideline45"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintStart_toStartOf="@+id/guideline47"
app:layout_constraintTop_toTopOf="@+id/guideline46" />
<TextView
android:id="@+id/textView2"
style="@android:style/TextAppearance.DeviceDefault.Small"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="@string/Weight"
app:layout_constraintBottom_toTopOf="@+id/guideline16"
app:layout_constraintEnd_toStartOf="@+id/guideline47"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline46" />
<TextView
android:id="@+id/textView4"
style="@android:style/TextAppearance.DeviceDefault.Small"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="@string/repetition"
app:layout_constraintBottom_toTopOf="@+id/guideline45"
app:layout_constraintEnd_toStartOf="@+id/guideline47"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline16" />
<Button
android:id="@+id/btn_StartExercies_Pause"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:background="@drawable/stopwatchstyle"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/guideline43"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline47"
app:layout_constraintTop_toTopOf="@+id/guideline39"
app:layout_constraintVertical_bias="0.0" />
3 answers
solution1
0 2017-12-05 20:39:19
屏幕尺寸为LDPI API 22240×320：ldpi 22 Android 5.1（Google API）和MDPI Small API 22320×480：mdpi 22 Android 5.1（Google API）
solution2
0 2017-12-05 20:43:47
<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:background="@drawable/green_background"
tools:context="com.yaacoach.gymapp.StartExercise">
<android.support.constraint.Guideline
android:id="@+id/guideline16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.18" />
<android.support.constraint.Guideline
android:id="@+id/guideline36"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="@+id/guideline37"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<android.support.constraint.Guideline
android:id="@+id/guideline38"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.03" />
<android.support.constraint.Guideline
android:id="@+id/guideline40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.08" />
<android.support.constraint.Guideline
android:id="@+id/guideline41"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.92" />
<android.support.constraint.Guideline
android:id="@+id/guideline42"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.27" />
<Button
android:id="@+id/btn_start"
style="@style/Base.TextAppearance.AppCompat.Medium"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:background="@drawable/stopwatchstyle"
android:text="start"
app:layout_constraintBottom_toTopOf="@+id/guideline43"
app:layout_constraintEnd_toStartOf="@+id/guideline47"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline39"
app:layout_constraintVertical_bias="0.833" />
<android.support.constraint.Guideline
android:id="@+id/guideline43"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.93" />
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_startExercise_information"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/guideline39"
app:layout_constraintEnd_toStartOf="@+id/guideline41"
app:layout_constraintStart_toStartOf="@+id/guideline40"
app:layout_constraintTop_toTopOf="@+id/guideline42" />
<android.support.constraint.Guideline
android:id="@+id/guideline39"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<android.support.constraint.Guideline
android:id="@+id/guideline45"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.ConstraintLayout
android:id="@+id/CL_stopWatch"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/stopwatchstyle"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:foregroundGravity="center"
app:layout_constraintBottom_toTopOf="@+id/guideline45"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline38"
app:layout_constraintVertical_bias="1.0">
</android.support.constraint.ConstraintLayout>
<Chronometer
android:id="@+id/chronometer2"
style="@android:style/TextAppearance.DeviceDefault.Medium"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textColor="@color/btnbrainiac"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/guideline46"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline38" />
<android.support.constraint.Guideline
android:id="@+id/guideline46"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.11" />
<android.support.constraint.Guideline
android:id="@+id/guideline47"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4" />
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_start_exercise_weight_rep"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/guideline45"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintStart_toStartOf="@+id/guideline47"
app:layout_constraintTop_toTopOf="@+id/guideline46" />
<TextView
android:id="@+id/textView2"
style="@android:style/TextAppearance.DeviceDefault.Small"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="@string/Weight"
app:layout_constraintBottom_toTopOf="@+id/guideline16"
app:layout_constraintEnd_toStartOf="@+id/guideline47"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline46" />
<TextView
android:id="@+id/textView4"
style="@android:style/TextAppearance.DeviceDefault.Small"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="@string/repetition"
app:layout_constraintBottom_toTopOf="@+id/guideline45"
app:layout_constraintEnd_toStartOf="@+id/guideline47"
app:layout_constraintStart_toStartOf="@+id/guideline36"
app:layout_constraintTop_toTopOf="@+id/guideline16" />
<Button
android:id="@+id/btn_StartExercies_Pause"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:background="@drawable/stopwatchstyle"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/guideline43"
app:layout_constraintEnd_toStartOf="@+id/guideline37"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline47"
app:layout_constraintTop_toTopOf="@+id/guideline39"
app:layout_constraintVertical_bias="0.0" />
solution3
0 ACCPTED 2017-12-06 14:27:39
I pasted the Layout in Android Studio and I see it rendering ok. Note I replaced the colors and strings as I didn't have you resource files.
The image below is your layout for the LDPI display you mentioned.
Anyway here I leave you an alternative way you can reach the same layout with less guidelines and less constrained elements.
Layout:
<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:background="#00FF00"
>
<android.support.constraint.Guideline
android:id="@+id/glTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.03" />
<android.support.constraint.Guideline
android:id="@+id/glBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.93" />
<android.support.constraint.Guideline
android:id="@+id/glLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.08" />
<android.support.constraint.Guideline
android:id="@+id/glRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.92" />
<android.support.constraint.Guideline
android:id="@+id/glChronoLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="@+id/glChronoRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<LinearLayout
android:id="@+id/chronometerContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toStartOf="@+id/glChronoRight"
app:layout_constraintStart_toStartOf="@+id/glChronoLeft"
app:layout_constraintTop_toTopOf="@+id/glTop">
<Chronometer
android:id="@+id/chronometer2"
style="@android:style/TextAppearance.DeviceDefault.Medium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="000000"
android:textStyle="bold"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="12">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FF0000">
<TextView
android:id="@+id/textView2"
style="@android:style/TextAppearance.DeviceDefault.Small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Weight" />
<TextView
android:id="@+id/textView4"
style="@android:style/TextAppearance.DeviceDefault.Small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Repet" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_startExercise_information"
android:layout_width="0dp"
android:layout_weight="8"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_start_exercise_weight_rep"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toEndOf="@+id/glLeft"
app:layout_constraintBottom_toTopOf="@+id/btnContainer"
app:layout_constraintEnd_toStartOf="@+id/glRight"
app:layout_constraintTop_toBottomOf="@+id/chronometerContainer" />
<LinearLayout
android:id="@+id/btnContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="12"
app:layout_constraintStart_toStartOf="@id/glChronoLeft"
app:layout_constraintEnd_toEndOf="@+id/glChronoRight"
app:layout_constraintBottom_toTopOf="@+id/glBottom">
<Button
android:id="@+id/btn_start"
style="@style/Base.TextAppearance.AppCompat.Medium"
android:gravity="center"
android:layout_width="0dp"
android:layout_weight="6"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#FF0000"
android:layout_margin="1px"
android:text="start" />
<Button
android:id="@+id/btn_StartExercies_Pause"
style="@style/Base.TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_weight="6"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#FF0000"
android:layout_margin="1px"
android:text="Button"
/>
</LinearLayout>
</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
Constrain layout is not working on all android devices screen size
Android - Support different screen size
Different screen size layout on Android
layout support different screen size & different platform version
How to support different screen size in android
How to know screen Size to different layout in android
Android Absolute Layout with different screen size
how to set layout for different screen size in android
How to support different screen size and different screen resolutions in android
Constraint Layout correct margin and size for different screen support
Related Tags