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>

ImageViews Into Rounded LinearLayout

I have some imageview in to this rounded LinearLayout. here is my simple code:
<LinearLayout
android:layout_width="128dp"
android:layout_height="128dp"
android:id="#+id/point_image_table1"
android:orientation="vertical"
android:drawable="#drawable/image_view_style"
android:layout_below="#+id/repoint_p_name"
android:weightSum="4">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/imageView61"
android:layout_marginBottom="1dp"
android:src="#color/realRed"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageView71"
android:layout_marginRight="1dp"
android:layout_marginEnd="1dp"
android:scaleType="centerCrop"
android:src="#drawable/pinpoint_logo_large"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageView51"
android:scaleType="centerCrop"
android:src="#drawable/pinpoint_logo_large"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="1dp"
android:layout_marginStart="1dp"
android:scaleType="centerCrop"
android:id="#+id/imageView81"
android:src="#drawable/pinpoint_logo_large"/>
</LinearLayout>
but Images corner covered the LinearLayout corner and finally border if LinearLayout has'nt seen.
how can I fix it? i need to set some imageview in to linear layout and also i need to set border and rounded corner to linearlayout.
Thanks.
Edit: I want to have something like this( four images in to the rounded corner layout):

I suggest you to use cardview with multiple images it will be easy to get collage view,try this way
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
card_view:cardCornerRadius="10dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="300dp">
<LinearLayout
android:id="#+id/left_container"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="150dp"
android:layout_height="300dp"
android:orientation="vertical">
<ImageView
android:id="#+id/dog"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/mmm" />
<ImageView
android:id="#+id/bottom_left_image"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:background="#drawable/mmm" />
</LinearLayout>
<LinearLayout
android:id="#+id/right_container"
android:layout_width="150dp"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/left_container"
android:orientation="vertical">
<ImageView
android:id="#+id/top_right_image"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/mmm" />
<ImageView
android:id="#+id/bottom_right_image"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="0"
android:background="#drawable/mmm" />
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
OUPUT

First you want to create a simple drawable and use this code. You can change the width or the stroke and colour to your choosing. The radius can also be simplified to android:radius=dpValue.
?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>
Once you've created this you can then assign it as the background of your imageView with:
android:background="#drawable/yourDrawableName"
I'd maybe try making your image views wrap_content. You should also try setting a 0dp on the height of your imageviews.
Hope this helps.

Is there a way to set an ImageButton to always be 1/4 of the parent's screen height and 1/3 of the parent screen width?

I'm trying to have 3 ImageButtons at the bottom of my app(1/4 of the screen's height and 1/3 of the screen's width)and I wanted the imageButtons to be able to resize depending on the device, without hardcoding the sizes.
I have tried putting the three ImageButtons inside a linear layout and use layout_weight=1 for all three of them, but the Images didn't actually scale down, it just cropped a portion of the image to fit all three ImageButtons in there.
Thanks so much!

yes you can first find the screen width and height as follow-
int width = getApplicationContext().getResources().getDisplayMetrics().widthPixels;
int height = getApplicationContext().getResources().getDisplayMetrics().heightPixels;
now convert your pixels in dp using this tutorial
then set your button height and width dynamically as-
ViewGroup.LayoutParams params = myButton.getLayoutParams();
//Button new width
params.width = 400;
myButton.setLayoutParams(params);

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:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/RLMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCFFFFFF"
android:orientation="vertical"
android:weightSum="4" >
<LinearLayout
android:id="#+id/LL1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="horizontal" >
<!-- //...Your Other Layout Views here -->
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="9" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:src="#FF0000" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:src="#FF0000" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:src="#FF0000" />
</LinearLayout>
</LinearLayout>

Android add image on top of another imageView as image below in Layout XML

How to create a android Layout where you add a smaller imageView on Top of another Image View. but only half way as the image below.
Thank.
this is the sample I try but it does not work:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageCover"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/big_cover_img" />
<ImageView
android:id="#+id/imageProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#+id/imageCover"
android:layout_centerHorizontal="true"
android:src="#drawable/profile_pic" />
<!-- android:layout_alignBottom="#+id/imageCover" -->
</RelativeLayout>

Use FrameLayout as parent and LinearLayout as child with weight property :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageCover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/big_cover_img" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
</FrameLayout>

Set the second view to be below the first then set top margin of the bottom view to -50 dp or whatever value you want it to overlap

How to make layout to be 80% of the width of the screen?

How can I make some layout to be for example 80% or 90% of the width of the screen, no matter what is the screen size or DPI? I tried with " but I get 80% of the height then.
EDIT:
<?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:orientation="vertical"
android:background="#drawable/background" >
<Button
android:id="#+id/bNivoi1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="80dp"
android:background="#drawable/button_nivoi_back" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvOpis15Nivoa"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:textSize="15sp"
android:layout_weight="0.8"
android:text="text" />
</LinearLayout>
</LinearLayout>
I only need textview to be 80% of the screen, not the rest of the activity.

android:layout_weight is based on the android:orientation of your LinearLayout - if you want your layout to take up 80% of the width, you need a LinearLayout with an android:orientation="horizontal"
<LinearLayout
android:id="#+id/your_outer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" > <!-- note that vertical is the default -->
<!-- Other elements here -->
<LinearLayout
android:id="#+id/eighty_percent_layout_holder
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<View
android:id="#+id/your_eighty_percent_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8" />
</LinearLayout>
<!-- Other elements here -->
</LinearLayout>