I wanted to apply a margin to the bottom of the first view.
However, I found that the bottom margin of the above view doesn't apply.
But when I give the top margin to the below view it worked correctly.
Why is this?
This is an example pic and code.
When bottom margin is applied to the above(test) view
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST"
android:textSize="24sp"
android:background="#color/light_blue_400"
android:layout_marginTop="50dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="30dp"
app:layout_constraintBottom_toTopOf="#id/test2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/gray_400"
android:text="TEST2"
android:textSize="24sp"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/test"
app:layout_constraintLeft_toLeftOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
When top margin is applied to the below(test2) view
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST"
android:textSize="24sp"
android:background="#color/light_blue_400"
android:layout_marginTop="50dp"
android:layout_marginLeft="10dp"
app:layout_constraintBottom_toTopOf="#id/test2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/gray_400"
android:text="TEST2"
android:textSize="24sp"
android:layout_marginTop="30dp"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/test"
app:layout_constraintLeft_toLeftOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
First things first, the margin is applied only if you set a constrain in the same direction, so in the second code android:layout_marginTop is applied because you have layout_constraintTop_toBottomOf.
But in the first code you add layout_marginBottom and layout_constraintBottom_toTopOf and didn't work and hers is why?
test2 is dependent on test because it does not have a constraint in the opposite direction (which is the bottom).
and because of that adding app:layout_constraintBottom_toTopOf="#id/test2" to test, it doesn't do anything at all, I'm sure you hard-coded it, but if you try to do this with the design panel it not going to allow you to do this, and this is like you create Noncomplete Chain.
try this code
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="50dp"
android:background="#color/light_blue_400"
android:text="TEST"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#id/test2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="30dp"
android:background="#color/gray_400"
android:text="TEST2"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/test" />
</androidx.constraintlayout.widget.ConstraintLayout>
then try to move the TextViews in the design panel, you going to notice you are not able to move the TextViews up or down, this is because I create a Vertical-Chine between test and test2.
Related
How to make the textlayout not go beyond the screen
I have a program where I need to add line breaks to the textlayout, but when I add \n to it a certain number of times, the text goes beyond the screen. So here's how to fix it?
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context=".MainActivity">
<EditText
android:id="#+id/editText"
android:layout_width="351dp"
android:layout_height="46dp"
android:layout_toLeftOf="#+id/button"
android:fontFamily="monospace"
android:hint="Command"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/guideline"></EditText>
<TextView
android:id="#+id/textView"
android:layout_width="378dp"
android:layout_height="657dp"
android:layout_marginEnd="16dp"
android:fontFamily="monospace"
android:gravity="top|right"
android:text="Hello World!"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="100px"
android:layout_height="100px"
android:layout_marginEnd="16dp"
android:background="#000000"
android:text="↲"
android:fontFamily="monospace"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="658dp" />
</android.support.constraint.ConstraintLayout>
It is recommended to use match_parent or wrap_content or you can use 0dp to scale view based to constraints. I would recommend use 0dp for width(scale to your requirement) and wrap_cotent for width
I'm trying to create a two-row ConstraintLayout, each row has two views. The problem with what I have now is the left views is overlapping the right views, as you can see in the screenshot:
This is the code I'm using:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like the left views (title, date) to stop where the download image and duration start. I haven't worked with ConstraintLayouts much so it might be something easy.
There are a lot of different ways to achieve this, one way would be to constraint your text into the image and give them the same height.
They won't overlap each other if you will do something like this :
In your example, you used android:layout_width="match_parent" on the text so it was expanded throw all of the row and overlapped your other view.You should use android:layout_width="0dp" (it is match_constraint) so your views won't overlap each other.
Here is an example of a layout that looks like the row you want to achieve:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="loot at this text that wont everlap the image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:src="#tools:sample/avatars[1]" />
</androidx.constraintlayout.widget.ConstraintLayout>
I need to set text for a LottieAnimationView, but the documentation isn't helping me much
I tried adding a text view on the layout, but it doesn't seem to do anything.
<com.airbnb.lottie.LottieAnimationView
android:background="#color/trans_100"
android:id="#+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center"
/>
I don't think you can put a text in the animation because is like an image (you don't have the source for edit this).
However, if you use relative or constraintlayout you can do the trick by using:
In relative layout:
<TextView
android:paddingTop="-10dp"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center" />
In constraintlayout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="350dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:layout_height="match_parent">
<com.airbnb.lottie.LottieAnimationView
android:background="#color/trans_100"
android:id="#+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:paddingTop="10dp"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#null"
app:textAllCaps="false" />
</androidx.constraintlayout.widget.ConstraintLayout>
Right now i am doing a test with the information a gave you with a Lottie Animation I am working in ConstraintLayout a this is the result:
I'm completely new to Android development, and so I'm still a little confused as to which layouts to use in certain situations.
I need to recreate this:
Where you have 2 lines of text (one above, one below) aligned next to an image. This is all within a card.
Bold Text and Text should be centered with each other vertically. Subtext should be 10dp below the first line. The space between the lines of text and the image is 16dp.
First I used only a RelativeLayout with an ImageView and 3 TextView in it, but that felt wrong and unorganized.
So then I tried this:
http://i.imgur.com/eph6Em8.png
But I'm still not sure if this is the most correct way to do this.
What should I change?
Try this:
Set your "Parent Layout" as "RelativeLayout".
Inside this relative layout, take an ImageView and set "alignParentLeft" property to true and also "centreInparent" to true.
Now, inside this RelativeLayout, take a LinearLayout with orientation set to Veritical and "toRightOf=#id/ImageView". Inside this LinearLayout, take RelativeLayout (RelativeLayout2) as first child and inside it Take two "TextViews".
One with "alignParentLeft=true" and "width = matchparent". While the second one "alignParenRight=true" and "width = wrap_content". Now, what you need to is, in the first "TextView" set "toLeftOf=#id/secondTextView".
Now about the last "TextView". Just create a "TextView" inside the LinearLayout (that you created above with vertical orientation) and place it as second child.
This will create a perfect layout. It is also an easy way to create one.
You can use Constraint Layout to achieve your desired UI. Below is the xml code to implement your UI.
<?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="wrap_content">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:src="#drawable/def_doc"
android:id="#+id/rvMsg_img"
android:maxHeight="80dp"
android:maxWidth="80dp"
android:minHeight="80dp"
android:minWidth="80dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/viewLine" />
<TextView
android:text="Kevin De Bruyne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_name"
android:textColor="#color/textBlack"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.0"
android:textSize="16sp"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time" />
<TextView
android:text="Hello developer. please check this message for long length. max length to 50 characters."
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_last"
android:maxLines="2"
android:ellipsize="end"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/rvMsg_name"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
<TextView
android:text="09:50 AM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_time"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="1.0" />
<View
android:id="#+id/viewLine"
android:layout_height="2dp"
android:layout_width="0dp"
android:background="#EAEAEA"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it will help you.
Try this layout structure
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="centar"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BOLD TEXT"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sub Text" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Text" />
tru this code to achive gole.
I have the following Constraint Layout:
`<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
android:layout_margin="16dp">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/vertical_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
<TextView
android:id="#+id/date_tv"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="2 hours ago" />
<TextView
android:id="#+id/source_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#id/date_tv"
app:layout_constraintTop_toTopOf="#id/date_tv"
tools:text="BBC News" />
<TextView
android:id="#+id/headline_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:maxLines="2"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/date_tv"
app:layout_constraintRight_toLeftOf="#id/vertical_guideline"
tools:text="Apple admits slowing down older iphones" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>`
It has the following output:
Now what I want is that the headline text view should only be as wide as the guideline and should move to the next line when the text is long. Which is not happening. Can someone please help me out with this?
Try setting the width to 0dp (match_constraints) as follows:
<TextView
android:id="#+id/headline_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:maxLines="2"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/date_tv"
app:layout_constraintRight_toLeftOf="#id/vertical_guideline"
tools:text="Apple admits slowing down older iphones" />
You are using android:width=wrap_content for headline_tv which prioritizes the actually width of the textview. Use 0dp so it would match constraint.