0

I want to center a TextView in the header of a CardView as a "discount tag". How can I create a layout like this in Android?

enter image description here

3 Answers 3

2
            <?xml version="1.0" encoding="utf-8"?>
            <androidx.constraintlayout.widget.ConstraintLayout 
                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="wrap_content">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello Alert"
                    android:elevation="6dp"
                    android:textSize="18sp"
                    android:paddingStart="16dp"
                    android:paddingEnd="16dp"
                    android:background="@color/md_green_300"
                    app:layout_constraintBottom_toTopOf="@+id/materialCardView4"
                    app:layout_constraintStart_toStartOf="@+id/materialCardView4"
                    app:layout_constraintTop_toTopOf="@+id/materialCardView4" />
            
                <com.google.android.material.card.MaterialCardView
                    android:id="@+id/materialCardView4"
                    android:layout_width="0dp"
                    android:layout_height="200dp"
                    android:layout_marginStart="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginEnd="20dp"
                    android:layout_marginBottom="20dp"
                    app:cardBackgroundColor="@color/color_gray"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>
            
            </androidx.constraintlayout.widget.ConstraintLayout>

Output

Output

1
  • Thank you, it was exactly what I expected. May 17, 2020 at 22:09
1

Use ConstraintLayout to overlap one view to another. This is the best way to do it

for example, I did:-

    <android.support.constraint.ConstraintLayout
            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"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".ui.contactdeatail.ContactDetailActivity">

        <View
                android:layout_width="wrap_content"
                android:layout_height="200dp"
                android:id="@+id/view"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:background="#00E676"
                app:layout_constraintHorizontal_bias="1.0"/>

        <de.hdodenhof.circleimageview.CircleImageView
                android:layout_width="100dp"
                android:src="@drawable/krishna"
                android:layout_height="100dp"
                android:layout_marginTop="132dp"
                app:layout_constraintTop_toTopOf="@+id/view"
                app:layout_constraintStart_toStartOf="@+id/view"
                app:layout_constraintEnd_toEndOf="@+id/view"
                android:layout_marginEnd="8dp"
                app:layout_constraintHorizontal_bias="0.511"
                android:id="@+id/circleImageView"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/user_name"
                android:lines="1"
                app:layout_constraintStart_toStartOf="@+id/view"
                app:layout_constraintEnd_toEndOf="@+id/view"
                android:layout_marginEnd="8dp"
                app:layout_constraintTop_toTopOf="@+id/view"
                android:layout_marginTop="92dp"
                app:layout_constraintHorizontal_bias="0.511"
                android:textSize="25sp"
                android:textAlignment="center"
                tools:text="Krishna Sony"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:textColor="@color/white"
                android:textStyle="bold"/>

        <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:elevation="4dp"
                android:layout_height="100dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                android:layout_marginTop="52dp"
                app:layout_constraintTop_toBottomOf="@+id/circleImageView"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                android:id="@+id/cardView">

            <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_call_black_24dp"
                        android:id="@+id/imageView"
                        app:layout_constraintTop_toTopOf="parent"
                        android:layout_marginTop="16dp"
                        app:layout_constraintStart_toStartOf="@+id/view2"/>

                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/mobile"
                        app:layout_constraintBottom_toBottomOf="@+id/imageView"
                        app:layout_constraintTop_toTopOf="@+id/imageView"
                        app:layout_constraintStart_toEndOf="@+id/imageView"
                        android:layout_marginStart="16dp"
                        tools:text="+91-9981048926"
                        android:textColor="@color/black"
                        app:layout_constraintVertical_bias="0.0"/>

                <View
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:id="@+id/view2"
                        app:layout_constraintStart_toStartOf="parent"
                        android:layout_marginStart="32dp"
                        app:layout_constraintEnd_toEndOf="parent"
                        android:layout_marginEnd="8dp"
                        android:background="@color/light_gray"
                        app:layout_constraintTop_toBottomOf="@+id/mobile"
                        android:layout_marginTop="16dp"/>

                <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_mail_black_24dp"
                        android:id="@+id/imageView2"
                        app:layout_constraintTop_toBottomOf="@+id/view2"
                        android:layout_marginTop="16dp"
                        app:layout_constraintStart_toStartOf="@+id/view2"/>

                <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:id="@+id/email"
                        app:layout_constraintTop_toTopOf="@+id/imageView2"
                        android:layout_marginBottom="8dp"
                        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
                        app:layout_constraintStart_toEndOf="@+id/imageView2"
                        android:layout_marginStart="16dp"
                        tools:text="[email protected]"/>

            </android.support.constraint.ConstraintLayout>


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

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_arrow_back_black_24dp"
                android:id="@+id/back_button"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"/>

        <android.support.v7.widget.CardView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/call"
                android:layout_marginEnd="8dp"
                app:layout_constraintTop_toBottomOf="@+id/cardView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginStart="8dp"
                android:layout_marginTop="72dp"
                app:cardMaxElevation="12dp"
                app:cardCornerRadius="120dp"
                android:layout_marginBottom="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_bias="0.498"
                app:layout_constraintVertical_bias="0.234">

            <ImageButton
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:id="@+id/imageButton"
                    android:layout_gravity="center"
                    android:background="@drawable/ic_call_black_24dp"/>
        </android.support.v7.widget.CardView>

    </android.support.constraint.ConstraintLayout>

Check this image output

2
  • Thank you for the help, but in your example, the image is only centered due to the applied margin. I need to centralize without applying margins. May 17, 2020 at 15:35
  • you can do it just set constraint top, bottom, end, and start to reference of your card view May 17, 2020 at 15:41
1

I've found a solution for your case. It'll have a little bit trick ^^ With constraint layout, i will create a dummy view that center your text in vertical Then my cardview will constraintTopToBottom with that dummy view. Hope that help ^^

<View
    android:background="@color/colorTransparent"
    android:id="@+id/dummy"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="@id/tv"
    app:layout_constraintTop_toTopOf="@id/tv"
    android:layout_width="0dp"
    android:layout_height="1dp"/>

<com.google.android.material.card.MaterialCardView
    app:cardBackgroundColor="@color/colorLightGrey"
    android:elevation="3dp"
    android:background="@color/colorGreen"
    app:layout_constraintTop_toBottomOf="@id/dummy"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>

<androidx.appcompat.widget.AppCompatTextView
    android:elevation="10dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:text="Hello Alert"
    android:textColor="@color/colorWhite"
    android:padding="10dp"
    android:background="@color/colorGreen"
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Screenshot

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.