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?
3 Answers
<?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
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>
-
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
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"/>