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:
Related
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>
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>
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"
/>
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"
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>