Menu
Is it possible to use ConstraintLayout inside CardView for so that I can inflate it for a RecyclerView?
Current layout is like this but I want to display it inside a CardView.
https://i.stack.imgur.com/MeArp.png
Reference XML code:
<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="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:background="@drawable/touch_selector"
android:paddingBottom="@dimen/list_item_padding_vertical"
android:paddingLeft="@dimen/list_item_padding_horizontal"
android:paddingRight="@dimen/list_item_padding_horizontal"
android:paddingTop="@dimen/list_item_padding_vertical">
<ImageView
android:id="@+id/weather_icon"
android:layout_width="@dimen/list_icon"
android:layout_height="@dimen/list_icon"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:src="@drawable/art_clouds"/>
<TextView
android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/list_item_date_left_margin"
android:layout_marginStart="@dimen/list_item_date_start_margin"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintLeft_toRightOf="@+id/weather_icon"
tools:text="Today, April 03"/>
<TextView
android:id="@+id/weather_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="@color/secondary_text"
app:layout_constraintLeft_toLeftOf="@+id/date"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="Rainy"/>
<TextView
android:id="@+id/high_temperature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/forecast_temperature_space"
android:layout_marginRight="@dimen/forecast_temperature_space"
android:fontFamily="sans-serif-light"
android:textColor="@color/primary_text"
android:textSize="@dimen/forecast_text_size"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintRight_toLeftOf="@+id/low_temperature"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="19\u00b0"/>
<TextView
android:id="@+id/low_temperature"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="end"
android:textSize="@dimen/forecast_text_size"
app:layout_constraintBottom_toBottomOf="@+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline"
tools:text="10\u00b0"/>
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
</android.support.constraint.ConstraintLayout>
918
Now, for CardView itself -- there are no need for a Nested ConstraintLayout -- CardView is simply a FrameLayout, so if you want to use a ConstraintLayout inside it, everything works. In parallel, you can put a CardView inside a ConstraintLayout, that works too.
ConstraintLayout has flat view hierarchy unlike other layouts, so does a better performance than relative layout. Yes, this is the biggest advantage of Constraint Layout, the only single layout can handle your UI. Where in the Relative layout you needed multiple nested layouts (LinearLayout + RelativeLayout).
It's not the right way. ConstraintLayout came to prevent the usage of nested layouts. Remove the relative layout and put a view on top(zindex) of your clickable zone. Set the click listener to that view and there you go.
Yep, it's possible! Put your ConstraintLayout xml code inside CardView. You can also check out various card view implementations done in compliance with Material design guidelines.
190
You have ConstraintLayout in the parent. Use it inside CardView for having ConstraintLayout.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/animals" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toBottomOf="@id/imageView">
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title" />
<TextView
android:id="@+id/totalJokes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="100" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
For Androidx use it like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="@dimen/card_margin"
android:clickable="true"
android:elevation="8dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="@dimen/card_radius">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<androidx.constraintlayout.widget.Guideline
android:id="@+id/firsthline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/firstvline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/secondvline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7" />
<ImageView
android:id="@+id/image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:scaleType="fitCenter" />
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="bottom"
android:paddingStart="@dimen/text_padding"
android:paddingEnd="@dimen/text_padding"
android:textColor="@android:color/black"
android:textSize="@dimen/cuvantprincipal"
android:textStyle="bold" />
<TextView
android:id="@+id/subtitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="@id/title"
android:gravity="top"
android:paddingStart="@dimen/text_padding"
android:paddingEnd="@dimen/text_padding"
android:textColor="@android:color/black"
android:textSize="@dimen/cuvantsecundar" />
<ImageView
android:id="@+id/playbutton"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="32dp"
android:src="@drawable/play" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
