Foxtrot 1-5
Reputation: 379
Android Cardview Fixed Size with Gridlayout
I want to get a Fixed size Cardview containing an Image and some TextView. Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ProductListFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Outlet : Head Office"
android:textSize="18sp"
android:layout_marginTop="24dp"
android:layout_marginStart="32dp"/>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:hint=" Find Product"
app:helperTextEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="@drawable/search_icon"
android:drawableLeft="@drawable/search_icon" />
</com.google.android.material.textfield.TextInputLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
>
<GridLayout
android:paddingLeft="18dp"
android:paddingRight="18dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:rowCount="2"
>
<com.google.android.material.card.MaterialCardView
style="@style/CardView"
android:id="@+id/sampleProductCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="8dp"
>
<ImageView
android:layout_width="80dp" //This is what i change from 80 dp to match parent
android:layout_height="80dp"
android:src="@drawable/you_win"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Apple Pie"
android:textColor="#6f6f6f"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Rp. 40000"
android:textColor="#6f6f6f"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Stock : 4"
android:textColor="#000"
android:textSize="10sp"
/>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
style="@style/CardView"
android:id="@+id/sampleProductCard2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="8dp"
>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/you_win" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Apple Pie"
android:textColor="#6f6f6f"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Rp. 40000"
android:textColor="#6f6f6f"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Stock : 4"
android:textColor="#000"
android:textSize="10sp"
/>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</GridLayout>
</ScrollView>
</LinearLayout>
</layout>
It'll produce the result:
What i want is that the image has the same width as the CardView. But when i change the Image width to match_parent, it turn out to be:
Am i missing something ? If there is something more you want to know, just let me know.
Edit : I'm Trying to make each card would be like this.
Upvotes: 0
Views: 1389
Answers (1)
Wini
Reputation: 1996
try implementing-->
1.Add dependency in Gradle:
implementation 'com.google.android.material:material:1.0.0'
2.Change your code:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ProductListFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Outlet : Head Office"
android:textSize="18sp"
android:layout_marginTop="24dp"
android:layout_marginStart="32dp"/>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:hint=" Find Product"
app:helperTextEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="@drawable/search_icon"
android:drawableLeft="@drawable/search_icon" />
</com.google.android.material.textfield.TextInputLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
>
<GridLayout
android:paddingLeft="18dp"
android:paddingRight="18dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:rowCount="2"
>
<com.google.android.material.card.MaterialCardView
style="@style/CardView"
android:id="@+id/sampleProductCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="8dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher_background"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Apple Pie"
android:textColor="#6f6f6f"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Rp. 40000"
android:textColor="#6f6f6f"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Stock : 4"
android:textColor="#000"
android:textSize="10sp"
/>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
style="@style/CardView"
android:id="@+id/sampleProductCard2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="8dp"
>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/you_win"
android:scaleType="fitXY />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Apple Pie"
android:textColor="#6f6f6f"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Rp. 40000"
android:textColor="#6f6f6f"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Stock : 4"
android:textColor="#000"
android:textSize="10sp"
/>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</GridLayout>
</ScrollView>
</LinearLayout>
here is the screenshot:
Upvotes: 1
Related Questions
- Image in cardview not filling it completely
- GridLayout with CardView in Fragment
- LinearLayouts in CardView
- Cardview with Gridlayout produce unexpected behaviour
- How to make cardview responsive?
- Different card size
- Limit width of CardView
- Cardview size on Android
- Android - dynamic size of the cardview
- Cardslib Card size overflow