Android Layout folder for long screens - android

I'm developing an android app to support all screen sizes, but when it come to long screens like 18:9 it giving me weird results in screen. I have following layout folders "layout,layout-large,layout-xlarge,layout-normal" and 18:9 screen ratio devices are using default settings of "layout" folder does android can have different kind of folder to place this type of layouts xml files only work with 18:9 screens. Or any other method to handle long screens.
My Layout folders are
layout,
layout-large,
layout-normal,
layout-xlarge,
In this image it shows how it overflow my text in 18:9 screen.
My activity_main.xml is here
`
<?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:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="#+id/Main_layout"
>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#drawable/layout_bg"
android:layout_marginTop="2dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/Head_layout">
<ImageButton
android:id="#+id/Image_btn_home"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="8dp"
android:background="#drawable/home"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="32dp" />
<TextView
android:id="#+id/text_view_head_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="47dp"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
android:text="Hello Animals"
android:textColor="#000000"
android:textSize="45sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/Image_btn_home"
app:layout_constraintRight_toLeftOf="#id/Image_btn_info"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageButton
android:id="#+id/Image_btn_info"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:background="#drawable/info"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/view_pager_container_layout"
android:layout_width="0dp"
android:layout_height="365dp"
android:background="#drawable/layout_bg"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Head_layout">
<android.support.v4.view.ViewPager
android:id="#+id/View_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
</android.support.v4.view.ViewPager>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:background="#drawable/layout_bg"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/Navigation_layout"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager_container_layout"
app:layout_constraintVertical_bias="0.0">
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:background="#drawable/layout_bg"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_marginTop="380dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_bias="1.0"
android:id="#+id/Navigation_layout"
app:layout_constraintTop_toTopOf="#+id/Head_layout">
<ImageButton
android:id="#+id/Image_btn_left"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="8dp"
android:background="#drawable/left"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="32dp" />
<ImageButton
android:id="#+id/Image_btn_right"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="300dp"
android:layout_marginTop="8dp"
android:background="#drawable/right"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginStart="300dp" />
<ImageButton
android:id="#+id/Image_btn_play"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="8dp"
android:background="#drawable/play"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="#+id/Image_btn_left"
app:layout_constraintRight_toLeftOf="#+id/Image_btn_right"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
`


Have u tried using constraint layout? The best way to create a responsive layout for different screen sizes is to use ConstraintLayout as the base layout in your UI. ConstraintLayout allows you to specify the position and size for each view according to spatial relationships with other views in the layout. This way, all the views can move and stretch together as the screen size changes.

Related

How to ensure views are well constraint even when they grow in context without pushing other views out of the layout

I am trying to achieve the below in my xml but currently when I my textView does not wrap the text as exepcted but instead pushes the the text down and the imageButton far. I am wondering how can I achieve this having in mind the texts can be bigger and need to wrap and fit in nicely without pushing the button away? below is my code sample
<androidx.constraintlayout.widget.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">
<ImageView
android:id="#+id/hospitalButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
app:image="#drawable/hospital_btn"
app:layout_constraintEnd_toStartOf="#+id/guidelineCenterButton"
app:layout_constraintHorizontal_bias="0.5"
app:startsChecked="true" />
<View
android:id="#+id/buttonDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="42dp"
android:background="#color/white_"
app:layout_constraintBottom_toTopOf="#+id/hospitalGroup"
app:layout_constraintTop_toBottomOf="#id/hospitalButton" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/hospitalGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#id/buttonDivider">
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/midTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageButton
android:id="#+id/submitButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="32dp"
android:background="#drawable/submitbackground"
android:src="#drawable/submit_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/animation"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="16dp"
android:elevation="3dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="#+id/submitButton"
app:layout_constraintEnd_toEndOf="#+id/submitButton"
app:layout_constraintStart_toStartOf="#+id/submitButton"
app:layout_constraintTop_toTopOf="#+id/submitButton"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/spinner" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/submitGroupDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/hospitalGroup" />
</androidx.constraintlayout.widget.ConstraintLayout>

From your description it's not clear what you wanted to do but here is the solution you can apply to make your view as a picture you uploaded.
Just apply height & width of midTextView to 0dp
Note: don't know what your idTextView will do it's not clear as per your layout structure.
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center_vertical"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toEndOf="#id/idTextView"
app:layout_constraintTop_toTopOf="parent"
/>

Scale android element according to different screen size

I am facing problem with the scaling of "images", "text fields", "buttons", basically all the elements I have used in my layout.
If you see below, This is is a 5.5 inch resolution display and my application is looking perfect, but when I change screen resolution, my elements start overlapping. This is how it starts looking...
Elements starts overlapping eachother, can anyone help me with this issue? I have been struggling for 4 days now.
Below is the layout XML...
ALSO I WAS DRAGGING THE SMALL CENTERED BUBBLES TO MATCH IT TO THE SCREEN SEND SO THAT I COULD BUILD, OTHERWISE I WAS GETTING BUILD ERROR, SO I DRAGGED THOSE BUBBLES TO EDGE OF THE SCREEN TO MAKE IT FIX
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
tools:context=".MainActivity"
android:background="#drawable/appbackgroundall">
<Switch
android:id="#+id/smartlever"
android:layout_width="116dp"
android:layout_height="42dp"
android:checked="false"
android:hapticFeedbackEnabled="true"
android:scaleX="2"
android:scaleY="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.294"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499"/>
<TextView
android:id="#+id/smartButtonText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/sansationregular"
android:scaleX="2"
android:scaleY="2"
android:text="Tap to alter smart mode"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.433" />
<ImageView
android:id="#+id/allbackcologo"
android:layout_width="66dp"
android:layout_height="62dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.976"
app:srcCompat="#drawable/companylogo" />
<ImageView
android:id="#+id/spaceman"
android:layout_width="205dp"
android:layout_height="253dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.868"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.15"
app:srcCompat="#drawable/spaceman" />
<ImageView
android:id="#+id/pingedlogo"
android:layout_width="139dp"
android:layout_height="52dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.058"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.023"
app:srcCompat="#drawable/pingedlogo" />
<Button
android:id="#+id/developerbutton"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:hapticFeedbackEnabled="true"
android:layout_width="64dp"
android:layout_height="61dp"
android:fontFamily="monospace"
android:scaleX="2"
android:scaleY="2"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.976" />
<ImageView
android:id="#+id/settingButton"
android:layout_width="61dp"
android:layout_height="59dp"
android:rotation="175"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.923"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.023"
app:srcCompat="#drawable/settingbutton" />
<Button
android:id="#+id/settingB"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="60dp"
android:layout_height="59dp"
android:fontFamily="monospace"
android:scaleX="2"
android:scaleY="2"
app:layout_constraintBottom_toBottomOf="#+id/settingButton"
app:layout_constraintEnd_toEndOf="#+id/settingButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/settingButton"
app:layout_constraintTop_toTopOf="#+id/settingButton"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.093"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.784"
app:srcCompat="#drawable/alientwo" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try to use minWidth and maxWidth,
example :
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxHeight="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.093"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.784"
app:srcCompat="#drawable/alientwo" />

Constraint layout leaving space On top

I have a fragment containing a 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="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp"
tools:context="tech.pkg.name.fragments.ReportFragment">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/typeSlector"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#drawable/android_date_bgd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/fromTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/from"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/fromDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:drawablePadding="5dp"
android:padding="5dp"
android:text="#string/dd_mm_yy"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/fromTextView"
app:layout_constraintEnd_toStartOf="#+id/view9"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/fromTextView"
app:layout_constraintTop_toTopOf="#+id/fromTextView" />
<View
android:id="#+id/view9"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/toTextView"
app:layout_constraintStart_toEndOf="#+id/fromDateTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/toTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/to"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/fromDateTextView"
app:layout_constraintEnd_toStartOf="#+id/toDateTextView"
app:layout_constraintStart_toEndOf="#+id/view9" />
<TextView
android:id="#+id/toDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:drawablePadding="5dp"
android:padding="5dp"
android:text="#string/dd_mm_yy"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/toTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/toTextView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:orientation="horizontal"
android:padding="10dp"
android:theme="#style/AppTheme.RadioButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1">
<RadioButton
android:id="#+id/mobileRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_weight="0.20"
android:checked="true"
android:text="Mobile"
android:textSize="18sp" />
<RadioButton
android:id="#+id/DTHradioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.14"
android:text="DTH"
android:textSize="18sp" />
</RadioGroup>
<Button
android:id="#+id/button_view_report"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/button_bgd"
android:text="#string/submit"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view5"
app:layout_constraintVertical_bias="0.0" />
<View
android:id="#+id/view5"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="15dp"
android:background="#color/colorEditTextLine"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup" />
<CheckBox
android:id="#+id/downloadCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:theme="#style/AppTheme.Checkbox"
app:layout_constraintHorizontal_bias="0.088"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/download"
app:layout_constraintBaseline_toBaselineOf="#+id/downloadCheck"
app:layout_constraintHorizontal_bias="0.02"
app:layout_constraintLeft_toRightOf="#+id/downloadCheck"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
it is containing in
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
But in the layout editor it is showing
How can I remove the spacing above?

The problem is with your Activity where you had inflated the Fragment. Actually, i tried it on My system and I'm Getting Proper result.
Check Your Activity's Layout where the FrameLayout is Used.
2nd Possbility
Check your May be Your Theme is Changing this . Check all the possibilities

Try the following code Replacing the ConstraintLayout after the Spinner
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/android_date_bgd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

What happened to me was smiliar, a space on top that did not show in the editor.
The problem was not in the main layout file I was focusing on, I was displaying some fragments thru a viewpager and the margins on the editor for the pager were 0 so the editor preview did not showed a space on top. However the fragments that were being created/shown had of course a different layout file and in that layout there was a huge space on top because I erroneously thought centering the layout vertically was a good idea for some reason (mainly because I code at night before bed and sometimes im too tired lol). Since the layout height for the viewpager did not match the dimensions of the fragment I had some weird behaviors trying to position the elements of the main layout file.

I was facing a similar problem. By looking at the code snippet in the question I saw the similarity that we both have android:fitsSystemWindows set to True. By removing this android:fitsSystemWindows attribute, my space at the top was removed.

How to build a responsive ListView using ConstraintLayout or RelativeLayout

I am trying to create a list view to display two TextViews and an ImageView right of the TextViews. I have tried designing this using Relative Layout only, RelativeLayout with nested LinearLayout and ConstraintLayout. All seem to work, but not responsively enough to fit different screens. For example it displays well on mobile, but not good enough on Android TV emulator.
I am at odds how to modify the following layout to show image on the right and the two TextViews on the left and try to fit the screen, but have the images align to each other.
<?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"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_title"
android:layout_width="179dp"
android:layout_height="117dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_width="184dp"
android:layout_height="239dp"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="163dp"
android:layout_height="381dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
android:contentDescription="#string/video_thumbnail_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/video" />
</android.support.constraint.ConstraintLayout>

Try this
According to you it display like this
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_title"
android:layout_width="179dp"
android:layout_height="117dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/iv_video_thumbnail"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_width="184dp"
android:layout_height="239dp"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044"
app:layout_constraintRight_toLeftOf="#+id/iv_video_thumbnail"
android:layout_marginRight="8dp" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="163dp"
android:layout_height="381dp"
app:layout_constraintLeft_toRightOf="#+id/tv_video_descr"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="0dp"
app:layout_constraintVertical_bias="0.047" />
</android.support.constraint.ConstraintLayout>

Here is your updated xml file implement this I used a linear layout and assign layout weights so it cover all screen sizes depending on available width
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<android.support.v7.widget.AppCompatTextView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/tv_video_title"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
android:contentDescription="#string/video_thumbnail_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/video" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

ConstraintLayout messes up after I change the src of an ImageView

This is the first screenshot, where everything is working fine with a placeholder background.
This is the second screenshot, where the two ImageButtons don't display anymore.
For reference, here's my test 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="match_parent"
tools:context="com.bruisedbanana.squareshift.MainActivity">
<ImageView
android:scaleType="centerCrop"
android:src="#drawable/squareshiftbackground"
android:id="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/buttonPlay"
android:background="#drawable/buttonPlay"
android:layout_width="95dp"
android:layout_height="45dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="0.502"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.952"
app:layout_constraintBottom_toTopOf="#+id/buttonExit" />
<ImageButton
android:id="#+id/buttonExit"
android:background="#drawable/buttonExit"
android:layout_width="95dp"
android:layout_height="45dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView2"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.891" />
</android.support.constraint.ConstraintLayout>
All I'm doing is changing the src from #drawable/squareshiftbackground to #drawable/realbackground. Can anyone help?

You can try YourImageButton.bringToFront() to the image butons after changing the ImageView source.

Categories

Resources