I have a simple layout.
<?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="wrap_content"
android:background="#color/colorDarkGray">
<RelativeLayout
android:id="#+id/container3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:alpha="0.7"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Another text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Some text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
In design view, it looks so
As you can see there is no left and right margins. Top and bottom margins work well. If I remove left or right margin my relative layout moves beyond the screen a bit.
Guess I can do it without a relative layout at all, BUT I'm interested why that happened.
You should avoid using nested views inside ConstraintLayout. The reasons are:
ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups) as it's stated in Build a Responsive UI with ConstraintLayout
Traditional nested layout hierarchy negatively impacts on performance as it's stated in Understanding the performance benefits of ConstraintLayout
The result layout source should look like:
<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="wrap_content"
android:background="#color/colorDarkGray">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:alpha="0.7"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Another text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal"
android:id="#+id/textView"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="end"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Some text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal"
android:id="#+id/textView2"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/textView"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
You can learn how to build layouts with ConstraintLayouts by following steps in Google's Codelab.
Try this change your RelativeLayout width to android:layout_width="0dp"
<?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="wrap_content"
android:background="#color/colorDarkGray">
<RelativeLayout
android:id="#+id/container3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:alpha="0.7"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Another text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Some text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Yes, of course there're no left and right margins in your layout when you're defining your RelativeLayout as below:
<RelativeLayout
android:id="#+id/container3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
That means RelativeLayout has wrap_content width and height and it's in the center of Parent (with our constraintTop,Bot....).
How to solve it? Just set the width of your relative layout to 0dp. According to constraints, that means your RelativeLayout will be as wide as parent.
Related
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.
I am using Constraint Layout in a list item and having difficulties in getting it to work properly when the code is compiled, though it is coming up properly in the preview pane. I can use Relative Layout but still want to know why it does not work because I am facing this problematic behaviour in many other cases.
In the image below, this is how the layout is, with all the children
constrained as desired.
For the sake of clarity, below image shows each child's constraints individually
This is how it renders in a recycler view :
List item scrolled down :
Source code for this layout :
<?xml version="1.0" encoding="utf-8"?>
<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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_recent_activity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civ_user_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="#color/primary"/>
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextTitle"
app:layout_constraintBottom_toTopOf="#+id/tv_candidate_email"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/civ_user_avatar"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextSecondary"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_name" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Assessment : "
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_email" />
<TextView
android:id="#+id/tv_assessment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextTitleBold"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView7"
app:layout_constraintTop_toTopOf="#+id/textView7" />
</android.support.constraint.ConstraintLayout>
</layout>
Is there an explanation for this behavior so that I can understand how Constraint layout is actually working?
Update : After removing bottom constraints of Imageview and textView7constraint, the layout looks as below :
For all of your views instead of match_parent
use 0dp in the xml or select fill_parent in the design view
Please try below layout :
<?xml version="1.0" encoding="utf-8"?>
<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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civ_user_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:src="#color/primary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintStart_toEndOf="#+id/civ_user_avatar"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextSecondary"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_name" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:maxLines="1"
android:text="Assessment : "
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_email" />
<TextView
android:id="#+id/tv_assessment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView7"
app:layout_constraintTop_toTopOf="#+id/textView7" />
</android.support.constraint.ConstraintLayout>
</layout>
Try using Guidelines, for example horizontal, and you can fit all the view more easy there. If you combine it with 2 or 3 verticals (guidelines) it will be more easy to arrive it.
I am not getting proper alignment even though I constrained the textviews.My text is running over the other text which looks messy.
Here is the screenshot of that.
I want it to align properly even if the text goes some large.Please suggest some ways to do that.
Here is the code for my layout-
<?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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/magnitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
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.0"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
android:maxWidth="135dp"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/date"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="May 20,2016" />
</android.support.constraint.ConstraintLayout>
The New layout that I want is in this image
You can use this library to fit text
build gradle file(app):
implementation 'me.grantland:autofittextview:0.2.+'
Usage in layout
<me.grantland.widget.AutofitTextView
android:id="#+id/question_title"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_gravity="center"
android:gravity="center"
android:padding="8dp"
android:text="Post samething"
android:textAlignment="center"
android:textColor="#color/icons"
android:textStyle="bold"
android:maxLines="2"
android:textSize="30sp"
autofit:minTextSize="16sp"
/>
You can read more from this link
Hope this helps
I have re created your layout please use below
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum=".6"
android:padding="15dp"
android:orientation="horizontal">
<TextView
android:id="#+id/magnitude"
android:layout_width="0dp"
android:layout_weight=".1"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="0dp"
android:layout_weight=".3"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_weight=".2"
android:padding="5dp"
android:layout_height="wrap_content"
android:textSize="20sp"
tools:text="May 20,2016" />
</LinearLayout>
if you are working with constraint layout you can use the baseline of the text view for this purpose
Baseline alignment
Align the text baseline of a view to the text baseline of another view.
See the related section in the documentation in order to learn how to use the baseline allinment
https://developer.android.com/training/constraint-layout/#baseline
I am making CardView with three ConstraintLayouts. One ConstraintLayout wraps two ConstraintLayout which are located side by side.
The problem is that right-sided ConstraintLayout is gone if the width is set to match_constraint. It seems fine in Android Studio, but it is gone when I run this on my phone. I assume that the reason "match_constraint" sets the width to 0dp. I want the right-sided Constraint to dynamically change the width depending on the phone.
The below is my layout XML file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="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.support.v7.widget.CardView
android:id="#+id/cv_result_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:padding="8dp"
card_view:cardBackgroundColor="#eee"
card_view:cardCornerRadius="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_left-panel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/blank_color"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/iv_result_quiz_detail"
android:layout_width="140dp"
android:layout_height="115dp"
android:layout_margin="4dp"
android:contentDescription="#string/iv_result_quiz_detail"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintTop_toTopOf="parent"
card_view:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/tv_no_of_likes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/iv_result_quiz_detail"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:layout_toEndOf="#+id/chb_like"
android:gravity="top"
android:text="#string/tv_no_of_likes"
android:textSize="12sp"
android:textStyle="italic"
card_view:layout_constraintStart_toEndOf="#+id/chb_like"
card_view:layout_constraintTop_toBottomOf="#+id/iv_result_quiz_detail" />
<CheckBox
android:id="#+id/chb_like"
android:layout_width="17dp"
android:layout_height="17dp"
android:layout_below="#+id/iv_result_quiz_detail"
android:layout_margin="4dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/selector_like"
android:button="#null"
android:contentDescription="#string/ib_like"
android:scaleType="fitXY"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintStart_toStartOf="#+id/iv_result_quiz_detail"
card_view:layout_constraintTop_toBottomOf="#+id/iv_result_quiz_detail" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_right_panel"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#color/blank_color"
card_view:layout_constraintBottom_toBottomOf="#+id/cl_left-panel"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toEndOf="#+id/cl_left-panel"
card_view:layout_constraintTop_toTopOf="#+id/cl_left-panel">
<TextView
android:id="#+id/tv_quiz_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:maxLines="2"
android:text="#string/test_question"
android:textSize="12sp"
android:textStyle="bold"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_choice_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_quiz_desc"
android:layout_marginStart="4dp"
android:layout_marginTop="8dp"
android:background="#drawable/shape_round_button_mint"
android:ellipsize="end"
android:gravity="start"
android:maxLines="1"
android:text="#string/test_choice"
android:textSize="12sp"
card_view:layout_constraintStart_toStartOf="#+id/tv_quiz_desc"
card_view:layout_constraintTop_toBottomOf="#+id/tv_quiz_desc" />
<TextView
android:id="#+id/tv_choice_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_choice_01"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:ellipsize="end"
android:gravity="start"
android:maxLines="1"
android:text="#string/test_choice"
android:textSize="12sp"
card_view:layout_constraintStart_toStartOf="#+id/tv_quiz_desc"
card_view:layout_constraintTop_toBottomOf="#+id/tv_choice_01" />
<TextView
android:id="#+id/tv_choice_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_choice_02"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:ellipsize="end"
android:gravity="start"
android:maxLines="1"
android:text="#string/test_choice"
android:textSize="12sp"
card_view:layout_constraintStart_toStartOf="#+id/tv_quiz_desc"
card_view:layout_constraintTop_toBottomOf="#+id/tv_choice_02" />
<TextView
android:id="#+id/tv_choice_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_choice_03"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:ellipsize="end"
android:gravity="start"
android:maxLines="1"
android:text="#string/test_choice"
android:textSize="12sp"
card_view:layout_constraintStart_toStartOf="#+id/tv_quiz_desc"
card_view:layout_constraintTop_toBottomOf="#+id/tv_choice_03" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
What I expected is like
Maybe your first ConstraintLayout (that has fixed width) occupies the entire screen.
Try using layout_constraintHorizontal_weight to determine the portion of the screen that each layout occupies.
Left layout:
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_left-panel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/blank_color"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toStartOf="#id/cl_right_panel"
card_view:layout_constraintHorizontal_weight="1"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toTopOf="parent">
Right layout:
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_right_panel"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#color/blank_color"
card_view:layout_constraintBottom_toBottomOf="#+id/cl_left-panel"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintHorizontal_weight="1.5"
card_view:layout_constraintStart_toEndOf="#+id/cl_left-panel"
card_view:layout_constraintTop_toTopOf="#+id/cl_left-panel">
Note: You don't need the root LinearLayout
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.