I am trying to set left and right padding of the text block using constraint layout guidelines. I want 11% padding with the following code on both sides. However, when I try to set the paddings it is not reflecting. When I only use either left or right then it is showing, but using both left and right guidelines on text view the padding is not reflecting.
Here is the code
<android.support.constraint.ConstraintLayout
android:id="#+id/contentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/centredIconLayout"
android:layout_centerHorizontal="true"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:fontFamily="#font/gothamggm_bold"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:text="#string/title_long"
android:textSize="17sp"
android:lineSpacingExtra="9sp"
android:textColor="#android:color/black"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
/>
<TextView
android:id="#+id/body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="13dp"
android:fontFamily="#font/gothamssm_book"
android:lineSpacingExtra="9sp"
android:text="#string/content_large"
android:textColor="#color/body_grey"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
/>
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.11" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.89" />
</android.support.constraint.ConstraintLayout>
Here is the blue print where both text views (included in #+id/contentLayout) are below image view
The problem is in width of textview. You have set it to wrap_content. This is creating the problem. just change it to match_constraints in layout editor or set width to 0dp in xml code manually and all will work fine.
Related
Is there a way to adjust the alignment of the menu dots in the RecyclerView item so that it's positioned exactly underneath the overflow dots in the Toolbar (i.e. in its original place where it should be)? I tried adjusting the item weights but that didn't work.
<LinearLayout
android:id="#+id/ll_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView android:id="#+id/rvitem_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:ellipsize="marquee"
android:textColor="?android:attr/textColorPrimary"
android:fadingEdge="horizontal"
android:layout_weight="90"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="More options"
android:clickable="true"
android:focusable="true"
android:layout_gravity="end"
android:src="#drawable/ic_more_vertical"
android:background="#null"
android:tint="?attr/colorOverflow"
android:layout_weight="10"/>
</LinearLayout>
<TextView android:id="#+id/rvitem_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:ellipsize="marquee"
android:textColor="?android:attr/textColorSecondary"
android:layout_below="#id/ll_title"
android:fadingEdge="horizontal" />
Current result
Expected result
#MacaronLover, The approach you are taking to make the view align by assigning the weight seems to be in the right direction. I have taken your xml file and made some adjustments here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingStart="16dp"
android:paddingTop="8dp"
android:paddingEnd="8dp"
android:paddingBottom="8dp">
<ImageView
android:id="#+id/firstImage"
android:layout_width="90dp"
android:layout_height="90dp"
tools:background="#000" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:text="Title A" />
<TextView
android:id="#+id/subTitleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
tools:text="Subtitle A" />
</LinearLayout>
<ImageView
android:id="#+id/secondImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_vertical_dots" />
</LinearLayout>
The idea here is to aligh our view with the toolbar's padding. By default, the toolbar sets 16dp padding on start and end.
So, to start with in our view, we set paddingStart and paddingEnd to be 16dp. Now, to adjust vertical padding, we set that to 8dp as it adjusts with the top and below items. Set, the orientation of parent to horizontal.
Then, we add first ImageView and sets its layoutWidth/Height to the values we want.
Then add the LinearLayout that holds the two TextViews and set it's orientation to vertical and layout_width to 0dp and add the two child TextViews.
Then finally add the overflow ImageView and provide the attributes. Since we set the first image and last image dimensions as static values, when the view is drawn, the width is allocated to these first and the remaining of the width goes to the textview container LinearLayout.
If we note at the pre-view attached, there might seem to be a bit more padding at the end. It is due to the dot image src we are assigning to the second image. It doesn't fill the ImageView and hence looks like extra padding. We can adjust this by adjusting the paddingEnd value of our parent LinearLayout.
Please comment if there are any confusions.
See this Image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:layout_marginStart="10dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title A"
android:textSize="20sp"
android:textColor="#000"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtitle A"
android:textSize="17sp"
android:textColor="#000" />
</LinearLayout>
<ImageView
android:layout_width="40dp"
android:padding="13dp"
android:layout_height="match_parent"
android:src="#drawable/ic_menu"/>
</LinearLayout>
I am trying to position my bookImageTo the left by 15dp but when I add paddings to it nothing happens it remains unchanged. My textviews are responsive to changes when paddings are added to it, but I am not sure why my image view is not. Some help would be greatly appreciated.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:orientation="vertical">
<ImageView
android:id="#+id/bookImage"
android:layout_width="170dp"
android:paddingLeft="#dimen/album_title_padding(this is equal to 15dp)"
android:paddingTop="#dimen/album_title_padding"
android:paddingRight="#dimen/album_title_padding"
android:layout_height="170dp" />
<TextView
android:id="#+id/bookTitleTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookImage"
android:paddingLeft="#dimen/album_title_padding"
android:paddingTop="#dimen/album_title_padding"
android:paddingRight="#dimen/album_title_padding"
android:textColor="#424242"
android:textSize="#dimen/album_title" />
<TextView
android:id="#+id/bookAuthorTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookTitleTv"
android:paddingLeft="#dimen/album_title_padding"
android:paddingRight="#dimen/album_title_padding"
android:paddingBottom="#dimen/songs_count_padding_bottom"
android:textSize="#dimen/songs_count"
android:textStyle="italic" />
<TextView
android:id="#+id/overflow"
android:layout_width="#dimen/ic_album_overflow_width"
android:layout_height="#dimen/ic_album_overflow_height"
android:layout_below="#+id/bookAuthorTv"
android:layout_alignBottom="#+id/bookAuthorTv"
android:layout_alignParentEnd="true"
android:textSize="15sp"
android:layout_alignParentRight="true"
android:layout_marginTop="-29dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:layout_marginBottom="0dp"
android:text="#string/vertical_ellipsis"
android:textColor="#color/colorPrimary" />
</LinearLayout>
</LinearLayout>
Based on my understanding about your concern, you only want to put a space on the left specifically for the ImageView only inside the LinearLayout? I tried your code and this is the preview:
Use android:layout_marginLeft="15dp" instead of using paddingLeft. After applying this code, preview looks like this:
Try using
android:layout_marginLeft="#dimen/album_title_padding"
android:layout_marginTop="#dimen/album_title_padding"
android:layout_marginRight="#dimen/album_title_padding"
This is discussed here Padding in ImageView is not Working
Instead of wrap_content for both the linear layout. Do match_parent.
I want my imageview to stay directly to the right of my textview. I can accomplish this by setting toLeftOf in the attributes for TextView. But for really long text strings, I have ellipses set, and after it reaches the width of the layout, it'll push the ImageView off as well.
I can have the ImageView displayed by setting gravity to 1 for TextView, but then the ImageView is anchored to the right. What should I do?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left">
<TextView
android:id="#+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="1"
android:text="MY TEXT TO THE LEFT"
android:layout_toLeftOf="#id/img_button" />
<ImageButton
android:id="#+id/img_button"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="6dp"
android:background="#drawable/some_img"
app:srcCompat="#drawable/ic_edit" />
</LinearLayout>
So w/ setting the weight=1, that hugs the image to the far right, i need it to be dynamic and be to the right of the textview at all times and then when the width of the textview becomes longer than the parent, for the image to not get pushed off screen.
You can use constraintLayout and set your textView width to 0dp (also called match constraint).
The result will cause your textView to drop a line if the is a lot of text.
Here is an example:
<?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="match_parent">
<ImageView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="something"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#+id/textView10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/textView10" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="this is really long text and it wont push the green image because of android:layout_width attribute"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And it will look like this :
I set paddingRight to the size of the image button, inside the textview and I used alignRight on my image button.
And changed the container to RelativeLayout. It works as intended!!
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left">
<TextView
android:id="#+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:paddingRight="22dp"
android:text="MY TEXT TO THE LEFT"
android:layout_toLeftOf="#id/img_button" />
<ImageButton
android:id="#+id/img_button"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="6dp"
android:layout_alignRight="#+id/title_view"
android:background="#drawable/some_img"
app:srcCompat="#drawable/ic_edit" />
</RelativeLayout>
Use LinearLayout with the orientation="horizontal" attribute . Than set the weight_sum = 100 for the LinearLayout , and than for your TextView and ImageView , just place the weight attribute according to what you want . Hope it helps .
I am struggling creating the UI for a list item which should look like this:
I am trying to build a similar layout for my list items like in the picture above. However, I am stuck, because I don't exactly know, how to nest the views so the sell-buttons has the same height as both textviews.
If I use the RelativeLayout than I cannot use the layout_weight attribute anymore which position the views evenly horizontally on the screen.
However, if I use the LinearLayout than I cannot use the relative-attributes like alignTop and so on. I am trying to nest the views in a way so I can achieve this, however I am failing so far... (sry for my poor english skills)
This is what I have so far, however I still cannot get the desired result:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="80dp"
android:padding="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:id="#+id/productname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Google Pixel" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/productname"
tools:text="699$" />
<TextView
android:id="#+id/quantity_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
tools:text="Quantity" />
<TextView
android:id="#+id/quantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/quantity_textview"
android:layout_centerHorizontal="true"
tools:text="31" />
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_alignParentRight="true"
tools:text="SELL"
android:layout_alignParentTop="true" />
</RelativeLayout>
I'd recommend ConstraintLayout. This will allow you to set the top of the button to be constrained to the top of first text view, the bottom of the button to be constrained to the bottom of the second text view, and maintain the even distribution left to right with a horizontal chain.
Here's a an example I just threw together for funsies:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="0dp"
android:text="TextView"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView4"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:text="Google Pixel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintLeft_toLeftOf="#+id/textView2"
app:layout_constraintRight_toRightOf="#+id/textView2"
tools:text="6995" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintLeft_toRightOf="#+id/textView2"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toTopOf="parent"
tools:text="Quantity" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/textView4"
app:layout_constraintRight_toRightOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4"
tools:text="31" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintLeft_toRightOf="#+id/textView4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:text="Sell" />
</android.support.constraint.ConstraintLayout>
This gives you this layout in the preview:
And this is what the preview looks like showing the constraints. You can see the button being constrained to the two views (dashed lines), and the chain across the "Google Pixel" label, the "Quantity" label, and the button that keeps everything evenly distributed.
Note that if you want the button to be smaller to shrink down to match the bottom of the second text view, you have to set the button's minHeight attribute to 0. You'll probably also have to replace the default background of the button if you want pixel-perfect alignment of the top and bottom as the default background drawable has some built-in padding.
Hope that helps!
Try using Frame Layout, with it you will be able to align your views according to your need.
Or you can use a listview with a custom adapter for creating this kind of view. You can refer to this link
http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/
i got this problem while giving negative margin
after giving negative margin i want that red part go below white part, to get shadow of categories on top of red box but as you see the redbox is coming on top
that white part is my relative layout and red part is my custom listview
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dim_10"
android:layout_marginRight="#dimen/dim_10"
android:background="#drawable/stripe_sort"
android:layout_marginTop="#dimen/dim_5"
android:layout_marginBottom="-15dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dim_10"
android:text="Categories"
android:textColor="#ff000000"
android:textSize="13sp"
tools:ignore="HardcodedText" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:checked="true"
android:src="#drawable/sort_downarrow"
android:layout_centerVertical="true"
android:padding="#dimen/dim_15"
android:id="#+id/dropDown_categories"/>
</RelativeLayout>
<com.eminosoft.ebookread.util.ExpandableHeightListView
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_marginLeft="#dimen/dim_12"
android:layout_marginRight="#dimen/dim_12"
android:background="#c03f2f"
android:id="#+id/ListView_Sort_categories"
android:visibility="visible"
android:paddingBottom="#dimen/dim_10"
android:divider="#null"
android:layout_gravity="center_horizontal"
/>
in this i added negative margin bottom to relative layout, i also tried to add negative margin top to my custom list view but still same result , parent of these both layouts is a linear layout
how can i make that listview go below relativelayout?
<RelativeLayout
android:id="#+id/one"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.eminosoft.ebookread.util.ExpandableHeightListView
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_marginLeft="#dimen/dim_12"
android:layout_marginRight="#dimen/dim_12"
android:layout_marginTop="-15dp"
android:layout_below="#+id/partone"
android:background="#c03f2f"
android:id="#+id/ListView_Sort_categories"
android:visibility="visible"
android:paddingBottom="#dimen/dim_10"
android:divider="#null"
android:layout_gravity="center_horizontal"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dim_10"
android:layout_marginRight="#dimen/dim_10"
android:background="#drawable/stripe_sort"
android:layout_marginTop="#dimen/dim_5"
android:id="#+id/partone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dim_10"
android:text="Categories"
android:textColor="#ff000000"
android:textSize="13sp"
tools:ignore="HardcodedText" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:checked="true"
android:src="#drawable/sort_downarrow"
android:layout_centerVertical="true"
android:padding="#dimen/dim_15"
android:id="#+id/dropDown_categories"/>
</RelativeLayout>
</RelativeLayout>
You can try this code,basically we put your layouts inside another relative layout