Nouman
Nouman

Reputation: 132

Android recyclerView with cardview layout issue

Desired Layout Output

MY current Output as I am using RecyclerView with Cardview

I am creating a layout as show in the First image. I am using RecyclerView with Cardview to complete this screen but as you can see in the emulator output i am not getting the desired layout(shown in the first Image) as it looks crazy as all items should be aligned respectively just like HTML Table in the WEB and should work same on all devices.

Here is my Layout Resource XML file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textViewStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="TextView" />

    <TextView
        android:id="@+id/textViewHomeTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/textViewStatus"
        android:text="TextView" />

    <ImageView
        android:id="@+id/imageViewHomeTeamLogo"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerInParent="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/textViewHomeTeam"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="false"
        android:layout_toRightOf="@+id/imageViewHomeTeamLogo"
        android:text="TextView" />

    <TextView
        android:id="@+id/textViewMatchStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textViewStatus"
        android:layout_centerInParent="false"
        android:layout_toEndOf="@+id/imageViewHomeTeamLogo"
        android:text="TextView" />

    <ImageView
        android:id="@+id/imageViewAwayTeamLogo"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerInParent="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/textViewScore"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewAwayTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="false"
        android:layout_centerHorizontal="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageViewAwayTeamLogo"
        android:text="TextView" />

    </RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

Please correct me what is missing.

Upvotes: 0

Views: 286

Answers (4)

user4571931
user4571931

Reputation:

Replace your onCreateViewHolder with following one

@Override
    public CountryListAdapter onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        view = LayoutInflater.from(mContext).inflate(R.layout."your_layout", null);

        RecyclerView.LayoutParams params = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        view.setLayoutParams(params);

        CountryListAdapter viewHolder = new CountryListAdapter(view);
        return viewHolder;
    }

Upvotes: 1

Zilan Pattni
Zilan Pattni

Reputation: 236

update your layout with below layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:weightSum="4">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:gravity="end">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="0.3" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"/>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

            </LinearLayout>

            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Upvotes: 0

Sandeep Sankla
Sandeep Sankla

Reputation: 1260

Hey I am giving you rough layout might help you,

 <?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="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp" >

    <TextView
        android:id="@+id/textViewStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FT"
        android:padding="8dp"
        android:background="@drawable/text_drawable"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/textViewHomeTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="35dp"
        android:layout_marginLeft="35dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textViewStatus"
        android:text="Arsenol" />

    <ImageView
        android:id="@+id/imageViewHomeTeamLogo"
        android:layout_width="25dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textViewHomeTeam"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/imageViewHomeTeamLogo"
        android:text="21:00"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/textViewMatchStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/textViewStatus"
        app:layout_constraintLeft_toRightOf="@+id/imageViewHomeTeamLogo"
        android:text="Not Started" />

    <ImageView
        android:id="@+id/imageViewAwayTeamLogo"
        android:layout_width="25dp"
        android:layout_marginLeft="12dp"
        android:layout_height="match_parent"
        android:src="@color/colorAccent"
        app:layout_constraintLeft_toRightOf="@+id/textViewMatchStatus"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewAwayTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageViewAwayTeamLogo"
        android:text="Leisure city" />

Upvotes: 0

Vivek Pagar
Vivek Pagar

Reputation: 29

You can use Linear layout with horizontal orientation inside card view.

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

</RelativeLayout>

Upvotes: 0

Related Questions