How to divide screen two equal part vertically in ConstraintLayout in android - android

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_12"
android:src="#drawable/ic_top_log"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_4"
android:src="#drawable/ic_top_log_p"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
app:layout_constraintStart_toEndOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="#+id/imageView4" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4">
// this part we have to divide in two part
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This my code i want to divide in two part equal part i have tired but it not showing in two part please help me how to divide ConstraintLayout in to two equal part vertically .


<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4">
<LinearLayout
android:id="#+id/linear1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/linear2"
app:layout_constraintTop_toTopOf="parent">
<!--Do Your Stuff -->
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/linear1">
<!--Do Your Stuff-->
</LinearLayout>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="#id/linear1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/linear2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Preview
You can replace any view instead of LinearLayout too.

Related

Images are not aligning properly in the horizontal RecyclerView in Android Studio

and
As you can see, the images don't seem to be aligning with each other very well. It seems to happen when the text for "Hobby" grows longer than the ones next to it. I still can't seem to fix this though. Here's the xml for the horizontal view:
<FrameLayout
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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
/>
</FrameLayout>
and here's the xml for my adapter:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
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"
android:layout_margin="4dp"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/dog_img"
android:layout_width="match_parent"
android:layout_height="194dp"
android:scaleType="centerCrop"
android:importantForAccessibility="no"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAppearance="#style/TextAppearance.MaterialComponents.Headline6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/dog_img"
/>
<TextView
android:id="#+id/age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/name"
/>
<TextView
android:id="#+id/hobby"
android:layout_width="156dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/name"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
I really want the images to line up with each other regardless of the length of the "Hobby". Sorry if this might seem a bit basic, but I'm new to Android Studio. Anyways, thanks in advance!

I'll suggest you set the scale type to centre inside and another tag adjustViewBounds like the following code.
android:adjustViewBounds="true" and android:scaleType="centerInside"
<ImageView
android:id="#+id/dog_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:importantForAccessibility="no"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>

Android: ScrollView containing two nested ConstraintLayouts, cant fill screen horizontally

I am having an issue with the following 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="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp">
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#419E9E9E"
android:orientation="horizontal"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/block"></LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TextView
android:id="#+id/holderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="12sp"
android:gravity="center_vertical"
android:maxLines="4"
android:text="Hello World"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/holder" />
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Vertically, the layout does what I want: it puts the last layout and fills the screen.
However, when the device is flipped horizontally, the bottom portion (the nested constraintlayout) disappears due to the constraint on itself of app:layout_constraintBottom_toBottomOf="parent"
"How do I fill the screen with a second layout while still having it scroll horizontally ?"
I have attached pics and a demo repository to isolate the problem.
Link: https://github.com/taesookim0412/StackOverflow_Question_Android_NestedConstraintLayouts_ScrollView

I've found a solution. Instead of minHeight, you can use
app:layout_constraintHeight_min="100dp"

Make layout size depend on image size in XML

I'm currently writing an android app with Android Studio. In order to fit most screen sizes I decided to use LinearLayouts inside ConstraintLayout.
I have the following code for 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="match_parent"
android:background="#color/colorBackground"
tools:context=".Kadr1Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/contentDescrKadr1"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/lol" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/backBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginStart="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_back" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/nextBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_next" />
</LinearLayout>
</LinearLayout>
It looks like this:
I want ImageButtons height depend on the height of the ImageView. I tried using RelativeLayout, however, I cannot get how to implement dependencies not on whole screen size, but only on ImageView size.
So, how can I adjust height of my horizontal LinearLayout (with buttons) to be 4 times smaller (for example) than ImageView height?
Would be grateful for any possible advice.

Thanks to #Marcin Orlowski, I got it:
should set ImageView height to "0dp", horizontal LinearLayout height to "0dp", then set ImageView weight to "4" and LinearLayout weight to "1".
It works properly:
<?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="#color/colorBackground"
tools:context=".Kadr1Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:adjustViewBounds="true"
android:contentDescription="#string/contentDescrKadr1"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/lol" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1">
<ImageButton
android:id="#+id/backBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginStart="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_back" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/nextBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_next" />
</LinearLayout>
</LinearLayout>

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>

Aligning horizontal recycler view below imageview using constraint layout

I am using below xml code for placing a horizontal RecyclerView below ImageView
But My Recycler is not displaying and ImageView occupies entire space.
In Big size mobile design looks fine. But not able to acheive that for small mobile phones.
Horizontal RecyclerView consists of multiple images..it should be bottom of the screen...On clicking the image, I want to display it above horizontal RecyclerView.
I am using barrier for that issue but that does't solve my question.
Anybody please help me to find the solution.
<?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/constriantLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/top_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/barrier3"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteX="39dp" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="view_current_photo"
app:barrierDirection="bottom" />
</androidx.constraintlayout.widget.ConstraintLayout>

Thank u all for ur answers,
I got a solution,
here it is,
<?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:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#id/image_view_guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:contentDescription="#string/view_current_photo" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7"/>
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/top_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintTop_toBottomOf="#id/image_view_guideline"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

I have try to modify your layout hope it help you, do not fix your image size.
<?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/constriantLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/top_guideline"/>
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/top_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/top_guideline"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

I am not sure about my answer but this is my code if i understand correctly your problem. RecyclerView scroll horizontall with each item is an image, when i click item, image will display, replace for image above
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="vn.prdcv.dlreader.InputPasswordActivity"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#drawable/panasonic"
android:scaleType="fitXY"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="16dp"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/red"
/>
</android.support.constraint.ConstraintLayout>

Categories

Resources