Develop Reference

Android - center of element (image) on top of another element

I want to create view where one element's vertical center (ImageView - black circle) is exactly on top/start of another element (LinearLayout - red box). In other words - half of black circle should be above red layout and half of it should be inside. What is the easiest way to do that? Is it possible to achieve in xml?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/red"
android:layout_alignParentBottom="true"
android:layout_above="#+id/red_block">
SOME OTHER VIEWS INSIDE
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/some_circle"
android: CENTER_ON_TOP_OF_RED_BLOCK??? />
</RelativeLayout>

It's time to use ConstraintLayout.
You can let the vertical center of black circle align the top of red block by this two attribute
app:layout_constraintTop_toTopOf="#id/red_block"
app:layout_constraintBottom_toTopOf="#id/red_block"
xml:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/red_block"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/red"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!--SOME OTHER VIEWS INSIDE-->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/some_circle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/red_block"
app:layout_constraintBottom_toTopOf="#id/red_block" />
</androidx.constraintlayout.widget.ConstraintLayout>
preview:

How to anchor a Button on a View in the center

I'm trying to accomplish the following:
enter image description here
The gray part is the background of the activity and the white part is a horizontal LinearLayout. I want to create the spinner overlapping the top border of the LinearLayout but everything I can do is put it inside the layout or on top of it. Is there a way to accomplish this? or a workaround?

We can use ConstraintLayout for this. We need to use combinations of two properties
layout_constraintTop_toBottomOf
layout_constraintBottom_toBottomOf
This will center the Button or any other View
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">
<View
android:id="#+id/topView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_orange_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:orientation="horizontal" />
<View
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toBottomOf="#id/topView"
android:background="#android:color/holo_green_light"
android:orientation="horizontal" />
<com.google.android.material.button.MaterialButton
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/topView" // this
app:layout_constraintBottom_toBottomOf="#id/topView" // and this is important, it aligns the view to the top view
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Result:

How can I make an element appear on top of a layout

I know this question has been asked many times. However all the answers I have tried to find have failed me. I want the textview to appear on top of the constraint layout but every time I try to run the application I just see the web view vidged which is connected to the constraint layout.
The last solution I tried was to reduce elevation of the layout to 1dp and increase elevation of the TextView to 2dp.
<?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:background="#drawable/green_border_background" android:elevation="1dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:elevation="2dp"
android:id="#+id/textView2"
tools:text="0"
android:textSize="30sp"
/>
At the moment I do not care if the textview is centered, vertically below or vertically above the layout. I just want it to be visible. It is under the layout (Z vise) and thereby invisible. Elevation is the problem I am facing.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
>
<TextView
android:textSize="25sp"
android:layout_marginStart="50dp"
android:text="Title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
This code place the TextView on the top of the ConstraintLayout

Just check the ConstraintLayout.
Read the "Adjust the constraint bias" part, try to set the
app:layout_constraintVertical_bias="0"

Image have margin from top in constraintlayout

I have a scrolled content, so I put a constraint layout inside a scrollview, I have a problem when put an image inside a constraint layout, but the image show a space from top such as in screenshot below, how can I remove that space?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- have whatever children you want inside -->
<ImageView
app:srcCompat="#drawable/main_header"
android:id="#+id/img_icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffccbb"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="1"
android:contentDescription="TODO" app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintVertical_bias="0.0"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>

In your Imageview you have added app:layout_constraintDimensionRatio="1:1" that means it will take space 1:1, so width and height also will be 1:1. But your image app:srcCompat="#drawable/main_header" is not 1:1. So you have to add an image which has width and height of the same size. Otherwise, you can add android:scaleType="fitXY" or android:scaleType="centerCrop" according to your expectation.

Try this, remove app:layout_constraintTop_toTopOf="parent" in your ImageView it works!

I just checked your code on my phone and it looks good.
One thing that I made different from you is that I have used a different image resource for the imageView.
So I think that you don't actually have a problem, I think that it's just the image and how it looks, try to change your image resource and see if this problem remains.
He is how my layout file looks like:
<ScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/main_header"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Centering one image on the corner of another image

How can I take a center of an image and put in on a corner of another image?

you can use ConstraintLayout to get this behavior, for 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/imageViewCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/drawable1" />
<ImageView
android:id="#+id/imageViewToPosition"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/imageViewCenter"
app:layout_constraintStart_toEndOf="#id/imageViewCenter"
app:layout_constraintEnd_toEndOf="#id/imageViewCenter"
app:layout_constraintTop_toTopOf="#id/imageViewCenter"
app:srcCompat="#drawable/drawable2" />
</android.support.constraint.ConstraintLayout>
if you have issues with constraint layouts, consider trying the codelab