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>

My XML File does not display anything

I dont understand Why nothing appears on the display. I can see the Button and the ImageView (zauberer) but otherwise nothing.. can someone help me?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/halbtransparent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/dialoghintergrund"
android:id="#+id/willdialog"
android:layout_margin="20dp" />
<ImageView
android:scaleType="fitXY"
android:id="#+id/zauberer"
android:layout_marginTop="40dp"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
app:srcCompat="#drawable/zaubererdialoghg"
android:layout_height="55dp"
android:layout_width="43dp" />
<ImageButton
android:id="#+id/btn_verstanden"
android:scaleType="fitXY"
android:layout_width="130dp"
android:layout_marginTop="410dp"
android:layout_gravity="center_horizontal"
android:background="#00000000"
android:layout_height="50dp"
app:srcCompat="#drawable/btn_verstanden"/>

Couple of suggestion:
fill_parent is deprecated use match_parent
use android:src instead of app:srcCompat
you are using static Dp values android:layout_marginTop="410dp" which will be varied in different devices according to pixel density.
use layout_weight , weightSum , adJustViewBounds , Gravity to align your views..
Best practice to use different size drawable iamges in your mdpi , hdpi , xhdpi etc folder.
Try this:
<LinearLayout 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/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="#+id/willdialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/zauberer"
android:layout_width="43dp"
android:layout_height="55dp"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="40dp"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/btn_verstanden"
android:layout_width="130dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="100dp"
android:background="#00000000"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
</LinearLayout>

Nothing is displayed in Activity or Android Studio? Have you closed the Framelayout tag? try to use Relativelayout. Make sure you have setContentView in your Activity.

This happens because child layouts in FrameLayout overlap each other and the child written at the bottom is drawn over the others. Use LinearLayout with orientation set to vertical to resolve the problem.

How to fill RecyclerView (StaggeredGridLayoutManager) with images in correct scale type?

I got such issue with my RecyclerView
I need to present to user images that I downloaded with help of picasso lib from web to my RecyclerView. Eventually it looks like this
As you can see I need to scratch my images, but in proper aspect ratio of course.
I went to my XML file and set attribute in my ImageView android:scaleType="fitXY"
now my ImageView looks like this
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
and here is result that I got
as you can see now image fill all available space, but them doesn't scratch with propriety aspect ratio. Images scratch width more than height and does't looks nice...
Also here is my XML file
<?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:paddingBottom="3dp"
android:paddingEnd="3dp"
android:paddingStart="3dp"
android:paddingTop="3dp"
>
<LinearLayout
android:id="#+id/cardMainActivityLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/rippleInbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mrl_rippleColor="#color/ntz_background_light_grey"
app:mrl_rippleOverlay="true"
>
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
</com.balysv.materialripple.MaterialRippleLayout>
<RelativeLayout
android:id="#+id/rlCardMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:padding="4dp"
>
<TextView
android:id="#+id/tvBrandName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvBrandName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvPreviousPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvItemName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvDivider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvPreviousPrice"
android:layout_toEndOf="#+id/tvPreviousPrice"
android:text=" / "
android:textSize="10dp"
android:visibility="gone"
/>
<TextView
android:id="#+id/tvPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvDivider"
android:layout_toEndOf="#+id/tvDivider"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<Button
android:id="#+id/bAction"
android:layout_width="70dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:textSize="8dp"
/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
What am I doing wrong?
Edit1
There is a result of android:scaleType="centerCrop" attributes
It is also not so nice when women don't have head))
Edit2
There is result of android:scaleType="centerInside"

To answer your question, please use centerCrop to center the image absolute to it's parent. Also add this attribute, android:adjustViewBounds="true". With this the aspect ratio of the image will be preserved.

fitXY uses FILL which is described as "Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src" in the Android Documentation.
You should use centerInside to center, fit and scale while keeping the aspect ratio

Alright the problem is that your layout does not respect the bounds of your image.To remedy this, wrap the image-view in a separate parent layout , add a parent weight to the layout it self with layout_weight="1".Then set the width relative to the layout with android:layout_width="0px", to avoid tearing and proper bounds coordination set android:adjustViewBounds="true". To center and crop the image at it's center use android:scaleType="centerCrop".

ImageView leaves a lot of free space

I need to make a table with pictures. So I decided to do it with TableLayout (instead of TableRow i used LinearLayout cause of weightSum).
There is a code:
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:weightSum="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/card_shirt"
android:id="#+id/imageView"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/card_shirt"
android:id="#+id/imageView2"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/card_shirt"
android:id="#+id/imageView3"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:weightSum="3"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/card_shirt"
android:id="#+id/imageView4"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/card_shirt"
android:id="#+id/imageView5"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/card_shirt"
android:id="#+id/imageView6"/>
</LinearLayout>
</TableLayout>
It's not a whole code, in my app i do it dynamically, but it doesn't change the essense.
So the issue is on a picture below:
What is the free space above and below each picture? How can i get rid of it?

It's happen because of ImageView auto detect the width and height of real image
However , the width is not enough, so the ImageView auto resize the image to fit for it's width
and that's why their height is still there, and display as free space as you mention
How to solve
make sure you add
android:adjustViewBounds="true"
in ImageView
or just clicked at this checkbox

You can also to set
android:scaleType="centerCrop"

Android Layout with Images and Compatibility

I develop a photo album app. I would like to place photos on screen like the following layout :
For this purpose, I decided to place a vertical linear layout at outside of all. Then place RelativeLayouts for each row. In each RelativeLayouts in a row, I put two relative layouts to contain the ImageViews. In each RelativeLayout I size them with proper "dp" as I draw at the image above.
My question is, can it be the same view in different phones with different resolutions ? If so, what would be the proper approach to have the view that I show above ?
Thanks

Use linear layout completely and make sure you know what layout_weight does.
refer the following
http://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight

Try this...its only for 1 row, but you get the idea..this is inside vertical linear layout..
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:src="#drawable/ic_launcher"
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>