why preview showing different ui and real screen different in constrainlayout - android

I am developing new android app but when I am trying to implement constrainlayout in preview window it is showing different but in real device showing different
below my layout
<?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"
android:background="#451C80"
tools:context=".SetPasswordFragment">
<TextView
android:id="#+id/getStarted"
style="#style/password"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="150dp"
android:gravity="center"
android:text="#string/password"
android:textAppearance="#style/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_marginStart="8dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="11dp"
android:src="#drawable/ic_back"
app:layout_constraintEnd_toStartOf="#+id/getStarted"
app:layout_constraintHorizontal_bias="0.366"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="#style/username"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="81dp"
android:layout_marginEnd="223dp"
android:layout_marginBottom="45dp"
android:text="#string/create_user"
app:layout_constraintBottom_toTopOf="#+id/textInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="544dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/username_edittext"
android:hint="#string/username" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
below preview ui in android studio
and below ui in real device
I want to exactly where I am making something wrong what I have to do in order adjust constraints correctly so that I can show exact the same preview window ui in real device


The problem is that you have a Bottom margin = 544dp in the textInputLayout,
you should'n use a very larg margins in layouts
you can try
<?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"
android:background="#451C80"
tools:context=".SetPasswordFragment">
<TextView
android:id="#+id/getStarted"
style="#style/password"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="150dp"
android:gravity="center"
android:text="#string/password"
android:textAppearance="#style/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_marginStart="8dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="11dp"
android:src="#drawable/ic_back"
app:layout_constraintEnd_toStartOf="#+id/getStarted"
app:layout_constraintHorizontal_bias="0.366"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="#style/username"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="81dp"
android:layout_marginEnd="223dp"
android:layout_marginBottom="45dp"
android:text="#string/create_user"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/username_edittext"
android:hint="#string/username" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Android image not showing in custom dialog

I've made a custom dialog in androidstudio (Java) but from a certain activity (google maps) the images are not showing, while when calling from another activity (basic activity), the images are showing. i haven't gotten a clue what the difference is between the two.
But when run and called from the app, it looks like this.
While the same dialog started from another activity is showing ok.
What could be the issue here?
This is the XML for that layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="1000dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/dlg_sa_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/dlg_bckgrnd_action" />
<TextView
android:id="#+id/dlg_sa_tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Starting new Action"
android:textColor="#color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/dlg_sa_btnOk"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:background="#drawable/button_dialog"
android:text="Ok"
android:textSize="34sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/dlg_sa_btnCancel"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginBottom="32dp"
android:background="#drawable/button_dialog"
android:text="Cancel"
android:textSize="34sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/dlg_sa_tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="Dialog Content"
android:textSize="34sp"
app:layout_constraintBottom_toTopOf="#+id/dlg_sa_btnCancel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dlg_sa_tvTitle" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/dlg_sa_background"
app:layout_constraintTop_toBottomOf="#+id/dlg_sa_tvTitle"
app:srcCompat="#drawable/purpleline" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Image on splash screen not showing

I add my app logo on my splash screen but for some reason the image is not showing only if i run the app on a physical device or emulator, on the design preview is showing correct. Also i try to change the visibility to visible but again is not working.
activity_splash.xml:
<?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"
android:background="#drawable/background"
app:layoutDescription="#xml/activity_splash_scene"
tools:context=".SplashActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="426dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.448"
app:srcCompat="#drawable/app_logo" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintVertical_bias="0.73" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:layout_marginBottom="16dp"
android:text="by george sepetadelis"
android:textColor="#color/white"
android:textSize="17sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<ProgressBar
android:id="#+id/progressBar3"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="11dp"
app:layout_constraintBottom_toTopOf="#+id/textView9"
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.99" />
</androidx.constraintlayout.widget.ConstraintLayout>

Hum, I don't know much about xml layout...
try to change
app:srcCompat="#drawable/app_logo"
with:
android:src="#drawable/app_logo"

why preview window showing different screen and real device different?

I am developing a new app and preview showing the different UI in android studio and real device showing different UI is different how can show screen in a real device the same as in the preview.
as you can see from the real device skip text is missing
below my XML file.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:attrs="http://schemas.android.com/apk/res-auto"
>
<ImageView
android:id="#+id/vector_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="#drawable/vectors_1"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<ImageView
android:id="#+id/some_id"
android:layout_width="221dp"
android:layout_height="158dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/doctor_appointment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.442"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.233" />
<TextView
android:id="#+id/search_doct"
android:layout_width="272dp"
android:layout_height="82dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="54dp"
android:layout_alignParentTop="true"
android:layout_marginTop="292dp"
android:gravity="top"
android:text="#string/search_doct"
android:textAppearance="#style/search_doct"
app:layout_constraintBottom_toBottomOf="#id/some_id"
app:layout_constraintHorizontal_bias="0.697"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/vector_1"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/get_list_of"
android:layout_width="217dp"
android:layout_height="58dp"
app:layout_constraintTop_toBottomOf="#id/search_doct"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal|top"
android:text="#string/get_list_of"
android:textAppearance="#style/get_list_of"
/>
<com.rd.PageIndicatorView
android:id="#+id/pageIndicatorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.477"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.801"
app:piv_animationType="scale"
app:piv_dynamicCount="true"
app:piv_interactiveAnimation="true"
app:piv_selectedColor="#color/gray_50"
app:piv_unselectedColor="#color/gray_300"
app:piv_viewPager="#id/viewPager"
attrs:piv_padding="12dp"
attrs:piv_radius="8dp" />
<TextView
android:id="#+id/skip"
android:layout_width="87dp"
android:layout_height="43dp"
android:layout_marginTop="636dp"
android:gravity="center_horizontal|top"
android:text="Skip"
android:textAppearance="#style/skip"
app:layout_constraintHorizontal_bias="0.537"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
below preview windows in android studio
I want to know where exactly I am making mistakes any help will be greatly appreciated.

Your mistake was to use fixed size on your views and on your margins, because different phones got different screen size, you may find your preview layout looking god while on a real device it will look totally different.
You can fix this by using constraint Layout percentage like this:
<?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">
<ImageView
android:id="#+id/vector_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="#drawable/profile_icon"
app:layout_constraintBottom_toTopOf="#+id/some_id"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/some_id"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/tasks_icon"
app:layout_constraintBottom_toTopOf="#+id/search_doct"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/vector_1" />
<TextView
android:id="#+id/search_doct"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="top"
android:text="search_doct"
app:layout_constraintBottom_toTopOf="#+id/get_list_of"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/some_id" />
<TextView
android:id="#+id/get_list_of"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.5"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal|top"
android:text="get_list_of"
app:layout_constraintBottom_toTopOf="#+id/pageIndicatorView"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/search_doct" />
<Button
android:id="#+id/pageIndicatorView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintDimensionRatio="1:1"
android:layout_centerInParent="true"
app:layout_constraintBottom_toTopOf="#+id/skip"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/get_list_of" />
<TextView
android:id="#+id/skip"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.5"
android:gravity="center_horizontal|top"
android:text="Skip"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/vector_1"
app:layout_constraintStart_toStartOf="#+id/vector_1"
app:layout_constraintTop_toBottomOf="#+id/pageIndicatorView" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this:

When using chain in ConstraintLayout an blank space appears on top and bottom

I am using ConstraintLayout in fragment.
When I create vertical chain with my views a blank spaces appear on top and bottom.
Without chain there is no blank spaces.
I am using:
com.google.android.material:material:1.1.0
androidx.constraintlayout:constraintlayout:2.0.0-beta5
Here is my layout of fragment is:
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".login.screens.login.LoginFragment"
>
<LinearLayout
android:id="#+id/tv_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/ic_ellipse_h284_w360"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/til_phone_number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome User!" />
</LinearLayout>
<EditText
android:id="#+id/til_phone_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_title"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:hint="Phone number"
android:inputType="phone"
app:layout_constraintBottom_toTopOf="#+id/til_password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title" />
<EditText
android:id="#+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_title"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="#+id/tv_forgot_password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/til_phone_number"
app:passwordToggleEnabled="true" />
<TextView
android:id="#+id/tv_forgot_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/til_password"
android:padding="10dp"
android:paddingStart="30dp"
android:text="Forgot password"
android:textAlignment="textStart"
android:textColor="#color/text_blue"
app:layout_constraintBottom_toTopOf="#+id/btn_login"
app:layout_constraintTop_toBottomOf="#+id/til_password"
tools:layout_editor_absoluteX="24dp" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_forgot_password"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Login"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/btn_pin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_forgot_password" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_pin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/iv_phone"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Use pin"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/view_center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_login" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/iv_phone"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Sign up"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/iv_phone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_center" />
<TextView
android:id="#+id/view_center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/or"
android:textAlignment="center"
android:textColor="#color/filter_black1"
android:translationZ="2dp"
app:layout_constraintBottom_toTopOf="#+id/btn_signup"
app:layout_constraintTop_toBottomOf="#+id/btn_pin" />
<TextView
android:id="#+id/iv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:src="#drawable/phone_2"
android:text="v1.0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Activity layout is:
<merge 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"
tools:context=".login.screens.login.LoginActivity">
<fragment
android:id="#+id/myNavHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="#navigation/navigation"
app:defaultNavHost="true"
/>
</merge>
Why blank space appears? How do I get rid of it?

If you not define layout_constraintVertical_chainStyle default is Spread if you want to remove top and bottom space you can define it to app:layout_constraintVertical_chainStyle="spread_inside" more detail you check here

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>

Categories

Resources