1 votes

How to align elements in a CardView?

I have the following card that I want to reuse in a RecyclerView, it contains a photo and below it on the left a button and a name, on the right should be an image and a TextView, for this I used LinearLayouts to enclose each group of elements and position them with the property "layout_gravity" but I can't align them, the preview appears like this:

introducir la descripción de la imagen aquí

My XML code for the card is as follows:

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cvMascota"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="@dimen/radio"
>

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_bone_on"
        android:layout_gravity="center_horizontal"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_datos_arriba"
        >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            >

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_bone_off"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/nombre_mascota"
                android:textSize="@dimen/nombre"
                android:textStyle="bold"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="@dimen/margin_nombre_derecha"
                />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_hueso_count"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4"
                android:textSize="25sp"
                android:textStyle="bold"
                android:layout_gravity="center"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

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

No matter how much "right" or "end" is set in layout_gravity, no change is noticed.

How can I do to position the bone and TextView to the right of the card while maintaining compatibility with different screens (because I could use a margin or padding but I want to align it to the right of the screen whatever size it is)?

Thank you very much.

2voto

Pablo Cegarra Points 432

Example:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1" />

    <LinearLayout
        android:gravity="right"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3" />
    </LinearLayout>

</LinearLayout>

0voto

Axel Pantoja Points 100

After many unsuccessful attempts with android:layout_gravity="right" I found another solution using android:layoutDirection="rtl" my code using the first option is the following, with this one I didn't manage to align the elements I wanted:

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cvMascota"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="@dimen/radio"
android:layout_marginBottom="@dimen/margin_entre_tarjetas"
card_view:cardBackgroundColor="@color/tarjeta"
>

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

    <ImageView
        android:id="@+id/imgFoto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_bone_on"
        android:scaleType="centerCrop"
        android:background="@color/blanco"
        android:layout_gravity="center_horizontal"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_datos_arriba"
        android:orientation="horizontal"
        >

        <ImageButton
            android:id="@+id/btnPlus1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_bone_off"
            />

        <TextView
            android:id="@+id/tvNombre"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/nombre_mascota"
            android:textSize="@dimen/nombre"
            android:textStyle="bold"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_nombre_derecha"
            />

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

            <ImageView
                android:id="@+id/imgFavs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_hueso_count"
                />

            <TextView
                android:id="@+id/tvFavs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4"
                android:textSize="25sp"
                android:textStyle="bold"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/margin_hueso_favs"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

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

Now, my code after fixing the problem looks like this:

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cvMascota"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="@dimen/radio"
android:layout_marginBottom="@dimen/margin_entre_tarjetas"
card_view:cardBackgroundColor="@color/tarjeta"
>

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

    <ImageView
        android:id="@+id/imgFoto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_bone_on"
        android:scaleType="centerCrop"
        android:background="@color/blanco"
        android:layout_gravity="center_horizontal"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_datos_arriba"
        android:orientation="horizontal"
        >

        <ImageButton
            android:id="@+id/btnPlus1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_bone_off"
            />

        <TextView
            android:id="@+id/tvNombre"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/nombre_mascota"
            android:textSize="@dimen/nombre"
            android:textStyle="bold"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_nombre_derecha"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layoutDirection="rtl"
            android:layout_marginRight="10dp"
            >

            <TextView
                android:id="@+id/tvFavs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4"
                android:textSize="25sp"
                android:textStyle="bold"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/margin_hueso_favs"
                />

            <ImageView
                android:id="@+id/imgFavs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_hueso_count"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

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

As you can see there were not many changes besides using layoutDirection and inverting the order of my TextView and ImageView, I inverted them because when changing the direction of the layout the elements are flipped, that is to say, if first I have an ImageView and then a TextView, after applying the property will appear first the TextView and then the ImageView, this is why I changed the order so that they appear correctly.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X