Develop Reference

android constraint layout alignment between textview and edittext

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

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 align buttons next to text that should flow on 2 lines?

So I want to have a title with 2 buttons next to it. These buttons should stick to the left next to the text, and when the text becomes too long, it should flow on 2 lines.
I was able to replicate this by giving the textView a maxwidth, but this causes the textview to take that maxwidth, even if it reflows on 2 lines. Therefore my buttons don't align next to the text anymore.
Like this:
How can I make my textView take the width it needs, not the one I tell it to use as maxWidth?

Here comes the perfectly working answer using ConstraintLayout (as I love this layout).
This is the code.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:maxWidth="300dp">
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:maxWidth="300dp"
android:text="Some layout is going to be created and whatever I do it won't cross the limit."
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"/>
</android.support.constraint.ConstraintLayout>
<ImageView
android:layout_height="40dp"
android:background="#365987"
android:layout_width="40dp"
android:layout_marginStart="5dp"
android:id="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"/>
<ImageView
android:id="#+id/image1"
android:layout_height="40dp"
android:background="#e85f11"
android:layout_width="60dp"
android:layout_marginStart="5dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Outputs:
Whatever the text is, it will not cross the maxwidth. And with less width than maxwidth, it's width will be wrap_content.

<?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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="Male:"
android:textColor="#111111"
android:textSize="12dp" />
<ImageView
android:id="#+id/iv_male"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/block_user" />
<ImageView
android:id="#+id/iv_female"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/blocked_user" />
</LinearLayout>
<TextView
android:id="#+id/tv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is something Demo Content"
android:layout_marginLeft="#dimen/_15sdp"
android:textColor="#111111"
android:textSize="12dp" />
</LinearLayout>
So you can just add content below the linear layout complete
I Hope it Helps you and you will get your solution.

Try this 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="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
android:paddingEnd="100dp"
android:text="Simple textdfddfdf dfdfdfdfdf dfdf Sample Text Sample Text" />
<LinearLayout
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/zero"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Here, You have to pass android:paddingEnd="100dp". This you can manage from dimens.xml
I hope. This will help full

You should use ConstraintLayout
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Let's take an instance of that Planner part of the image.
<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/constraintLayout"
<!-- Other attributes -->
<TextView
android:id="#+id/text"
android:layout_width = "xxxdp"
android:layout_height = "xxxdp"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintLeft_toLeftOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
<!-- Other attributes --> />
Definition of Attributes used.
layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.

android - Textview's gravity doesn't work

I have a problem that I can't put TextView on the center of the screen.
<?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="hojune.intelibag.Splash">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"
android:textSize="32sp"
android:layout_gravity="center"
android:textColor="#404040" />
Please click the link to view my result.
{my result}
How can I make TextView put on the center of the screen? Thanks.

If you want to set gravity of text view related to parent, use layout_gravity instead of gravity. android:gravity is used to set gravity of content inside the view and android:layout_gravity is used to set gravity of the view related to its parent see Documentation for more details
Make sure you have match_parent set for both layout_width and layout_height for the parent of the textview

try this one
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"
android:textSize="32sp"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#404040"/>
android:gravity="center" is use for textView text's center..and android:layout_gravity="center" is use for textView alignment at center.

try this
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello world!"
android:textSize="32sp"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#404040"/>

Add layout gravity to your parent view like below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello world!"
android:textSize="32sp"
android:gravity="center"
android:textColor="#404040"/>
</LinearLayout>
There are many stack answers available with respect to these type specific questions.please try those before your posting the new question. Thanks

Try this, you need to change gravity to layout gravity if you are not putting TextView in any layout
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"
android:textSize="32sp"
android:layout_gravity="center"
android:textColor="#404040"/>
else if you are putting it in a layout then try this
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"
android:textSize="32sp"
android:textColor="#404040"/>
</LinearLayout>

Relative Layout, align center of parent and right of view with no overlap

I am trying to align a TextView to be centered in a relative layout but also to the right of an ImageView. I would like it to look like this.
[-(image)-----some text here------------]
I'm able to do this with the code below, but if the text becomes too long it overlaps the image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_centerInParent="true" />
</RelativeLayout>
I have tried aligning the TextView to the right of the ImageView but it stops centering in parent if I do that. Any help is appreciated

You could try something like this. I used a radio group instead of a linear layout for this but it should still work. Have a the linear layout horizontal as you already do and then make the layout gravity center then just put the image first then the text view
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:paddingTop="20dp">
<RadioButton
android:id="#+id/radio_student"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_student"
android:onClick="onRadioButtonClicked"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"/>
<RadioButton
android:id="#+id/radio_teacher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_teacher"
android:onClick="onRadioButtonClicked"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"/>
</RadioGroup>
EDIT:
I don't know if the margin attributes for the buttons I have work on text views but padding left on the text might work

try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="`enter code here`true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_toRightOf="#+id/navMenu"
android:alignParentRight="true"
android:gravity="center" />
</RelativeLayout>

You could (and should, for performance sake), use a compound drawable for the TextView (and get rid of the ImageView)
You want the image to stay on the Left part of the TextView, so use android:drawableLeft:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White"
>
<TextView
android:id="#+id/actionBarTitle"
android:drawableLeft="#drawable/home_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:centerInParent="true"
android:gravity="center"
/>
</RelativeLayout>