This is how the design looked in Preview tab
But when I run it on emulator or real device, valid until date not appearing.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
card_view:cardCornerRadius="#dimen/sell_item_radius">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/validUntil"
android:textColor="#color/colorPrimaryDark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/date"
android:text="date"
android:textColor="#color/colorPrimaryDark" />
</RelativeLayout>
<ImageView
android:id="#+id/itemImage"
android:layout_width="match_parent"
android:layout_height="#dimen/sell_item_image_height"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/ic_camera" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/itemImage"
android:layout_alignParentRight="true"
android:src="#drawable/ic_favourite" />
<TextView
android:id="#+id/imageCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:text="#string/imageCount"
android:textColor="#color/blue" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/itemImage"
android:layout_marginTop="-3dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingTop="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/title"
android:textColor="#color/blue"
android:textSize="#dimen/sell_item_title" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginRight="10dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/price" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Thanks
The reason that you don't see some of your views is that all of your views width and height are wrap_content - so you created a layout that your views can expand according to the content of them (if you will add 200 dp on 600 dp image and set width and height to wrap_content this will be your view size) and you can see that even on your preview - your views are overlapping one another.
So you can either use fixed size on your views, but by doing so you are entering the danger zone - your layout won't be responsive to all screen sizes, that's because different phones got different screen size and what may look good on one phone won't look good on another phone.
Sure, you can fix this by creating a single layout for every screen size but that's a lot of work.
You can also define your relative layout with android:weightSum and layout_weight
But there is an even better option:
You can use ConstraintLayout to achieve a single layout that is responsive to all screen sizes, all of its view hierarchy is flat (no nested view groups) and is it really simple to use.
Here is an example for a layout that looks just like you want with constraintLayout :
<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">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView13"
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/textView10"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="heart"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView8" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/textView14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8"
tools:src="#tools:sample/avatars[11]" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is how it looks in portrait :
And landscape:
Finally I solved it ! I just move the imageView with id itemImage, place it after first RelativeLayout.
Related
I am using a constraint layout and card views in it, but on different screen sizes the card views are not in the same place. I thought the idea of constraint is that you only have to arrange the card view for one time and it automatically aligns to the different device sizes. The first picture shows the screen I want to have on every device size and the other picture shows you the result of a different size where the CardViews are obviously not in the right place.
I already tried using guidelines but it doesn't help. Or is it better to use another Layout like RelativeLayout? But what's then the point of a ConstraintLayout?
Design as it should be
Result with different size
Thank you for your help!
Here is my 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"
tools:context=".spielen_uebersicht">
<TextView
android:id="#+id/spieler_suche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Spieler suchen:"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardView3"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/spieler_suche">
<SearchView
android:id="#+id/searchView_spieler_suchen"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:queryBackground="#android:color/transparent" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/zufälliger_spieler"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="0.198">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Zufälliger Spieler"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/zufaelliger_spieler" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="#+id/zufälliger_spieler"
app:layout_constraintStart_toEndOf="#+id/zufälliger_spieler"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Freunde einladen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freunde_einladen" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewFreundesübersicht"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toEndOf="#+id/cardView2"
app:layout_constraintTop_toBottomOf="#+id/cardView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Freundes-\nübersicht"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_uebersicht" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/zufälliger_spieler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Anfragen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_anfragen" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>```
You don't see your layout the same way on different phones because your cardviews dimensions are a fixed size , why is it bad?
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
How to fix it:
You can just use app:layout_constraintWidth_percent and app:layout_constraintHeight_percent on your cardviews to give the size in precents according to the screen.
Something 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">
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
In this example, I have 4 buttons that represent your cardViews.
They are all equal in size and will be responsive to all screen sizes.
This layout will look like this (the arrow points to the guideline, to make it more understandable):
For Future Visitors, Chains are the magical word when trying to simulate Linear layout form. using horizontal chains with vertical ones along with using dynamic View sizes as Tamir Abutbul mentioned should be the best practice.
<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">
<TextView
android:id="#+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="?android:attr/actionBarSize"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 4"
android:textSize="24sp"
android:padding="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btn3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn3"
app:layout_constraintTop_toTopOf="#+id/btn3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 2"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="#+id/btn4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn4"
app:layout_constraintTop_toTopOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 3"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/btn4"
app:layout_constraintEnd_toStartOf="#+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 1"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toTopOf="#+id/btn3"
app:layout_constraintEnd_toStartOf="#+id/btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>
Best of luck ;)
I'm writing a very simple coupon application for Android, but I'm struggling with a TextView.
For devices with 16:9 screens, the TextView displays just OK, but the problem starts with devices such as Samsung Note 9 I have, which has 18:9 screen. TextView isn't getting bigger to fill the blank space.
For 16:9 screen I use a Google Pixel 2 emulator whereas for 18:9 screen I use my own Samsung Note 9.
Does anybody have any clues how to make my TextView responsive, so it can occupy the blank space?
Photos for my devices:
Pixel 2 - https://i.imgur.com/HBrqYFM.png
Samsung Note 9 - https://i.imgur.com/i1e0AXU.jpg
I tried to play with AutoSizing TextView, but I have no clue how to make it work for my problem.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.GeneratedCouponActivity" android:orientation="vertical" android:padding="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentStart="true">
<TextView
android:text="DATA WYDANIA:"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/textView" android:textSize="18sp"
android:textStyle="bold" android:textColor="#android:color/black"/>
<TextView
android:text="25/06/2019"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/textView2" android:textSize="16sp"
android:textColor="#android:color/black"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentEnd="true">
<TextView
android:text="UNIKALNY KOD:"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/textView3" android:textStyle="bold"
android:textSize="18sp" android:textColor="#android:color/black"/>
<TextView
android:text="f-62-pT-6"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/textView7"
android:textColor="#android:color/black" android:textSize="16sp"/>
</LinearLayout>
</RelativeLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="140dp" app:srcCompat="#drawable/coupon_icecream" android:id="#+id/imageView"/>
<TextView
android:text="#string/generated_coupon_rules"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/textView8" app:autoSizeTextType="uniform"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" android:gravity="bottom">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="95dp" android:layout_marginBottom="10dp" app:cardBackgroundColor="#FFC300"/>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="95dp" app:cardBackgroundColor="#FFC300"/>
</LinearLayout>
</LinearLayout>
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_height="140dp" for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
If you want to create one layout to support all screen sizes you can use ConstraintLayout with guidelines and Chains to support different screen sizes.
Here is an example using ConstraintLayout:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView5" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintStart_toStartOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view I am some long text view "
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.7" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:srcCompat="#tools:sample/avatars[1]" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Date"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#ff1"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#ff1"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="560dp"
app:layout_constraintGuide_percent="0.45" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is how it will look (I am attaching an image from the layout editor so you could see the constraints and guidelines):
Use auto-sizing TextView with these attributes in your TextView.
<TextView
app:autoSizeTextType="uniform"
app:autoSizeMinTextSize="16sp"
app:autoSizeMaxTextSize="100sp"
app:autoSizeStepGranularity="1sp" />
Note: It is advised to not use a layout_width or layout_height of
"wrap_content" when using TextView auto-sizing, as this may lead to
unexpected results. Using a fixed dimension or "match_parent" is fine
(or a “0dp” match_constraint if you are using ConstraintLayout).
Read Making the most of TextView auto-sizing on Android to have a deeper understanding of this.
I have the following layout
I wish to achieve
Available space priority will be given to red region LinearLayout, so that no text wrapping will occur.
ConstraintLayout will try its best effort to occupy remaining space. If the remaining space isn't enough, it will perform text wrapping.
Hence,
wrap_content is given to red region LinearLayout
android:layout_width="0dp" and android:layout_weight="1" is given to ConstraintLayout
However, currently, when the content of ConstraintLayout is too long. It will perform text wrapping. However, it will also perform an undesired effect. It will push away the baby icon
This is my complete XML
<LinearLayout
android:orientation="horizontal"
android:id="#+id/top_relative_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="12dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toStartOf="#+id/sticky_image_view"
app:layout_constraintRight_toLeftOf="#+id/sticky_image_view"
android:text="Home long text long text"
android:id="#+id/label_text_view"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:textColor="?attr/secondaryTextColor" />
<ImageView
app:layout_constraintLeft_toRightOf="#+id/label_text_view"
app:layout_constraintStart_toEndOf="#+id/label_text_view"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/sticky_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:tint="?attr/greyIconColor"
app:srcCompat="#drawable/sn_baby" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:background="#ff0000"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/pin_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="?attr/smallPinIcon" />
<ImageView
android:id="#+id/locked_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_repeat_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="4dp"
android:paddingRight="4dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<TextView
android:text="Yesterday, 31 December, 2019"
android:id="#+id/date_time_text_view"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor" />
</LinearLayout>
</LinearLayout>
Any idea how I can prevent such?
If you actually want the text to wrap, you might want to constrain the sticky_image_view to the end, bottom and top of parent. Then just add either a height or width to this imageview, a ratio of 1:1, and a horizontalBias of 0. This should do the trick.
Try to set layout_width = "0dp" on ConstraintLayout's TextView. ConstraintLayout constraints work when you set dimension to 0dp.
And the image view should be like this -
<ImageView
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
Instead of this -
<ImageView
app:layout_constraintLeft_toRightOf="#+id/label_text_view"
app:layout_constraintStart_toEndOf="#+id/label_text_view"
app:layout_constraintTop_toTopOf="parent"
Maybe this layout can work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/top_relative_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingTop="8dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/label_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:paddingEnd="28dp"
android:text="Home"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/sticky_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="2dp"
app:layout_constraintEnd_toEndOf="#id/label_text_view"
app:layout_constraintTop_toTopOf="#id/label_text_view"
app:srcCompat="#drawable/ic_done" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="top"
android:orientation="horizontal">
<ImageView
android:id="#+id/pin_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="#drawable/ic_circle" />
<ImageView
android:id="#+id/locked_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_repeat_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingEnd="4dp"
android:paddingRight="4dp"
android:scaleType="fitEnd" />
<TextView
android:id="#+id/date_time_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yesterday, 31 December, 2019"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
I have 2 imageviews in a linear layout inside a constraint layout. There should be no gap between them, but when I run it, on some large devices it shows the gap even though I didnt give any margin or padding between them. The imageviews are with ids onboarding_image and image_line. I linear layout must be between the two guidelines showing images one upon the other without any space should take up whatever the space is left between the guideline in all devices.
<?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:id="#+id/swipe_layer"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/blue1"
>
<ImageView
android:id="#+id/app_tour_group"
android:layout_width="70dp"
android:layout_height="9dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/group_1" />
<RelativeLayout
android:id="#+id/next_layout"
android:layout_width="277dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/app_tour_group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline1">
<View
android:id="#+id/app_tour_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:background="#drawable/rectangle_2" />
<TextView
android:id="#+id/next_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:gravity="center"
android:text="NEXT"
android:textColor="#ffffff"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="#+id/onboarding_title"
android:layout_width="375dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="TextView"
android:textColor="#ffffff"
android:textSize="29sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/onboarding_description"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="TextView"
android:textColor="#50287d"
android:textSize="17sp"
android:layout_marginBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/onboarding_title"
app:layout_constraintBottom_toTopOf="#id/guideline2"/>
<LinearLayout
android:layout_width="315dp"
android:layout_height="0dp"
android:id="#+id/image_layout"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/guideline1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintVertical_weight="1"
android:weightSum="417"
>
<ImageView
android:id="#+id/onboarding_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginBottom="-8dip"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:layout_weight="414"
/>
<ImageView
android:id="#+id/image_line"
android:layout_width="wrap_content"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginTop="-8dip"
app:srcCompat="#drawable/line"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
</LinearLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.88"
app:layout_constraintBottom_toTopOf="#+id/next_layout"
app:layout_constraintTop_toBottomOf="#+id/image_layout"/>
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.245"
app:layout_constraintBottom_toTopOf="#+id/image_layout"
app:layout_constraintTop_toBottomOf="#+id/onboarding_description"
/>
</android.support.constraint.ConstraintLayout>
You say: I didn't give any margin or padding between them.
However, I can see android:layout_marginBottom="-8dip". I know you are setting also android:layout_marginTop="-8dip" to the other image. It's a little weird.
If you want to make your Images fill all the contents, use:
android:scaleType="fitxy"
or
android:scaleType="centerCrop"
in both images
I am having a Guideline in a Constraint Layout that I use to anchor a LinearLayout to keep to its left as follows:
So, you can see the Guideline a bit right to middle and between LinearLayout on the left and the ImageView to the right.
Now, when I run the App and set the text of Skill Set or Tutor Types or Location considerably large, it crosses the GuideLine to being behind the ImageView as follows:
(Note: This is NOT a real person's data but mock data)
If you see the XML, you will find that the LinearLayout is indeed meant to be anchored to_left_of the Guideline but that doesn't happen.
So, what is the problem here? Is there a bug in Constraint Layout or am I missing something?
Layout for reference:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="#color/lightGrey"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:elevation="2dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="#+id/linearLayout"
tools:layout_editor_absoluteY="16dp">
<TextView
android:text="#string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tutor_name"/>
<TextView
android:text="#string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/skill_set"/>
<TextView
android:text="#string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/tutor_types" />
<TextView
android:text="#string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:srcCompat="#android:color/holo_blue_light"
android:id="#+id/display_pic"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tutor_rating"
android:layout_below="#+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="#color/blue"
app:srb_fillColor="#color/blue"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/display_pic"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<TextView
android:id="#+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Requested time"
android:textStyle="italic"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/tutor_rating"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="#+id/linearLayout"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875" />
</android.support.constraint.ConstraintLayout>
Change the android:layout_width="wrap_content" property of the LinearLayout to android:layout_width="0dp".
This will work because setting the layout_width to 0dp means that the width for the LinearLayout will be computed based on the constraints placed on it. Whereas if the width is set to wrap_content the width will be computed based on the size of it's child views.