I want to make 2 rows and 3 columns card view with text below it (not inside the card view) and an image in the center of the card view.
CodePudding user response：
For this you have to use GridLayout and CardView. First we use RelativeLayout and make it gravity horizontal_center so that all our elements are in center.
<RelativeLayout 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:gravity="center_horizontal">
Then we use GridLayout to make grid like structure.
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rowCount="2"
android:columnCount="3">
You can change row and colume according to your need. then we use LinearLayout to make cardview and textView vertically.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
then We just add our Cardview and TextView inside this layout like this:-
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/white"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello"
/>
Below is full code:-
<RelativeLayout 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:gravity="center_horizontal">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rowCount="2"
android:columnCount="3"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/white"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/white"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/white"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/white"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/white"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardBackgroundColor="@color/white"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello"
/>
</LinearLayout>
</GridLayout>
</RelativeLayout>
CodePudding user response：
try this
Just Copy and Paste your xml layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
android:layout_margin="10dp"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
app:cardElevation="10dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_launcher_background"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="dummy"
android:gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
app:cardElevation="10dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_launcher_background"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="dummy"
android:gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
app:cardElevation="10dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_launcher_background"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="dummy"
android:gravity="center"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
android:layout_margin="10dp"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
app:cardElevation="10dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_launcher_background"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="dummy"
android:gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
app:cardElevation="10dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_launcher_background"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="dummy"
android:gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
app:cardElevation="10dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_launcher_background"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="dummy"
android:gravity="center"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
CodePudding user response：
I'm fairly new to android, but realised a similar problem in one of my projects:
Personally, I always use the "Recycler View" component for and sort of Card View. For that you have to create two (or three) XML files (Recycler View itself and a single Card) and a custom RecyclerViewAdapter (For the e.g. onClick actions) ( a Sort of fragment if you'd like to have a clickable card view, which would then open this specific card in e.g. a more detailed view. You however don't really have to do this. Therefore you can also work with two XML files).
First, the Card View itself: To have a Card View with an image "inside of it" and a text "below it", you have to simply style this in xml. To do that, you can work with "" inside of "</androidx.cardview.widget.CardView>". Just style it as you'd like it to look. You might be able to pull something off with a structure like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView>
<LinearLayout>
<LinearLayout >
<ImageView />
</LinearLayout>
<TextView />
</LinearLayout>
</androidx.cardview.widget.CardView>
Then, the RecyclerView component:
This component is rather simple: You just have to put "<androidx.recyclerview.widget.RecyclerView" in a position where you'd like it to be. Give it an ID and then you can start with the next part:
The RecyclerViewAdapter:
Create a class which implements "RecyclerView.Adapter" (sorry if I'm wrong with 'implements'. I'm fairly new to kotlin :)".
class RecyclerViewAdapter(private val context: Context?, remindersIn: List<Reminder>) :
RecyclerView.Adapter<ReminderViewHolder>() {
private val reminders: List<Reminder> = remindersIn
private val inflater: LayoutInflater = LayoutInflater.from(context)
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ReminderViewHolder {
val recyclerViewItem: View = inflater
.inflate(R.layout.item_recyclerview_layout, parent, false)
recyclerViewItem.setOnClickListener {
v -> onClick(parent as RecyclerView, v, context)
}
return ReminderViewHolder(recyclerViewItem)
}
override fun onBindViewHolder(holder: ReminderViewHolder, position: Int) {
val reminder: Reminder = reminders[position]
holder.descriptionView.text = reminder.description
}
override fun getItemCount(): Int {
return reminders.size
}
private fun onClick(recyclerView: RecyclerView, itemView: View, context: Context?) {
val itemPos = recyclerView.getChildLayoutPosition(itemView)
findNavController(itemView).navigate(RemindersFragmentDirections.actionRemindersToPopup(itemPos))
}
}
(Additional note: If you're planning on using any form of onClick event I highly recommend the usage of "NavArgs". With NavArgs you can send information in form of parameters from a Fragment to another Fragment).
Last but not least there's the Fragment for the onClick element, if you're planning to implement it. This just works like a normal Fragment and fetches it's data via the NavArgs.
If you have any questions or any feedback to my answer, I'd love to hear that. I then will improve my answer.
Cheers
CodePudding user response：
Simply wrap your CardView and your TextView in a Vertical LinearLayout. You can create a layout file and reuse it as per your requirements