android constraint layout alignment between textview and edittext - android

I need to put a TextView and EditText in the same line within constraint layout and keep it align each other! below code generate a picture like below:
<?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/serverIpAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="192.168.1.11"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/serverPort"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:ems="10"
android:inputType="number"
android:text="8080"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toEndOf="#+id/serverIpAddr"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now it looks ugly, the TextView and EditText log align horizontally correctly, TextView a little bit above EditText

You can use app:layout_constraintBaseline_toBaselineOf attribute to make the text of both horizontally aligned
<TextView
android:id="#+id/serverIpAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="192.168.1.11"
app:layout_constraintBaseline_toBaselineOf="#id/serverPort"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Related

LinearLayout how to make TextView wrap content with limit?

I want to show 2 TextView in one horizontal LinearLayout, the first TextView is variable and its length may change. The second is always (B). So I want something like this:
|AAA(B)--------|
When A is very long, it should show ellipse in middle:
|AAAA...AAAA(B)|
To solve the problem, I tried wrap content for A:
<LinearLayout orientation="Horizontal" width="match_parent">
<TextView id="#+id/A" width="wrap_content" />
<TextView id="#+id/B" width="wrap_content" />
</LinearLayout>
But there is problem when A is very long, B disappears. It becomes
|AAAAAAAAAAA|
I also tried to add layout_weight:
<LinearLayout orientation="Horizontal" width="match_parent">
<TextView id="#+id/A" width="wrap_content" layout_weight="1" />
<TextView id="#+id/B" width="wrap_content" />
</LinearLayout>
But there is problem when A is very short, there are unwanted space between A and B, It becomes
|AAA-----(B)| ("-" for space)
I don't want space here.
Is there any way to make wrap_content with a max limit?
With a Horizontal LinearLayout you can achieve this using android:layout_weight="1" to the variable TextView A and android:layout_weight="0" to the fixed TextView B. Also the LinearLayout must have android:layout_width="wrap_content".
Xml structure is like below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/A"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="middle"
android:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
android:background="#android:color/holo_blue_light"
android:layout_weight="1"
android:singleLine="true" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="middle"
android:text="B"
android:background="#android:color/holo_red_light"
android:layout_weight="0"
android:singleLine="true"/>
</LinearLayout>
Result when A is Short:
Result when A is Long:
You could use a constraint layout to achieve this.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".presentation.list.CampaignListActivity">
<TextView
android:id="#+id/A"
android:layout_width="0dp"
android:maxLines="1"
android:ellipsize="middle"
android:text="AAAAAAAAAAAAAAAAAAAAAAAA"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/B"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/B"
android:layout_width="0dp"
android:maxLines="1"
android:ellipsize="middle"
android:text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/A"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Here You Go !
<androidx.cardview.widget.CardView
android:id="#+id/cardView7"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_A"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="this is a long text field kdsalfj lksadjlfja sdljfljas dlfjlas djflk js dalk and this text is more than 20fj"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/tv_B"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Less Text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tv_A"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
And then add below code in your OnCreate method:
if (tvA.text.length > 50) {
tvA.text = "${tvA.text.take(20)}...${tvA.text.takeLast(20)}"
}
You have to add the above code lines somewhere so they get executed as the Activity is lauched (e.g. in OnCreate() Function of the Activity)

Android constraintlayout vertical textview alignment

I have following 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/dishContainer"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0ff"
android:clickable="true"
android:focusable="true">
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:maxLines="3"
android:background="#ff0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0f0"
app:layout_constraintStart_toStartOf="#+id/one"
app:layout_constraintTop_toBottomOf="#+id/one"
app:layout_constraintBottom_toTopOf="#+id/three"
tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />
<TextView
android:id="#+id/three"
android:layout_width="wrap_content"
android:background="#f00"
android:lines="1"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/two"
app:layout_constraintTop_toBottomOf="#+id/two"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="Third text that dissapears, but should not go below the parent" />
</android.support.constraint.ConstraintLayout>
The problem is that green textview takes too much space and ignores top and bottom constraints. If I set green text view height to 0dp
I get this:
Which is almost what I want, but if I only have very little text I get:
Here my red textview is left at the bottom, even though green text view has enough free space to shrink and let red textview go up.
Basically I want my red view to always be bellow green view, but when red hits the bottom of parent window it should stop there and also stop green textview from expanding.
How do I achieve this?
Try this
(I set layout_width to match_parent..., you can change it if you want)
<?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:paddingEnd="16dp"
android:paddingStart="16dp"
android:layout_width="match_parent"
android:layout_height="100dp">
<TextView
android:id="#+id/one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="3"
android:background="#ff0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />
<TextView
android:id="#+id/two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0f0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"
app:layout_constraintBottom_toTopOf="#id/three"
app:layout_constrainedHeight="true"
tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />
<TextView
android:id="#+id/three"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#f00"
android:lines="1"
app:layout_constraintHeight_min="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/two"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="Third text that dissapears, but should not go below the parent" />
</android.support.constraint.ConstraintLayout>
While the accepted answer works, I noticed that the height of the bottom TextView will expand to fill the remaining vertical space of the container.
With the help of a Guideline, we can give the bottom TextView a fixed height regardless if it has room to expand.
dimens.xml
<dimen name="bottom_view_height">20dp</dimen>
layout.xml
<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/green"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:maxLines="3"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem/random"/>
<TextView
android:id="#+id/yellow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFEB3B"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#id/green"
app:layout_constraintBottom_toTopOf="#id/bottom_guide"
app:layout_constraintVertical_bias="0"
tools:text="#tools:sample/lorem/random"
tools:lines="100"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/bottom_guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="#dimen/bottom_view_height"/>
<TextView
android:id="#+id/red"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_view_height"
android:background="#F44336"
app:layout_constraintTop_toBottomOf="#id/yellow"
tools:text="#tools:sample/lorem/random"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How it works:
The Guideline serves as the bottom constraint for the middle TextView, which is aligned to its top constraint via layout_constraintVertical_bias="0".
Setting layout_constrainedHeight="true" on the middle TextView ensures it never expands past the guideline. This in turn ensures that the bottom TextView will never go off screen.
I would remove the app:layout_constraintBottom_toTopOf="#+id/three" constraint on TextView #2, there's no need for it and it's probably the reason why you're seeing the 2nd TextView take up the extra space.
We should not use static value for height if content is dynamic.Don't align a view at bottom in constraint layout if you assign views in linear way
<?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/dishContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0ff"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:clickable="true"
android:focusable="true">
<TextView
android:id="#+id/one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#ff0"
android:maxLines="3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />
<TextView
android:id="#+id/two"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#0f0"
app:layout_constraintEnd_toEndOf="#+id/one"
app:layout_constraintStart_toStartOf="#+id/one"
app:layout_constraintTop_toBottomOf="#+id/one"
tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />
<TextView
android:id="#+id/three"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#f00"
android:lines="1"
app:layout_constraintEnd_toEndOf="#+id/one"
app:layout_constraintStart_toStartOf="#+id/one"
app:layout_constraintTop_toBottomOf="#+id/two"
tools:text="Third text that dissapears, but should not go below the parent" />
</android.support.constraint.ConstraintLayout>
you could try Linear Layout
Edit New Code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:maxLines="3"
android:background="#ff0"
android:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk"
/>
<TextView
android:id="#+id/two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#0f0"
android:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />
<TextView
android:id="#+id/three"
android:layout_width="match_parent"
android:background="#f00"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text="Third text that dissapears, but should not go below the parent" />

Align 2 views bottoms but one is pushed lower further

If I have a constraint layout like this
<android.support.constraint.ConstraintLayout >
<TextView
android:layout_width="200dp"
android:layout_height="50dp"
android:text = "Some text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/preview"
app:layout_constraintTop_toTopOf="#+id/parent">
/>
<Button
android:layout_width="57dp"
android:layout_height="281dp"
app:layout_constraintBottom_toBottomOf="#+id/textview"
app:layout_constraintEnd_toEndOf="#+id/textview"
app:layout_constraintStart_toStartOf="#+id/textview">
/>
</android.support.constraint.ConstraintLayout>
Where textview is another widget. then this will make the button and the textview bottom boundaries aligned.
Is there anyway where I can push button 10dp lower? So I want the button bottom to be anchored to the bottom of the textview however I wanted to be pushed a bit lower by 10dp. I tried to set the android:layout_marginBottom="-10dp" but that didn't work!
Any idea?
use android:layout_marginTop="10dp" in your button layout
Put them in a FrameLayout, with layout_height="wrap_content". Then, set layout_gravity="bottom" on both the child Views. Give your TextView layout_marginBottom="10dp".
The result should be something like (this is a skeleton with only the relevant attrs):
<ConstraintLayout>
<FrameLayout
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_marginBottom="10dp"
android:layout_gravity="bottom"
/>
<Button
android:layout_gravity="bottom"
/>
</FrameLayout>
</ConstraintLayout>
in java or kotlin seet textview.bringToFront();
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="#+id/button"
android:layout_width="157dp"
android:layout_height="140dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/textview"
android:layout_width="150dp"
android:layout_height="50dp"
android:text = "Some text"
android:gravity="center"
android:textSize="15sp"
android:textColor="#05afaf"
app:layout_constraintBottom_toBottomOf="#id/button"
app:layout_constraintStart_toStartOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/button"
android:layout_marginBottom="20dp"
/>
</android.support.constraint.ConstraintLayout>

How to put text on right centre of image view on constraint layout

Following is a part of my whole xml of constraint Layout.
<ImageView
android:id="#+id/img_apn_not_set"
style="#style/DeviceManagementImageView"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_sos"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view1" />
<TextView
android:id="#+id/tv_apn_not_set"
style="#style/DeviceManagementHeaderText"
android:text="Apn not set"
android:layout_marginTop="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/img_apn_not_set"
app:layout_constraintTop_toTopOf="#+id/img_apn_not_set" />
What I am trying to do is get the text view on exact centre on the right side of image view. In linear layout we achieve it mostly by gravity. Here I am using marginTop to achieve the same . So can I do the same by using any property . Is there a property something like rightOfCentreOf ?
Thanks
pls add one line in your textview
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
also remove android:layout_marginTop="5dp"
hope it help you
Try this, If you want to move the text to the right or left use Horizontal bias, If you want to move your text to the top or bottom use vertical bias.
<TextView
android:id="#+id/tv_apn_not_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/app_name"
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
app:layout_constraintEnd_toEndOf="#+id/img_apn_not_set"
app:layout_constraintHorizontal_bias="0.63"
app:layout_constraintStart_toStartOf="#+id/img_apn_not_set"
app:layout_constraintTop_toTopOf="#+id/img_apn_not_set" />
Try this
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/AmountLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBaseline_toBaselineOf="#id/Amount"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Amount"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="NILESH"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#id/AmountLabel"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
RESULT
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_apn_not_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_apn_not_set"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Apn not set"
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/img_apn_not_set"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You can use app:layout_constraintWidth_default="wrap" and give all 4 side constraint it will be at center
Example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_apn_not_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/tv_apn_not_set"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Apn not set"
app:layout_constraintWidth_default="wrap"
app:layout_constraintTop_toTopOf="#+id/img_apn_not_set"
app:layout_constraintBottom_toBottomOf="#+id/img_apn_not_set"
app:layout_constraintLeft_toRightOf="#+id/img_apn_not_set"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
It will look like this

Align ListView with other View

I have an EditText, which gets aligned with other TextView below it.
But as soon as I add ListView, and try to Left align with plain text at the top the width and location of the EditText and TextView fields below it changes.
Also, if I try to use another Linear Layout instead of a ListView I face the same issue. What wrong could I be doing here?
I have tried setting width and height of listView, to match_contraint, but that did not work too.
Below is the xml for it,
<?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"
tools:context="com.example.testapp.app">
<EditText
android:id="#+id/editText6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="#+id/listView4"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#+id/editText6"
app:layout_constraintStart_toStartOf="#+id/editText6"
app:layout_constraintTop_toBottomOf="#+id/editText6" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintStart_toStartOf="#+id/editText6"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<ListView
android:id="#+id/listView4"
android:layout_width="395dp"
android:layout_height="472dp"
app:layout_constraintHorizontal_weight="0"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="123dp" />
</android.support.constraint.ConstraintLayout>
I think you put constraints in the wrong direction. So you aligned all TextViews to the start of the EditText. But EditText in its turn is aligned to the start of the ListView.
app:layout_constraintStart_toStartOf="#+id/listView4"
And as ListView doesn't have aligning, it is positioned at (0, 0), I guess.

Categories

Resources