Im trying to make my icon button on the right side of the app; kind of like justify-content: space-between; but it doesn't work properly. It shows correctly on the XML design, but when executing just goes on top of my text.
Any idea why? Im new to Android Studio.
<?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="wrap_content"
android:layout_gravity="top|left">
<TextView
android:id="#+id/task_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:text="Hello"
android:textColor="#color/black"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/task_delete"
android:layout_width="57dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginEnd="24dp"
android:background="?android:attr/selectableItemBackground"
android:backgroundTint="#color/background"
android:onClick="deleteTask"
app:icon="#drawable/ic_baseline_radio_button_unchecked_24"
app:iconTint="#color/black"
app:layout_constraintBottom_toBottomOf="#+id/task_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/task_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you!
Related
Here the image from my mobile:
<?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"
android:visibility="visible"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Miles"
android:textSize="24sp"
android:visibility="visible"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="56dp"
tools:visibility="visible" />
<TextView
android:id="#+id/textView2"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Km"
android:textSize="24sp"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="140dp" />
<Button
android:id="#+id/buttonConvMilesToKm"
android:layout_width="287dp"
android:layout_height="54dp"
android:text="Convert Miles To Km"
android:textSize="18sp"
tools:layout_editor_absoluteX="62dp"
tools:layout_editor_absoluteY="209dp" />
<Button
android:id="#+id/buttonConvKmToMiles"
android:layout_width="280dp"
android:layout_height="60dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="65dp"
tools:layout_editor_absoluteY="284dp" />
<EditText
android:id="#+id/editTextMiles"
android:layout_width="200dp"
android:layout_height="50dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="46dp" />
<EditText
android:id="#+id/editTextKm"
android:layout_width="200dp"
android:layout_height="50dp"
android:ems="10"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="130dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
This maybe a small error i did , but what am i missing so the interface appears to be overlapped . Im using Android Studio to develop this But the reference design looks alright unless i run it on emulator or my mobile itself . Im guessing im not wrong in coding the layouts n i even tried to change the way the layouts can be written
Your layout has no constraints. Please review the documentation on the valid ConstraintLayout XML attributes you can use to layout views relative to each other within a ConstraintLayout. You are looking for attributes like layout_constraintStart_toEndOf.
I'm working on an Android app. I create an item layout for a recycler view and I'd like to display a preview of it in Android Studio using layout preview with tools namespace. To accomplish this task I:
Put in sampledata an image (sampledata\nre1.png). This is an important thing because I don't want to include the sample image in the apk.
Use tools namespace in the ImageView to display the image in the layout preview
An screenshot:
And the layout XML:
<?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="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
tools:context=".ui.adapters.BarcodeAdapter">
<ImageView
android:id="#+id/item_barcode_nre1_image"
android:layout_width="wrap_content"
tools:layout_width="120dp"
android:layout_height="112dp"
android:scaleType="fitXY"
android:layout_marginStart="#dimen/text_margin"
android:contentDescription="NRE1"
android:layout_marginTop="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre_label"
tools:src="#sample/nre1.png" />
<ImageView
android:id="#+id/item_barcode_nre2_image"
android:layout_width="wrap_content"
android:layout_height="112dp"
android:scaleType="fitXY"
android:layout_marginEnd="#dimen/text_margin"
android:contentDescription="NRE2"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/item_barcode_nre1_image"
tools:src="#sample/nre2.png" />
<ImageView
android:id="#+id/item_barcode_codice_fiscale_image"
android:layout_width="wrap_content"
android:layout_height="112dp"
android:scaleType="fitXY"
android:contentDescription="Codice fiscale"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_codice_fiscale_label"
tools:src="#sample/codice-fiscale.png" />
<TextView
android:id="#+id/item_barcode_nre_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/text_margin"
android:text="#string/item_qrcode_nre"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_barcode_nre1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:ellipsize="end"
android:maxLines="10"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_nre1_image"
app:layout_constraintStart_toEndOf="#+id/item_barcode_nre_label"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre1_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre1_image"
tools:text="1300A" />
<TextView
android:id="#+id/item_barcode_nre2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="10"
android:layout_marginTop="4dp"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_nre2_image"
app:layout_constraintHorizontal_bias="0.482"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre2_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre2_image"
tools:text="4003535379" />
<TextView
android:id="#+id/item_barcode_codice_fiscale_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/text_margin"
android:text="#string/item_qrcode_codice_fiscale"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre_label"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre1" />
<TextView
android:id="#+id/item_barcode_codice_fiscale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="4dp"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_codice_fiscale_image"
app:layout_constraintStart_toStartOf="#+id/item_barcode_codice_fiscale_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_codice_fiscale_image"
tools:text="CF" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think I do it correctly, but it does not work. Any idea? Tnx.
<ImageView
android:id="#+id/item_barcode_nre1_image"
android:layout_width="wrap_content"
tools:layout_width="120dp"
android:layout_height="112dp"
android:scaleType="fitXY"
android:contentDescription="NRE1"
android:layout_marginTop="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre_label"
tools:src="#drawable/ic_launcher_background" />
Working on my side. Let's try. Thanks
so my android studio preview looks like this:
ScreenShot from android studio
but when i export the app and run it on the phone, it looks like this:
Screenshot from the actual phone
Here is my activity_main.xml file text:
<?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=".MainActivity">
<ImageView
android:id="#+id/backgr"
android:layout_width="789dp"
android:layout_height="778dp"
app:srcCompat="#color/colorAccent"
tools:layout_editor_absoluteX="2dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/txt_welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="360dp"
android:text="Welcome to Auth-Guard!"
android:textColor="#color/colorPrimary"
android:textSize="31sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:text="Connect"
android:textColor="#color/colorAccent"
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="304dp"
tools:textColor="aaa" />
<Switch
android:id="#+id/swt_theme"
android:layout_width="126dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:text="Dark Theme"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="539dp" />
</android.support.constraint.ConstraintLayout>
Set the constraints of the button and other views.
As Raj said you should set the constraints of the views correctly. I think you need learn ConstrainLayout.
Here is some help: https://developer.android.com/training/constraint-layout/
and this tutorial: https://www.journaldev.com/13590/android-constraintlayout
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
I want to do this layout with ConstraintLayout.
But I failed even to do the 1(green) part of it.
What I do is I add 3 TextViews 1,2 and 3 (pink) connect them to the left of parent and tell them to be one under the other. It works.
Then I need to add views 4 and 5 so they always be on the right of 2 and 3 and its content must be aligned vertically to the left edge just as shown on the picture.
The problem that when I add
app:layout_constraintLeft_toRightOf="2 OR 3"
the text in 4 and 5 is not aligned properly. I get this
When I use Guideline I get this
app:layout_constraintLeft_toRightOf="#id/guideline"
Does anyone know what can help with this?
Edit. P.S. layout of 1st attempt
<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:padding="16dp"
android:id="#+id/constraintLayout"
>
<TextView
android:id="#+id/instrument_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="AUDUSD"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:id="#+id/trade_action_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="BUYjhkjhkjhvg"
app:layout_constraintStart_toStartOf="#+id/instrument_name"
app:layout_constraintTop_toBottomOf="#id/instrument_name"
tools:layout_editor_absoluteX="16dp"
android:layout_marginTop="1dp"/>
<TextView
android:id="#+id/net_pl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Net p/l"
app:layout_constraintStart_toStartOf="#+id/trade_action_label"
app:layout_constraintTop_toBottomOf="#id/trade_action_label"/>
<TextView
android:id="#+id/record_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
app:layout_constraintTop_toTopOf="#id/trade_action_label"
app:layout_constraintLeft_toRightOf="#id/trade_action_label"
tools:layout_editor_absoluteY="33dp"
/>
<TextView
android:id="#+id/pl_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12"
app:layout_constraintTop_toTopOf="#id/net_pl"
app:layout_constraintLeft_toRightOf="#id/net_pl"/>
</android.support.constraint.ConstraintLayout>
Edit. (screenshot of how the result should look like)
You can use a Barrier to replicate the behavior of the TableLayout.
<?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">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/warehouse"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="#string/hospital"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<android.support.constraint.Barrier
android:id="#+id/barrier7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView2,textView1" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/lorem_ipsum"
app:layout_constraintStart_toEndOf="#+id/barrier7"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
More info here: https://constraintlayout.com/basics/barriers.html
I took a closer look at what you are trying to do. I think that you need to look into using weighted chains in your ConstraintLayout. See the documentation here.
Make sure you use a version of ConstraintLayout that implements chains.
Update
Here is an example of what you are trying to do. I have simplified your layout to better show what will work. Notice the cross linking of box1<->box2 and box3<->box4. These links establish the chains.
<?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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/box1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="16dp"
android:text="Text box 1 xxxxxxx"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/box2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#id/box2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 2 yyyyyyyyyy"
app:layout_constraintLeft_toRightOf="#id/box1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/box1" />
<TextView
android:id="#+id/box3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 3 zzzz"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/box4"
app:layout_constraintTop_toBottomOf="#id/box1" />
<TextView
android:id="#id/box4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 4"
app:layout_constraintLeft_toRightOf="#id/box3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/box3" />
</android.support.constraint.ConstraintLayout>
Here is an image of the layout.
Use app:layout_constraintHorizontal_weight to effect how much space each view gets.