CODEWITHSUNDEEP
androidkotlinimageview
Lina
Lina

Reputation: 563

CircularImageView show only a half ImageView

In my Android app with kotlin, I want to display a user image in the middle AppBar. The following code is For circular Image : 

<com.mikhaellopez.circularimageview.CircularImageView
        android:id="@+id/userImage"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="133dp"
        android:layout_marginTop="135dp"
        android:layout_marginEnd="134dp"
        android:layout_marginBottom="14dp"
        android:src="@drawable/userprofil"
        app:civ_border="true"
        app:civ_border_width="2dp"
        app:civ_shadow="true"
        app:civ_shadow_radius="0"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|center"
        app:layout_constraintBottom_toTopOf="@+id/textViewUserName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/app_bar_layout" />

I want a result like this :enter image description here

But, I get the following result :enter image description here What should I change to get the result

Upvotes: 0

Views: 109

Answers (2)

Raj Suvariya
Raj Suvariya

Reputation: 1664

The app bar by default has an elevation of 8 dp. So if you are adding any views overlapping with them without adding elevation then they will stay hidden behind the app bar. You need to add elevation more then 8dp on your imageview like below

<com.mikhaellopez.circularimageview.CircularImageView
        android:id="@+id/userImage"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="133dp"
        android:layout_marginTop="135dp"
        android:layout_marginEnd="134dp"
        android:layout_marginBottom="14dp"
        android:src="@drawable/userprofil"
        android:elevation="10dp" // Add this line
        app:civ_border="true"
        app:civ_border_width="2dp"
        app:civ_shadow="true"
        app:civ_shadow_radius="0"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|center"
        app:layout_constraintBottom_toTopOf="@+id/textViewUserName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/app_bar_layout" />

Upvotes: 1

Pawan kumar sharma
Pawan kumar sharma

Reputation: 704

Just put "translationZ" property in your imageview. so image view comes in front

Upvotes: 0

Related Questions