ShapeableImageView has black background out of rounded - android

I have ShapeableImageView, and I set corner size. Applying rounded is successful but, In out of rounded It shows black background.
Can you tell me What's the problem?
I searched about it, someone say it's just preview. But It's showing when I run app too.
Like this. I wanna remove the black one.
My layout Xml.
<?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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<ImageButton
android:id="#+id/btnPinAddNewEventFolder"
android:layout_width="168dp"
android:layout_height="168dp"
android:background="#drawable/radius_add_pin_folder"
android:elevation="2dp"
android:scaleType="centerCrop"
android:src="#drawable/btn_add_pin_folder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clPinEventDefaultFolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/pinEventDefaultFolderThumbnail"
android:layout_width="168dp"
android:layout_height="168dp"
android:src="#color/gray6"
android:scaleType="centerCrop"
app:shapeAppearanceOverlay="#style/RoundPinFolder"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<ImageView
android:id="#+id/ImgEventDefaultFolderNull"
android:layout_width="69dp"
android:layout_height="65dp"
android:background="#drawable/ic_folder"
android:backgroundTint="#color/gray5"
app:layout_constraintBottom_toBottomOf="#+id/pinEventDefaultFolderThumbnail"
app:layout_constraintEnd_toEndOf="#+id/pinEventDefaultFolderThumbnail"
app:layout_constraintStart_toStartOf="#+id/pinEventDefaultFolderThumbnail"
app:layout_constraintTop_toTopOf="#+id/pinEventDefaultFolderThumbnail" />
<TextView
android:id="#+id/txtDefaultEventPinFolder"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/nanumsquare_b"
android:text="이벤트 기본 폴더"
android:textAlignment="textStart"
android:textColor="#color/black"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/tvDefaultFolderPinNum"
app:layout_constraintStart_toStartOf="#+id/pinEventDefaultFolderThumbnail"
app:layout_constraintTop_toBottomOf="#+id/pinEventDefaultFolderThumbnail"
/>
<TextView
android:id="#+id/tvDefaultEventFolderPinNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/nanumsquare_b"
android:text="num"
android:textAlignment="textEnd"
android:textColor="#color/gray3"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#+id/pinEventDefaultFolderThumbnail"
app:layout_constraintTop_toBottomOf="#+id/pinEventDefaultFolderThumbnail" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="24dp"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:orientation="vertical"
>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvEventPinFolder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
style code
<style name="RoundPinFolder">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">10%</item>
</style>


Use padding inside ShapeableImageView like
android:padding="0.5dp"
Example
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/imgBanner"
android:layout_width="0dp"
app:shapeAppearanceOverlay="#style/roundedImageViewRounded"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:padding="0.5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


In your manifest file, in the application tag. set
android:hardwareAccelerated="true"
By default it is false

Related

why preview showing different ui and real screen different in constrainlayout

I am developing new android app but when I am trying to implement constrainlayout in preview window it is showing different but in real device showing different
below my layout
<?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"
android:background="#451C80"
tools:context=".SetPasswordFragment">
<TextView
android:id="#+id/getStarted"
style="#style/password"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="150dp"
android:gravity="center"
android:text="#string/password"
android:textAppearance="#style/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_marginStart="8dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="11dp"
android:src="#drawable/ic_back"
app:layout_constraintEnd_toStartOf="#+id/getStarted"
app:layout_constraintHorizontal_bias="0.366"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="#style/username"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="81dp"
android:layout_marginEnd="223dp"
android:layout_marginBottom="45dp"
android:text="#string/create_user"
app:layout_constraintBottom_toTopOf="#+id/textInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="544dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/username_edittext"
android:hint="#string/username" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
below preview ui in android studio
and below ui in real device
I want to exactly where I am making something wrong what I have to do in order adjust constraints correctly so that I can show exact the same preview window ui in real device

The problem is that you have a Bottom margin = 544dp in the textInputLayout,
you should'n use a very larg margins in layouts
you can try
<?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"
android:background="#451C80"
tools:context=".SetPasswordFragment">
<TextView
android:id="#+id/getStarted"
style="#style/password"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="150dp"
android:gravity="center"
android:text="#string/password"
android:textAppearance="#style/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_marginStart="8dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="11dp"
android:src="#drawable/ic_back"
app:layout_constraintEnd_toStartOf="#+id/getStarted"
app:layout_constraintHorizontal_bias="0.366"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="#style/username"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="81dp"
android:layout_marginEnd="223dp"
android:layout_marginBottom="45dp"
android:text="#string/create_user"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/username_edittext"
android:hint="#string/username" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to configure XML file so RecyclerView doesn't overlap the rest of the content?

What my layout file currently does:
My layout file after building an app looks like on the picture and before building
What I want it to do:
I want this info icon and "Basic calisthenics progression" to be on top on all devices without overlapping.
What I've tried:
I've tried to add CardView, moving from constraint layout to frame layout, etc, but nothing seems to work and recyclerView still overlaps the header.
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="#+id/homeFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1D1D1B"
tools:context="com.cuyer.calitracker.View.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView14"
style="#style/fill_box_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:shadowDx="-4"
android:shadowDy="-4"
android:shadowRadius="2"
android:text="BASIC CALISTHENICS PROGRESSION"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="640dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/infoImageView"
android:layout_width="41dp"
android:layout_height="43dp"
android:src="#drawable/ic_outline_info_24"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toStartOf="#+id/textView14"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

Modifying your layout like this might fix the problem
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="#+id/homeFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1D1D1B"
tools:context="com.cuyer.calitracker.View.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="20dp"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/infoImageView"
android:layout_width="41dp"
android:layout_height="43dp"
android:layout_marginEnd="20dp"
android:src="#drawable/ic_outline_info_24"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toStartOf="#+id/textView14"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
style="#style/fill_box_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_weight="1"
android:shadowDx="-4"
android:shadowDy="-4"
android:shadowRadius="2"
android:text="BASIC CALISTHENICS PROGRESSION"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

How to make vertical line fit with cardview?

i want to ask help for how to add vertical line in left side of cardview?
Current result
Expected result
This is the code
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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:id="#+id/cvRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:cardBackgroundColor="#color/lightPink"
app:cardCornerRadius="#dimen/spacing_x">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/viewLine"
android:layout_width="#dimen/spacing"
android:layout_height="0dp"
android:background="#color/coral"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivLogo"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="#dimen/spacing_h"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/viewLine"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_error_rounded" />
<androidx.constraintlayout.widget.Group
android:id="#+id/groupDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="tvTitle,tvSubTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvTitle"
style="#style/TextParagraph2.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing"
android:layout_marginTop="#dimen/spacing_h"
android:layout_marginEnd="#dimen/spacing_x"
android:textColor="#color/darkGreyBlue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toTopOf="parent"
tools:text="Sorry, it’s not you, It’s us." />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvSubTitle"
style="#style/TextParagraph3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing"
android:layout_marginTop="#dimen/spacing_small_x"
android:layout_marginEnd="#dimen/spacing_x"
android:layout_marginBottom="#dimen/spacing_h"
android:textColor="#color/darkGreyBlue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toBottomOf="#id/tvTitle"
tools:text="Internal server problem. Please try again later" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Is my code correct, if not please tell me ?
I already try many ways but still not find the match solution, If you know how fix this issue, please comment bellow, thanks
sorry for my bad english

I took your code and ran it. You are using AppCompat libraries, I'm not sure if that was the problem but I'm using androidx and it seems to work well. I just added some dummy properties for color and dimensions.
This is my result:
<?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:id="#+id/frameLayout9"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.maincontent.DummyFragment">
<androidx.cardview.widget.CardView
android:id="#+id/cvRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:cardBackgroundColor="#color/colorPrimary"
app:cardCornerRadius="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/viewLine"
android:layout_width="20dp"
android:layout_height="0dp"
android:background="#color/gradientEndNoDarkMode"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivLogo"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/viewLine"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_error_rounded" />
<androidx.constraintlayout.widget.Group
android:id="#+id/groupDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="tvTitle,tvSubTitle" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toTopOf="parent"
tools:text="Sorry, it’s not you, It’s us." />
<TextView
android:id="#+id/tvSubTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toBottomOf="#id/tvTitle"
tools:text="Internal server problem. Please try again later" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Hope it helps!

Android Material CardView with ConstraintLayout clip child not working

I want to overlap (take half the image outside) of the card view. The ShapeableImageView is a child of the card view.
I have tried adding clipChilder="false" on card view as well as on the child constraint layout but no luck. I also tried the same in runtime again no luck.
Layout
<?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"
tools:context=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.codepaints.velvet.views.HeaderView
android:id="#+id/v_profile_header"
android:layout_width="match_parent"
android:layout_height="235dp"
android:src="#drawable/img_profile_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlay_color="#color/colorNavHeaderOverlay" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/app_space"
android:layout_marginEnd="#dimen/app_space"
android:clickable="false"
android:focusable="false"
android:translationY="-24dp"
app:cardCornerRadius="#dimen/app_space_h"
app:cardElevation="#dimen/app_shadow_two"
app:layout_constraintTop_toBottomOf="#+id/v_profile_header"
app:layout_constraintBottom_toBottomOf="#id/v_profile_header"
app:layout_constraintEnd_toEndOf="#+id/v_profile_header"
app:layout_constraintStart_toStartOf="#id/v_profile_header"
app:rippleColor="#android:color/transparent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/v_profile_avatar"
android:layout_width="#dimen/profile_avatar_size"
android:layout_height="#dimen/profile_avatar_size"
android:background="#drawable/shape_circle_border"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<View
android:id="#+id/v_profile_online_status_holder"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar"
app:layout_constraintTop_toBottomOf="#+id/v_profile_avatar" />
<View
android:id="#+id/v_profile_online_status"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
android:layout_marginBottom="#dimen/app_space_h"
android:background="#drawable/shape_circle"
android:backgroundTint="#color/colorOnline"
app:layout_constraintBottom_toBottomOf="#id/v_profile_online_status_holder"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_username"
style="#style/TextAppearance.MaterialComponents.Headline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_qualification"
style="#style/TextAppearance.MaterialComponents.Body2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_university"
android:drawablePadding="#dimen/app_space_q"
android:text="#string/profile_qualification"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_username" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Screenshot
Another Test
I have tried out without MaterialCardView but the result is the same.
I have no idea why it is not working.
<?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=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipChildren="false"
app:elevation="1dp"
android:clipToPadding="false">
<ImageView
app:elevation="16dp"
android:id="#+id/v_image"
android:layout_width="128dp"
android:layout_height="128dp"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<TextView
android:id="#+id/v_user"
style="#style/TextAppearance.MaterialComponents.Headline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v_image"
android:background="#color/colorNutritionKcal"
android:translationY="60dp"
android:elevation="100dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshot
Test 3
It won't work with LinearLayout too :(
<LinearLayout
android:orientation="vertical"
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipChildren="false"
android:elevation="1dp"
android:clipToPadding="false">
<ImageView
android:elevation="#dimen/app_space"
android:id="#+id/v_image"
android:layout_width="128dp"
android:layout_height="128dp"
android:translationY="-60dp"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<TextView
android:id="#+id/v_user"
style="#style/TextAppearance.MaterialComponents.Headline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v_image"
android:background="#color/colorNutritionKcal"
android:translationY="60dp"
android:elevation="100dp"/>
</LinearLayout>

In my case you can add this to MaterialCardView xml file
android:outlineProvider="none"

Alright, so after trying so many different ways, finally found the solution.
In my case, I have an image wrapped by a card view, and the card view is inside a constraint layout. So here I have to set android:clipChildren="false" for both views, ConstraintLayout the parent and the CardView a child. See the final code below.
<?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"
tools:context=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<com.codepaints.velvet.views.HeaderView
android:id="#+id/v_profile_header"
android:layout_width="match_parent"
android:layout_height="235dp"
android:src="#drawable/img_profile_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlay_color="#color/colorNavHeaderOverlay" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/app_space"
android:layout_marginEnd="#dimen/app_space"
android:clickable="false"
android:focusable="false"
android:translationY="-24dp"
android:clipChildren="false"
app:cardCornerRadius="#dimen/app_space_h"
app:cardElevation="#dimen/app_shadow_two"
app:layout_constraintTop_toBottomOf="#+id/v_profile_header"
app:layout_constraintBottom_toBottomOf="#id/v_profile_header"
app:layout_constraintEnd_toEndOf="#+id/v_profile_header"
app:layout_constraintStart_toStartOf="#id/v_profile_header"
app:rippleColor="#android:color/transparent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/v_profile_avatar"
android:layout_width="#dimen/profile_avatar_size"
android:layout_height="#dimen/profile_avatar_size"
android:background="#drawable/shape_circle_border"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<View
android:id="#+id/v_profile_online_status_holder"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar"
app:layout_constraintTop_toBottomOf="#+id/v_profile_avatar" />
<View
android:id="#+id/v_profile_online_status"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
android:layout_marginBottom="#dimen/app_space_h"
android:background="#drawable/shape_circle"
android:backgroundTint="#color/colorOnline"
app:layout_constraintBottom_toBottomOf="#id/v_profile_online_status_holder"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_username"
style="#style/TextAppearance.MaterialComponents.Headline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_qualification"
style="#style/TextAppearance.MaterialComponents.Body2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_university"
android:drawablePadding="#dimen/app_space_q"
android:text="#string/profile_qualification"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_username" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

ConstraintLayout how to pack keeping the same ratios of distance

I have a layout that exceeds the view boundaries after applying all the margins I'm looking for. I read that applying a chain will make it keep the same ratios while packing all the elements inside the view boundaries.
<?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">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tut_first_img"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
This is what's happening without margins after all margins applied it will exceed the view screen. How can I compact it while keeping the ratios? Also, how can I center all views in a vertical line?

Here is the code as per your use case, pls. check:
<?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"
android:background="#00ff00">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#+id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintBottom_toTopOf="#+id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/common_full_open_on_phone"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
I hope it helps you, looking forward if any further help is required from my end.
Screenshot:

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"
tools:context=".MainActivity">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="dsadsadsadsadasd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="gggggg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Just copy paste it and let me know if it works.

I hope that the below mentioned code helps you in achieving your desired layout.
<?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:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/img" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/sym_def_app_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/botao" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Screenshot (of the UI achieved by the above code):
The chain symbol (right most symbol; below the first view in the layout) can be used to toggle and thus apply different chain styles (as per your need), if you aren't familiar with ConstraintLayout.

Categories

Resources