CODEWITHSUNDEEP
javaandroidkotlinandroid-recyclerviewlayout
Bam Bou
Bam Bou

Reputation: 135

Add an element outside a ConstraintLayout for my adapter

I'm trying to display cool dot when I want to notify new items. When i set negative margin or translation, the dot is cut, theses littles ilustration will make things a lot clearer:

What i want :

enter image description here

What I get :

Here's my 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="240dp"
    android:layout_margin="10dp"
    android:layout_marginBottom="20dp"
    android:layout_gravity="center_horizontal"

    android:elevation="1dp"
    android:background="@drawable/bg_element_list"
    android:foreground="@drawable/effect_ripple"
    android:clickable="true"
    android:focusable="true">

    <ImageView
        android:id="@+id/file_img"
        android:layout_width="fill_parent"
        android:layout_height="210dp"
        android:paddingTop="10dp"
        android:paddingBottom="5dp"
        android:src="@drawable/ic_pdf"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/file_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:paddingStart="20sp"
        android:paddingEnd="20sp"
        android:scrollHorizontally="true"
        android:singleLine="true"
        android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
        android:textAlignment="center"
        android:textColor="@color/dark_grey"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/file_img" />

    <ImageView
        android:id="@+id/file_new"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_newfile"
        android:translationY="-22dp"
        android:translationX="22dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Someone have an idea?

Thanks

Upvotes: 1

Views: 268

Answers (3)

Sandesh Khutal
Sandesh Khutal

Reputation: 1809

Try this with your parameter's

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@+id/profileCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="false">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="210dp"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
                android:textColor="#727272"
                android:textSize="20sp" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/userImageProfile"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignEnd="@+id/profileCard"
        android:layout_marginEnd="-15dp"
        android:elevation="8dp"
        android:src="@mipmap/ic_launcher"
        app:tint="@color/black" />


</RelativeLayout>

Upvotes: 1

cactustictacs
cactustictacs

Reputation: 19524

If you use padding on the layout instead of layout_margin, and set clipToPadding as false, things will be able to draw within the padding area. Margin is really for required space outside of the View, padding is space inside it (where it draws its contents)

Upvotes: 1

Cheticamp
Cheticamp

Reputation: 62831

On the ConstraintLayout, set

android:clipChildren="false"

This will allow the ImageView to draw outside the ConstraintLayout. See the documentation.

Upvotes: 1

Related Questions