Develop Reference

Android ConstraintLayout: set one element in the center of another one

I'm using ConstraintLayout in order to create activity view
There is a code snippet:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical"
tools:context=".presentation.screens.registration.RegistrationActivity">
<LinearLayout>...</LinearLayout>
<Button
android:id="#+id/login_next_btn"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/button_green_disabled"
android:layout_width="match_parent"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="24dp"
android:text="#string/next"
android:textColor="#color/font_white"
android:textSize="16sp"
android:layout_height="48dp"
android:enabled="false"
android:onClick="onNextClick"/>
<ImageView
android:id="#+id/loader_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/login_next_btn"
android:src="#drawable/ic_loader"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The question is: How can I set ImageView (android:id="#+id/loader_image") in the center of Button (#+id/login_next_btn)?

Try this:
<ImageView
android:id="#+id/loader_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#id/login_next_btn"
app:layout_constraintRight_toRightOf="#id/login_next_btn"
app:layout_constraintBottom_toBottomOf="#id/login_next_btn"
app:layout_constraintTop_toTopOf="#id/login_next_btn"
android:src="#drawable/ic_loader"/>

If you have to set it in the center just change the constraints of the image with :
app:layout_constraintBottom_toBottomOf="#id/login_next_btn"
app:layout_constraintTop_toTopOf="#id/login_next_btn"
app:layout_constraintStart_toStartOf="#id/login_next_btn"
app:layout_constraintEnd_toEndOf="#id/login_next_btn"

Button not visible in AVD

Making an app. Last 2 button are visible in preview mode , but not in AVD(Google pixel 3a). Actually I'm new to Android. I just directly pasted the code if need more information let me know. Thank you
Snippet of code
<?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">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/courses_offered"
android:layout_marginTop="470dp"
android:layout_marginBottom="140dp"
android:layout_marginRight="30dp"
android:layout_marginLeft="230dp"
android:textColor="#color/white"
android:backgroundTint="#color/orange"
/>
<Button
android:id="#+id/Fee_structure"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/fee_structure"
android:layout_marginTop="470dp"
android:layout_marginBottom="140dp"
android:layout_marginRight="230dp"
android:layout_marginLeft="30dp"
android:textColor="#color/white"
android:backgroundTint="#color/orange"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

You're using ConstraintLayout but your buttons doesn't have any constraint to initialize where they should be
For example:
adding app:layout_constraintBottom_toBottomOf="parent" will position the bottom of the button to the bottom of parent, in this case, your layout
See this for further details and examples: https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout?authuser=1

You have to use constraints in the Constraint layout just like
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
enter link description here
Try this code it will show you in AVD.
<?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"
>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/teal_200"
android:text="asd"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.8" />
<Button
android:id="#+id/Fee_structure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/teal_200"
android:text="asd"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintVertical_bias="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>

You have given height and width to match parent so your first button is taking all the space available in screen so you have to make them wrap content (height) and then constraint them accordingly

Android Activity_Main Float Button

This is Acitivity_main.xml of a PDF Reader on Android.
I am confused on how to add two floating Action Buttons(Page Up/Down Button) in the bottom right corner. The buttons need to display above PDF, and uses linear vertical layout.
Following XML separates PDF and Buttons into two parts which is wrong, any idea how to correct it?
<?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">
<LinearLayout
android:id="#+id/pdfstructure"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/DownButton"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_gravity="end|bottom"
android:layout_marginTop="600dp"
android:layout_marginRight="30dp"
android:clickable="true"
android:contentDescription="#string/upButton"
android:stateListAnimator="#null"
android:text="Down"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/upButton"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_gravity="end|bottom"
android:layout_marginTop="800dp"
android:layout_marginRight="30dp"
android:clickable="true"
android:text="Up"
android:stateListAnimator="#null"
android:contentDescription="#string/upButton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Add this line in your linearLayout
android:gravity="bottom"
and delete those lines in your FloatingActionButton
android:layout_marginTop="600dp"
android:layout_marginTop="800dp"

Android Studio - ImageView no preview in .xml file

I have an ImageView in my activity that is visible when I run the app.
But it is not visible in the preview in the Design view of the activity_main.xml.
How do I make it show?
<?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/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Hello World!"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_upward_24"
tools:ignore="ContentDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>
It does not matter wether it is a .png that I put in drawables or a symbol I take from Android Studio.

If you are using AppCompatActivity app:srcCompat="#drawable/ic_baseline_arrow_upward_24"
if you are using Activity android:src="#drawable/ic_baseline_arrow_upward_24"

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