CODEWITHSUNDEEP
androidandroid-imageviewandroid-constraintlayout
Hachemi Hamadi
Hachemi Hamadi

Reputation: 103

Android - Center an ImageView on edge of layout

I am using ConstraintLayout and I want to center an ImageView on the edge of the layout like this image: imageview centered

How can I achieve this by using ConstraintLayout without using elevation (I don't know how to deal with elevation in pre-Lollipop devices).

Here is my code so far:

 <?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:behavior_hideable="false"
    app:behavior_peekHeight="190dp"
    android:clickable="true"
    android:focusable="true"
    android:background="#eee"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    android:id="@+id/main_ride_finished_container"
    >


    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/main_driver_enroute_BS_driverImage"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@color/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:elevation="3dp"
        />
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="35dp"
        android:background="#FFFFFF"
        >


    </android.support.constraint.ConstraintLayout>


</android.support.constraint.ConstraintLayout>

Upvotes: 2

Views: 564

Answers (1)

Cheticamp
Cheticamp

Reputation: 62831

You can do place a view centered on the edge of a layout by using the appropriate constraints. In the following simple example the ImageView is constrained to the start and end of the enclosing container to center it horizontally. The image view's top and bottom are constrained to the bottom of the inner layout to center on the bottom. This is how ConstraintLayout deals with "impossible" constraints. See the doc.

enter image description here

<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:id="@+id/innerLayout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorPrimary" />

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="@id/innerLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/innerLayout" />

</android.support.constraint.ConstraintLayout>

Upvotes: 7

Related Questions