For card elevation to be visible, I use the attribute card_view:cardUseCompatPadding="true" in cardview XML. It added extra padding on all four sides of the cardview, but I do not need the bottom padding since the card below every card will already have a top padding. So currently it is like double padding between two cards because of top+bottom padding. How to reduce it by half?
P.S android:layout_marginBottom="-5dp" doesn't seem to work
Only use a margin at the bottom for the cards and set a padding to the top of your RecyclerView/ListView holding the cards:
<android.support.v7.widget.RecyclerView
...
android:paddingTop="5dp"
android:clipToPadding="false" />
Related
I have the following exposed dropdown menu that looks like this when an option is selected:
This is what I have in my XML layout for the exposed dropdown menu:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/drop_down_menu"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:theme="#style/Theme.MaterialComponents.Light.NoActionBar"
app:layout_constraintBottom_toBottomOf="#+id/text_view_1"
app:layout_constraintEnd_toStartOf="#+id/text_view_2"
app:layout_constraintTop_toTopOf="#+id/text_view_3">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
How do I add space to the left side of the selected option?
Thanks as Zain already helped you with your query, I would love to add a few cherries on top of it to make things easy for you in future to decide whenever adding a space-related query comes to your mind.
Whenever we want to have space between two view's we get two options in our mind padding and margin.
Padding is used to add a blank space between a view and its contents.
Margin is used to add a space between two different views.
For both padding and margin, we have two way to set those,
setting all sides with equal value
setting side specific values as per requirement
All sides with equal values:
You can use android:padding="10dp" for setting padding of 10dp all the sides and android:layout_margin="10dp" for setting margin of 10dp all the sides
Sides with specific values:
Padding
android:paddingBottom Sets the padding at the bottom edge
android:paddingStart Sets the padding at the start edge means at the left side of view
android:paddingEnd Sets the padding at the end edge means at the right side of view
android:paddingTop Sets the padding at the top edge
Margin
android:layout_marginBottom Specifies extra space on the bottom side of this view.
android:layout_marginEnd Specifies extra space on the end side, means at the right side of this view.
android:layout_marginStart Specifies extra space on the start side, means at the left of this view.
android:layout_marginTop Specifies extra space on the top side of this view.
I have more than 3 CardView displayed on a screen as an item of a RecyclerView.
I have realized recently that the elevation of the CardView is different for a different card or the position of the card view on the screen.
You can see it in the picture attached to this question:
Blue CardView - the top shadow of the card has a clear darkgrey line and the bottom line has less shadow compared to others.
Yellow CardView - the top shadow of the card has a less clear grey line and the bottom line has dark shadow compared to others.
Red CardView - the top shadow of the card has a negligible grey line as compared to others.
Is it normal or am I doing something wrong?
The CardView layout is same for all the three as they are in RecyclerView:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
app:cardBackgroundColor="#ffffff"
app:cardElevation="1dp"/>
I am trying to build an Android UI where I need 7 boxes with the days of the week. In order to do this, I decided to go with a ConstraintLayout in order to be able to auto resize my views on any screen.
I created a chain between all 7 views with the with the "spread_inside" attribute, with worked but since I had my views' widths set to wrap_content, due to the nature of TextViews the views did not have equal widths. So I tried making them have equal widths by setting all of 7 views' widths to 0dp. This works but leaves no space between the views. Is there a way to add some spacing between these 7 views? Or is there another way of achieving the "equal widths" to all 7 views while keeping the auto-resizing ability on any screen? Is this even possible with ConstraintLayout or should I keep using LinearLayout for this kind of things? (as seen in the last screenshot)
I want my views to shrink when the screen is small and to expand up to a level when the screen is big. Please see the screenshots below of how it looks now. I want to add an 8dp padding between each view (on a LinearLayout I achieve this by adding a transparent divider on the layout with 8dp width, as in the last screenshot)
How it should look, achieved using LinearLayout
if you want them to be all the same width you don't even need spread_inside, just set the width to 0dp and then add margins to the views. for example:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginRight="4dp"
android:layout_marginLeft="8dp"
android:background="#ffff0000"
app:layout_constraintEnd_toStartOf="#+id/view2"
app:layout_constraintStart_toStartOf="parent"/>
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="4dp"
android:background="#ff00ff00"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view1"/>
</android.support.constraint.ConstraintLayout>
keep in mind that space between views will be the sum of 2 margins, first and last view will have only 1 margin space, so you need to set them accordingly (like 4dp for margins between views and 8dp for first and last margin)
I have guideline 60% from top and LinearLayout with bottom constrain to that guideline (so my LinearLayout will 60% of screen). Now Im need to put half of CardView to the bottom of that LinearLayout (screenshot added).
CardView height is wrap_content, cause will be added dynamically so I dont know height and cannot use something like margin bottom -50dp.
Thats what I have:
I need something like that:
I cannot find future like constrain by center. Could you help me, please.
You just need to set the top anchor of cardview to be connected to the bottom anchor of the linear layout (or to the guideline), and do the same for the bottom anchor. With both top and bottom anchors pointing to the same target, the cardview will be centered vertically on that target. Also, you might not need that linearlayout, depending on what you do. Check the chains functionality in ConstraintLayout.
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
tools:layout_editor_absoluteX="28dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:layout_editor_absoluteY="156dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
The eaiest way is to do this in code at runtime. Wait until the height has been calculated, then add a top margin of -.5*height.
I am attempting to draw the medal overlaying the corner of the score screen shown here
There is an transparent layout holding the buttons and a RelativeLayout (black edge box), which holds the interior box (grey box) that contains the rest of the data. I tried adding the medal to the top left corner of the interior RelativeLayout and giving it negative margins, but that just cuts it off at the edge of the view. Adding it to the transparent layout puts it behind the corner.
How can I force the medal to overlay that corner? I'd prefer to do it in xml if possible, but any suggestions are welcome.
You can also achieve this by setting the android:clipChildren="false" and android:clipToPadding="false" attributes on the parent view (and if that doesn't work, set it on all the ancestor view groups as well, eventually it will work).
In the xml layout, an element that define after will overlay the element that define before.
So, you could change layout to something like this:
<LinearLayout>
<LinearLayout> <!--grey box --> </LinearLayout>
<ImageView src="medal" android:layout_marginLeft="-250dip"/>
<!-- change the amount of marginLeft to your desire -->
</LinearLayout>
merge them ...
http://developer.android.com/resources/articles/layout-tricks-merge.html would help