Develop Reference

How to get pictures to actually respect their bounds in Android?

I'm trying to make a layout where there a lot of different pictures each taking the same amount of space. Given that i wanted them to appear in a grid i used a TableLayout.
Make cells same width and height to fill the table
According to this question it's possible to have each cell take the same width and height by adjusting the weight values.
So this is what i have in my xml.
<?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"
tools:context=".MainActivity">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="0sp"
android:layout_weight="2">
<ImageButton
android:id="#+id/imageButton10"
android:layout_height="match_parent"
android:layout_weight="2"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/janice" />
<ImageButton
android:id="#+id/imageButton13"
android:layout_height="match_parent"
android:layout_weight="2"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/phoebe" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0sp"
android:layout_weight="2">
<ImageButton
android:id="#+id/imageButton12"
android:layout_height="match_parent"
android:layout_weight="2"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/monica" />
<ImageButton
android:id="#+id/imageButton11"
android:layout_height="match_parent"
android:layout_weight="2"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/joey" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0sp"
android:layout_weight="2">
<ImageButton
android:id="#+id/imageButton9"
android:layout_height="match_parent"
android:layout_weight="2"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/chandler" />
<ImageButton
android:id="#+id/imageButton14"
android:layout_height="match_parent"
android:layout_weight="2"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/ross" />
</TableRow>
</TableLayout>
</android.support.constraint.ConstraintLayout>
What i expected is that since each TableRow has the same amount of weight, the height of the screen should be evenly divided in 3. And then since each image has the same amount of weight within each TableRow, each image should take half the width of each TableRow, giving a nice grid appearence.
Something like this:
What actually happens is this:
I'm perfectly aware that these are images of different dimensions but it should be possible to constrain them to their bounds.
And yeah there are a lot of questions where people ask how to make the images not take more space than intended like here: ImageView taking too much vertical space
But the answer is always fixing the scale or setting adjustViewBounds to true which i've already done. So my question is,
How can i fix this?

I figured out the solution. I think that trying to restrict the height of each TableRow using layout_weight is the wrong way of thinking in the first place. According to documentation (Emphasis mine):
The children of a TableLayout cannot specify the layout_width
attribute. Width is always MATCH_PARENT. However, the layout_height
attribute can be defined by a child; default value is
ViewGroup.LayoutParams.WRAP_CONTENT. If the child is a TableRow,
then the height is always ViewGroup.LayoutParams.WRAP_CONTENT.
Since the height can't be restricted the images can take as much space as they want, depending on their dimensions.
We can actually restrict height using LinearLayout. Using a vertical LinearLayout with three Horizontal LinearLayouts inside it we can give the same space to each image.
Each horizontal LinearLayout gets 1/3 of the height and each picture inside the horizontal LinearLayout gets 1/2 of the width.
<?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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerInside"
app:srcCompat="#drawable/rachel" />
<ImageButton
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerInside"
app:srcCompat="#drawable/phoebe" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
>
<ImageButton
android:id="#+id/imageButton15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerInside"
app:srcCompat="#drawable/chandler" />
<ImageButton
android:id="#+id/imageButton17"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerInside"
app:srcCompat="#drawable/monica" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1">
<ImageButton
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerInside"
app:srcCompat="#drawable/joey" />
<ImageButton
android:id="#+id/imageButton16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerInside"
app:srcCompat="#drawable/janice" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

GridView items overlapping each other

Please check my attached image. I am facing this issue when the product name is more than one line. I am confused what should i do now.
In my gridview i am facing this issue. How can i solve this? Here is my gridview xml code.
<GridView
android:id="#+id/productGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:verticalSpacing="4dp"
android:horizontalSpacing="3dp"
android:focusable="true"
android:stretchMode="columnWidth"
android:fitsSystemWindows="true">
</GridView>
Here is my grid item xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardPreventCornerOverlap="true"
app:contentPadding="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_productImage"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/avatar"/>
<TextView
android:id="#+id/tv_productName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:text="Bread Trimmer"
android:textSize="17sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp">
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:src="#drawable/coin"/>
<TextView
android:id="#+id/tv_productPrice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1049999999999990"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:textColor="#FAAD18"
android:textSize="17sp"/>
</LinearLayout>
<TextView
android:id="#+id/btn_buy"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:layout_height="wrap_content"
android:text="Get Now"
android:textColor="#FFFFFF"
android:focusable="false"
android:textSize="16sp"
android:gravity="center"
android:background="#drawable/buy_background"
android:textStyle="bold"
android:textAllCaps="false"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
This is single item. I am confused where did i made mistake. Please help. Thanks.

solution 1
you can add this attribute to your tv_productName
android:ellipsize="end"
android:singleLine="true"
android:maxLines="1"
this lines add ... to end of your TextView text
solution 2
use this library for your tv_productName TextView
autofittextview
this library fit your TextView size to prevent overlaping
solution 3
this is a bad solution but it work you can add margin to your parent layout(RelativeLayout)
android:layout_margin="5dp"

I think the problem is. Your text view. The name of the product. As the product name increases the whole text view get divided and spread vertically. Like Rhinestones Rose watch the watch is in the vertical position related to the upper text which is creating the issue. I guess. Try to use small text and check if that's the issue or not and if that's the issue you can easily be able to solve it I guess and plz let me know if it works. Thanks .

Linear Layout using weight to adapt screen size

I am trying to use a linear layout as a row for my recyclerView/adapter, basically my row has 3 elements: an image, a textView and a checkButton with some text.
What I want is the image occupying like 50% of the width plus 40 height, so I set the weight of the image to 2.
Next I need to have another 50% layout that has the other 2 elements, and I want at the top right of the image the textView and at bottom the checkbox.
I already implemented this before with relative layouts, but the content didn't adapt to different devices, so I tried the linear layout and the weight property.
So this is what I have at the moment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:contentDescription="photo " />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/plantName"
android:layout_below="#+id/plantName"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
Here is the image of what I have at the moment:image
As I explained, I need the image to occupy the 50% width and the green text to be side on side with the photo at the right.
The checkbox must be below, any help??
Thanks

Try this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_weight="0.5"
android:contentDescription="photo "
android:src="#drawable/placeholder" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<TextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/colorBlack"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginTop="5dp"
android:text="CheckBox"
android:textSize="15dp" />
</RelativeLayout>
</LinearLayout>

To me, it would have to be set with a Relative layout. Then for the elements to "adapt to different devices" you would need to set android:layout_width and height to wrap_content or fill_parent depending on what you want to achieve.

Set image weight to 50% which is .5, anything you add on that layout will be horizontal, so to solve that just add another layout at .5 weight and set it vertical.

You can try something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="photo " />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
</LinearLayout>

TextView is getting cut off in a LinearLayout

I am trying to add two different textviews with different heights like so:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/single_margin"
android:layout_marginLeft="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:layout_marginTop="#dimen/single_margin"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginRight="28dp"
android:layout_weight="3"
android:fontFamily="sans-serif-light"
android:gravity="center_vertical"
android:singleLine="false"
android:text="This is example text view that will mess up the height!"
android:textColor="#color/dark_blue"
android:textSize="#dimen/ad_title_text" />
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" /> </LinearLayout>
And the result is this:
(Don't mind the drop shadow above. I cropped the image and the shadow is from the actionbar)
The height of the linear layout is determined by the smaller textview instead of the bigger one. Why? And how do I go about fixing it? Thanks in advance

Make textview's height wrap_content it will solve the issue
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="wrap_content"

try this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/single_margin"
android:layout_marginLeft="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:layout_marginTop="#dimen/single_margin"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginRight="28dp"
android:layout_weight="3"
android:fontFamily="sans-serif-light"
android:gravity="center_vertical"
android:singleLine="false"
android:text="This is example text view that will mess up the height!"
android:textColor="#color/dark_blue"
android:textSize="#dimen/ad_title_text" />
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" />
</LinearLayout>
If this does not solve your problem then give your dimen.xml file.
Hope this will be helpful...thanks

You want to make the left textview (with ID newsfeed_ad_title) not cut right? Change the android:layout_height to "wrap_content"

Try to set match_parent newsfeed_ad_info_button TextView :
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" />
Note : Also use dp instead px :
http://developer.android.com/guide/practices/screens_support.html

The problem is that the first TextView (the one with ID newsfeed_ad_title) has an height of match_parent. This means that first the LinearLayout will compute its preferred height, and then the TextView will occupy exactly that height.
Giving a wrap_content to the first TextView will solve the issue, because this way the LinearLayout will first ask both children to compute their desired height,and then set his own accordingly.
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="wrap_content"
... //the rest is unmodified

Doesn't wrap_content adjust to the size of fonts?

My understanding was that the wrap_content take as much space as needed by its contents. But doesn’t this apply to TextViews as well?
In the following layout why when I change the font of TextView with id real_status to 24 the text is partially hidden? I was expecting that due to the wrap content the enclosing TextView it would wrap around the 24 sp and display the text fine. It is fine with 18sp.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<TextView
android:id="#+id/real_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/full_display_name"
android:gravity="center_vertical"
android:textSize="24sp"
android:textStyle="bold"
tools:text="Active"
/>
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/real_status"
android:gravity="center_vertical"
android:text="The real user status:"
android:textSize="16sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/full_display_name"
android:gravity="right"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:visibility="gone"
tools:text="Just a text view"
tools:visibility="visible" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
With 18sp:
With 24sp:
UPDATE:
Following the answers I removed the layout top/bottom and the font adjusted but now I see that the TextView overlaps with the next widget. Adding red background is more visible.
I thought that by “growning” the TextView the rest would move down and not overlap

whenever You suffering from this type of problem You can LiniarLayout is best if You understand it very well. because of wrap_content and match_parent is simple to handle in LiniarLayout.
lets understand it.(For Your case)..
1.take two LiniarLayout(parent have verticle orientation..)
i give Id LL1(horizontal) and id LL2 for your case
2.in first layout two textview #+id/full_display_name and #+id/real_status
in real_status have match_parent in width so it easy to divide parent(fill_parent) and set its android:gravity="right"
3.LiniarLayout as it is without relate
See belove XML code...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The real user status:"
android:textSize="16sp" />
<TextView
android:id="#+id/real_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Active"
android:textSize="26sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/real_status"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Just a text view" />
</LinearLayout>
</LinearLayout>
It will help you Your GUI give bestView in All devices with any size of text
Hope it help You

Remove these two line will fix your problem
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignTop="#+id/full_display_name"

Yes the wrap_content will take as much space needed by the view. It will also applied to the TextView also. The problem here is you written android:layout_alignBottom="#+id/full_display_name" to real_status text view. This attribute is overriding the wrap_content So remove allignBottom attribute from the text view.
UPDATE
For your bottom linear layout update the line
android:layout_below="#+id/full_display_name"
with
android:layout_below="#+id/real_status"