TextView not getting inline with other view - android

In this i tried numerous way to bring pay and recieve in vertical line with hello world , but every thing failed
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:gravity="center"
tools:context="com.ubschallenge.drawable.MainActivity"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/pay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pay"
android:layout_marginBottom="110dp"
android:layout_centerHorizontal="true"
android:layout_above="#id/button"
/>
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/pay"
android:layout_alignStart="#+id/pay"
android:layout_centerVertical="true"
android:background="#drawable/circle"
android:gravity="center"
android:text="Hello World!" />
<TextView
android:layout_centerHorizontal="true"
android:id="#+id/recieve"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recieve"
android:layout_marginTop="110dp"
android:layout_below="#id/button"
/>
</RelativeLayout>
This above is the code . I want to make it look like TEZ Payment app home screen
EDIT : After clicking hello world
Expected output :
Khalal Output :
enter image description here
Khaled Updated answers output: enter image description here


Using ConstraintLayout.
<?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">
<android.support.constraint.Guideline
android:id="#+id/guideline_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<TextView
android:id="#+id/pay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/button"
android:text="Pay"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline_top" />
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_centerVertical="true"
android:layout_marginBottom="8dp"
android:background="#drawable/circle"
android:gravity="center"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/recieve"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button"
android:layout_centerHorizontal="true"
android:text="Recieve"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline_bottom"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.50"/>
</android.support.constraint.ConstraintLayout>
Update 1
Make use of Guideline with ConstraintLayout
Update 2
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:background="#drawable/circle"
android:gravity="center"
android:text="Hello World!"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.75"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
And try to update layout_constraintHeight_percent and layout_constraintGuide_percent of top and bottom Guidline to achieve your Goal.

Related

Align textviews in left and right side of a linear layout?

I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.

Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.

Problem placing TextView on ImageView using ConstraintLayout

I am using Constraintlayout and I want to place my Textview on my Imageview, it is supposed to look like this after I'm done: https://i.stack.imgur.com/mYAws.png but each time I add constraints to the texts(Vertically and horizontally), the texts disorganizes and goes totally from how I want it to be,
Sometimes even shifting my images. I have tried severally to adjust it well to no avail
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="358dp"
android:layout_height="337dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/orange_panel" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginStart="45dp"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/green_panel" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/pink_panel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="89dp"
tools:layout_editor_absoluteY="415dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

The answer is pretty straightforward. First you should delete this lines from both text views.
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp"
Then all you need to do is add constraints like this. Below are constraints for your image
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
And the constraints for your text view would be like this.
app:layout_constraintEnd_toEndOf="#+id/image_view"
app:layout_constraintStart_toStartOf="#+id/image_view"
app:layout_constraintTop_toTopOf="#+id/image_view"
Of course you can add different constraints for the image because i do not know how do you want to position the image view in the app. But if you want a text view to be inside the image like in the link you sent then the constraints for the text view will be always like this.

It's all about tools:layout_editor_absoluteX and tools:layout_editor_absoluteY for yours textView3 and textView4. Also i think you do not know for what namespace tools exist.

Check the example below; it shows you what constraints can be used to get in the direction of your layout goals.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="16dp"
android:background="#00FF00"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#0000FF"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
See how this example looks: screenshot.

View get packed in ConstraintLayout, Views run out of screen in LinearLayout

I am implementing a signup/login screen like below
I have tried this using ConstraintLayout 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"
android:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="12dp"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="48dp"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="#+id/btn2"
app:layout_constraintStart_toStartOf="#+id/btn2"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy"
android:layout_marginTop="32dp"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Summary of XML:
Vertical chain is applied on four top most views
vertical chain style is set to packed
last text view is constraint to bottom and sides
margin is set on views to separate items.
Problem is when I run this on my phone, bottom text views get tight packed as shown here.
Next I tried LinearLayout 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:gravity="center_horizontal"
android:layout_margin="16dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:layout_marginTop="72dp"
android:src="#drawable/ic_launcher_background"/>
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="8dp"
android:text="Button 1" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_height="56dp"
android:layout_marginBottom="32dp"
android:text="Button 2" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
android:layout_weight="1"/>
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"/>
</LinearLayout>
In this case bottom text views are not visible as shown here.
My device resolution is 720 * 1280 pixels.
I suppose the problem is with the hard margins. How could I make the screen look like in the sketch above, regardless of screen height? either using LinearLayout or ConstraintLayout?

I would recommend you you use all screen densities rather than one for this you can use the famous library SDP or follow the guideline provided by android.
Second use Guideline class for Constraintlayout.
Here is the sample code snippet you can also use this one.
<?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="match_parent"
android:layout_margin="16dp">
<ImageView
android:id="#+id/img"
android:layout_width="#dimen/_200sdp"
android:layout_height="#dimen/_200sdp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="By continuing you agree to our terms and privacy policy"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="#+id/divider"
app:layout_constraintVertical_bias="1.0" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintGuide_percent="0.7"
app:layout_constraintTop_toBottomOf="#+id/txt_already_member" />

Actually solution to my problem is using Guidelines in ConstraintLayout with Guidelines app:layout_constraintGuide_percentattribute and constraining the views to Guidelines.
Since value for app:layout_constraintGuide_percent is a percentage rather than a dp value, it works responsively regardless of screen width/height.
example :
<?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"
android:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="200dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline5" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 2"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".6" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you very much Rehan Sarwar for remembering me about Guidelines.

How can make the two buttons to be center when I use ConstraintLayout?

I hope to make two buttons on the center of screen just like Image A when I use Code A, but in fact the two button located on the left screen just like Image B, what error code do I made in my Code A? I know that I can do it by adding a Guideline control, but why can't the Code A do it? Thanks!
Image A
Image B
Code A
<?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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginRight="7dp"
android:layout_marginTop="2dp"
android:text="One"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLefttOf="#+id/btnCancel"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="#+id/btnCancel"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="2dp"
android:text="Two"
app:layout_constraintLeft_toRightOf="#+id/btnAddEdit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
To Cheticamp:
Thanks!
Code AA works well, why can I delete the app:layout_constraintRight_toLefttOf="#+id/btnCancel" ?
Code AA
<Button
android:id="#+id/btnAddEdit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginRight="7dp"
android:layout_marginTop="2dp"
android:text="One"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnCancel"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
/>
Code BB works well , why can I replace app:layout_constraintEnd_toEndOf="parent" with app:layout_constraintRight_toRightOf="parent"
Code BB
<Button
android:id="#+id/btnCancel"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="2dp"
android:text="Two"
app:layout_constraintStart_toEndOf="#+id/btnAddEdit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
And more, could you tell me what are different between app:layout_constraintEnd_toEndOf="parent" and app:layout_constraintRight_toRightOf="parent"

Here is the corrected XML that will lay out like "Image A" without any hard coding or margins:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnCancel"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintRight_toLefttOf="#+id/btnCancel"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnAddEdit" />
</android.support.constraint.ConstraintLayout>
The key thing to do is to constrain button "one" to the left side of the parent and button two to the right side. A packed chain is create between the two buttons. See Chains in the documentation.
You can set a start/end margin on the buttons to separate them while maintaining the centering.
CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

For your button try using this attribute for button one
app:layout_constraintHorizontal_bias="0.4"
and for button two use
app:layout_constraintHorizontal_bias="0.6"

I've updated your code, it should be working now!
<?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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLefttOf="#+id/btnCancel" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginEnd="80dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

Android Layout - Position issue

I'm new to Android and I'm building small app in order to get the basics. I'm facing a dumb issue which, apparently, I can't seem to be able to fix.
I'm building a screen that looks like this on the designer
However, when starting the emulator, the design looks like this:
Can you please advice me what I'm doing wrong? My xml file is as follows:
<?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.todorivanov.mytaskmanager.MainActivity">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Buy"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="120dp"
android:layout_height="49dp"
android:text="Add task"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
<CalendarView
android:id="#+id/calendarView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
Thanks a lot!

you need to use relative or Linear Layout to achieve what you are looking for. Following is the code for RelativeLayout
<?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.todorivanov.mytaskmanager.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation = "horizontal"
android:id = "#+id/buttons">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="Buy"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="120dp"
android:layout_height="49dp"
android:text="Add task"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
</LinearLayout>
<CalendarView
android:id="#+id/calendarView"
android:layout_below = "#+id/buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
</RelativeLayout>
close any other tags ..
now you'll get the calenderView under the buttons just like the editor preview but you may need to adjust the padding/margin according to your requirements.
Hope this helps..

use Relative layout and code like this
Edited with suggestion of performance as said by Rotwang
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buy"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="49dp"
android:text="Add task"
android:layout_centerHorizontal="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="27dp" />
<Button
android:id="#+id/btnOld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unfinished"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
tools:layout_editor_absoluteY="27dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent" />
<CalendarView
android:id="#+id/calendarView"
android:layout_width="wrap_content"
android:layout_below="#+id/btnOld"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
tools:layout_editor_absoluteY="107dp"
tools:layout_editor_absoluteX="18dp" />
<ImageView
android:id="#+id/imageAdd"
android:layout_width="314dp"
android:layout_height="358dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.421"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.497"
app:srcCompat="#android:color/background_light" />
<ImageButton
android:id="#+id/imgBtnClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:srcCompat="#android:drawable/btn_dialog"
tools:layout_editor_absoluteX="312dp"
tools:layout_editor_absoluteY="106dp" />
</RelativeLayout>
output

Categories

Resources