I have bellow xml :
<RelativeLayout
android:id="#+id/relative_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relative_two"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_product_imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
<TextView
android:id="#+id/status_product_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:visibility="invisible" />
</RelativeLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/relative_three"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/relative_two">
<Spinner
android:id="#+id/select_spinner"
android:layout_width="15dp"
android:layout_height="0dp"
android:layout_marginRight="5dp"
android:dropDownVerticalOffset="40dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/name_product_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:ellipsize="marquee"
android:gravity="right"
android:maxLines="1"
android:text="TEXT"
app:layout_constraintRight_toLeftOf="#+id/select_spinner"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/count_products_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:gravity="right"
android:text="TEXT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/select_spinner"
app:layout_constraintTop_toBottomOf="#+id/name_product_textview" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
In above xml I have bellow ImageView :
<ImageView
android:id="#+id/image_product_imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
Problem: My ImageView don't match in cardView (left and right and top).It has 2 or 3 space around ImageView(left and right and top).
In my source code I am setting Image like bellow :
Picasso.with(context)
.load(productsModelList.getPictureUrl())
.placeholder(AppCompatDrawableManager.get().getDrawable(context, R.drawable.placeholder_pictures))
.fit()
.into(image_product_imageview);
This space is the result of that CardView supports for system older than L (API 20). To make your layouts look the same either on the pre-Lollipop (and pre-CardView widget) or Lollipop and newer, Android introduced some additional attributes.
Because overlapping (rounding the corners) the content was difficult for older Android versions, the cardPreventCornerOverlap has been added and has been set by default as true. That is why there're white stripes around your ImageView - you can check by yourself that their width is closely related to the cardCornerRadius value.
To remove this padding turn off cardPreventCornerOverlap. You can do it:
via xml by card_view:cardPreventCornerOverlap="false"
or programatically by yourCardView.setPreventCornerOverlap(false).
Keep in mind that this gives you the effect you want only for API 20+.
On devices with older versions of a system, your rounded corners will be invisible (hidden under not-rounded image).
To know more check the CardView doc. In the first paragraph you can find the official note about your issue.
Related
It has been quite some time since I used XML layout for Android. I am struggling with what seems to be very simple thing, yet I cannot find a quick solution.
I have a constraintLayout with an image, title, description and a button:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover"
tools:text="Title" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="#string/some_very_long_text"/>
<Button
android:id="#+id/button"
app:layout_constraintTop_toBottomOf="#id/description"
app:layout_constraintBottom_toBottomOf="#id/image_cover"
app:layout_constraintStart_toStartOf="#id/title"
android:layout_width="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
android:background="#color/black"
android:text="Button"
android:layout_height="36dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to achieve the following result when the description is short:
Description is aligned to bottom of the title and button aligned to bottom of the image
The following result when description is long:
the button is pushed down/aligned to bottom of the description
I tried to create a chain with either packed (and vertical bias) or spread-inside, however I am only able to achieve either result 1 or 2 and not both.
The idea to do it in XML only, not in Java/Kotlin code.
Since you specify that the button is 39dp in height, you can set a Space widget 39dp from the bottom of the description using a bottom margin. Now set a barrier with a direction = bottom to the Space widget and the description. Now the barrier will float between the bottom of the Space widget and the bottom of the description and will alight on whichever is lower.
Now you can set the top of the button to the bottom of the Barrier and the button will float. The XML is below.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover"
tools:text="Title" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/some_very_long_text"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="spread_inside" />
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_cover"
app:layout_constraintStart_toStartOf="#id/title" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="0dp"
android:background="#color/black"
android:padding="0dp"
android:text="Button"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/barrier" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="description,space" />
</androidx.constraintlayout.widget.ConstraintLayout>
If you don't explicitly know the height of the button, you can create an invisible clone of the button with the same constraints and use the invisible button for the barrier.
Here is another version that also works, but I am not sure why. It doesn't use a Space.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:text="Title"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/some_very_long_text1"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintVertical_bias="0.0"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="0dp"
android:background="#color/black"
android:padding="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#id/barrier"
app:layout_constraintStart_toStartOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="image_cover,description" />
</androidx.constraintlayout.widget.ConstraintLayout>
Update: I was curious about the last layout above. Although it works, I wouldn't use it and I have come to the conclusion that it is a bug since the barrier is located below the button but should be immediately below either the description or the image cover. I am using "androidx.constraintlayout:constraintlayout:2.1.4".
More: I no longer think that this is a bug but a reasonable resolution to a, seemingly, impossible condition: The barrier is positioned to the bottom of the TextView and ImageView. The button's bottom is constrained to the barrier while the TextView's bottom is constrained to top of the button. If the barrier is positioned immediately below its referenced views then the wrap_content height of the TextView cannot be honored since the button will intrude into the TextView height (For the long text.)
What is pictured above could be a compromise. The barrier is still below its referenced views, although much farther below, and all constraints and layout sizes can be honored.
It's hard to tell if this is intentional or not or if it will continue to be the case going forward. I believe that the Space solution is the better solution.
!!Beginner alert!!
I designed my app in Adobe XD. Now I started to introduce the design in Android Studio. However, whenever I use a resource from the resource manager and drop it in the designer, the resizable area is way bigger than the image which i think will affect the clickable area of it. Everything looks good in Adobe XD, the resizable area is the border of the button. How can I do this in Android Studio? I will attach images below. Help is greatly appreciated.
How it's supposed to look (the look in Adobe XD)
The resizable area of the button in Adobe XD
The resizable area of the button in Android Studio
How can I make Android Studio have the same resizable area as Adobe XD?
I implemented the XML code below:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
tools:context=".Dashboard">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp"
app:layout_constraintEnd_toStartOf="#+id/imageView5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/resmonevo" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/red_gradient_line" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="121dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:srcCompat="#drawable/dashboard" />
<ImageView
android:id="#+id/imageView14"
android:layout_width="0dp"
android:layout_height="115dp"
android:layout_marginStart="5dp"
android:layout_marginTop="7dp"
android:layout_marginEnd="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4"
app:srcCompat="#drawable/rectangle_210" />
<ImageView
android:id="#+id/imageView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView18"
app:srcCompat="#drawable/rectangle_221" />
<ImageView
android:id="#+id/imageView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginBottom="1dp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintStart_toEndOf="#+id/imageView15"
app:srcCompat="#drawable/welcome_" />
<ImageView
android:id="#+id/imageView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="47dp"
android:layout_marginEnd="27dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView14"
app:srcCompat="#drawable/how_are_you_today" />
<ImageView
android:id="#+id/imageView20"
android:layout_width="21dp"
android:layout_height="19dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView15"
app:layout_constraintEnd_toEndOf="#+id/imageView15"
app:layout_constraintStart_toStartOf="#+id/imageView15"
app:layout_constraintTop_toTopOf="#+id/imageView15"
app:srcCompat="#drawable/ic_person_outline_24px" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginEnd="9dp"
android:fontFamily="#font/montserrat"
android:text="Username"
android:textColor="#FFFFFF"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView19"
app:layout_constraintEnd_toStartOf="#+id/imageView19"
app:layout_constraintStart_toStartOf="#+id/imageView18"
app:layout_constraintTop_toBottomOf="#+id/imageView19" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="390dp"
android:layout_height="351dp"
android:adjustViewBounds="true"
app:srcCompat="#drawable/rectangle_187"
tools:layout_editor_absoluteX="-39dp"
tools:layout_editor_absoluteY="158dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
The XML code for the most recent button is :
<ImageView
android:id="#+id/imageView8"
android:layout_width="390dp"
android:layout_height="351dp"
android:adjustViewBounds="true"
app:srcCompat="#drawable/rectangle_187"
tools:layout_editor_absoluteX="-39dp"
tools:layout_editor_absoluteY="158dp" />
Here is how my mess looks
The problem what I can figure out is that you are using static size in width
I will suggest you to use Linear layout as parent and inside it have a Image view as child because you are statically defining the width of image view.
so try something like this:
Kindly use imageView in your case I have used MaterialTextView just for an instance
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal"
android:padding="12dp">
<com.google.android.material.textview.MaterialTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:fontFamily="#font/cantata_one"
android:text="Email"/>
<com.google.android.material.textview.MaterialTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.7"
android:id="#+id/layout_recycler_all_cust_email"
android:fontFamily="#font/capriola"
android:textColor="#706E6E"
android:text="Email "/>
</LinearLayout>
and in the above code, you can see i have assigned weightsum to the LinearLayout and accordingly wait to it's children so you should try this. This will make your UI Flexible according to the device size and in the android:layout_height="wrap_content" you can use your value like 350DP or something else.
I want to remove extra space inside the CardView so the buttons does not have a white border as shown in the picture . This image was captured from my tablet but the Layout looks well in 5 Inch Mobile devices
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/twitter_button"
android:drawableStart="#drawable/ic_twitter"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Twitter"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/facebook_button"
android:drawableStart="#drawable/ic_facebook"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Facebook"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the code for the CardViews and the buttons. I didn't paste the whole layout code because I don't think it has effect on my problem and by the way I tried changing margins of the buttons but it didn't solve my problem
From library documentation it is nowhere mentioned that you need to use can completely remove the cardview as it seems unnecessary. You can remove your cardview and enclose your button directly in MaterialRippleLayout to achieve your ripple effect. Check library description here https://github.com/balysv/material-ripple.
I am developing an android application that also implements a chat but I am facing a weird issue on a galaxy s3 device running api 18.
s the image clearly show the text aligned on the right isn't well formatted as it should be on a single line. The layout file is as simple as possibile and no issue is shown on other phones and emulators.
Issue Image
Here is my xml layout file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textMine"
android:layout_marginBottom="15dp"
android:visibility="visible" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/silh"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:id="#+id/profilePicMine"
android:layout_alignParentTop="true"
android:focusable="false" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/profilePicMine"
android:layout_toStartOf="#+id/profilePicMine"
android:id="#+id/nuvolaMine">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone"
android:layout_marginRight="10dp"
android:layout_marginLeft="80dp"
android:src="#drawable/home_pic"
android:id="#+id/picMine"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/chat_yellow"
android:paddingRight="15dp"
android:layout_marginRight="10dp"
android:id="#+id/textLayoutMine"
android:paddingBottom="10dp"
android:visibility="visible"
android:paddingTop="10dp"
android:paddingLeft="10dp">
<com.sonarmusic.robotoTextViews.RobotoRegularTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="16sp"
android:text="non so"
android:id="#+id/textMessageMine" />
</RelativeLayout>
</RelativeLayout>
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignBottom="#id/profilePicMine"
android:layout_alignLeft="#id/profilePicMine"
android:src="#drawable/verde_on"
android:id="#+id/isArtistMine"/>
<RelativeLayout
android:layout_width="5dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:background="#color/chat_yellow"
android:layout_alignParentTop="true">
</RelativeLayout>
<com.sonarmusic.robotoTextViews.RobotoLightTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="6sp"
android:textColor="#color/gray_text"
android:text="08-08-2016"
android:id="#+id/timeMine"
android:layout_marginRight="10dp"
android:layout_below="#+id/nuvolaMine"
android:layout_marginTop="5dp"
android:layout_alignLeft="#+id/nuvolaMine" />
</RelativeLayout>
To me it looks like an issue due to right alignment that either android api 18 or both os and device can't render well, another reason why I have this thought is that the texts on the left side(the received ones in green background) are formatted the right way. But I have no clue on how possibily solve it.
PS Not supporting that device is NOT an option
Replace
android:layout_width="wrap_content"
by
android:layout_width="match_parent"
in your RelativeLayouts
I want to align two pictures and text. When the first picture is commented out, the text and the second picture are aligned in the middle of a card. But the first picture is always aligned to bottom of the card. I tried all layout properties so far without luck.
See the screenshot for example. I do not understand why the circle is bigger than OK button because when I open these files they have the same dimensions. Where is the issue? I want to use LinearLayout as the simplest layout manager available.
<android.support.v7.widget.CardView
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/badge_type"
android:src="#drawable/ic_gold_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/badge_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:text="#string/badge_title_KNIGHT"
style="#style/PlayRecordHeader"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView
android:id="#+id/badge_status"
android:src="#drawable/ic_correct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Update with layout_gravity="center_vertical"
I think you have to keep
android:layout_gravity="center_vertical"
and remove
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
in the LinearLayout