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>

How to add a number and a frame after textview

I want to add a framed number (#+id/number_ayat) right after the end of the text(#+id/isi_ayat), but it can't if I use textview. So how can I add numbers and frames after the end of the text?
This is my code in custom_isi_ayat.xml
<?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="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp"
>
<LinearLayout
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:background="#drawable/frame"
android:gravity="center" />
<TextView
android:gravity="left"
android:textAlignment="textStart"
android:id="#+id/isi_ayat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30dp" />
</LinearLayout>
<TextView
android:id="#+id/translate_bahasa"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:paddingLeft="20dp"
android:id="#+id/terjemahan"
android:textStyle="italic"
android:lineSpacingMultiplier="0.7"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
in capture result :in capture result :
and I want to result is : and I want to result is
Whether this can be solved with java?
Thanks in advance for help with my problem !

I have modeled the layout in Android Studio. I had to force rtl on my layout so there may be some things to correct. The first that I sugest is changing the width of "#+id/isi_ayat" as explained below.
The changes I did were the following:
In the LinearLayout I set gravity to end for the textviews to go to the right.
For android:id="#+id/isi_ayat", I set gravity and textAlignment to end so the text aligns to the end of the TextView, and also set layout_gravity to end and center_vertical for the TextView to also go to the end. And also changed the width from match_parent to wrap_content.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:gravity="center"
tools:text="10"/>
<TextView
android:layout_gravity="end|center_vertical"
android:gravity="end"
android:textAlignment="gravity"
android:id="#+id/isi_ayat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
tools:text="lorem ipsum dolo asd"/>
</LinearLayout>
EDIT I
I removed android:layout_marginRight="10dp" from android:id="#+id/number_ayat".
As you can see in the picture below. There is no more space between the two textviews.
This is the closest you can get without making the number's textview smaller.
EDIT II
I think I understood, if there are more lines the number must be after the last line.
Change android:gravity="end" to android:gravity="end|bottom" in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">

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>

Aligning my views to the right

Alright, what I'm trying to do is: setting an imageview to be on the right and the 3 textviews will be located on the left relative to the image. With the following XML code, the imageview is on the left and the 3 textviews are located in the right of the imageview.
Here's the look of it now:
As I said, I want the image to be aligned on the right side, and the 3 textviews on the left of the image.
So here's the current xml: http://pastebin.com/r68S1QKv
If I change the LinearLayout to RelativeLayout (so I can use alignParentRight = true), the textviews stack on each other and are not displayed vertically.
Suggestions, please?
EDIT: Looks like I haven't clarify the wanted look, here's an illustration of what I want:

Use This Code.Use RelativeLayout as parent & assign android:layout_alignParentRight="true" to his child this set your all view to right side.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_marginRight="20dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/row_title"
style="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey1" />
<TextView
android:id="#+id/row_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey2" />
<TextView
android:id="#+id/row_postcode_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey3" />
</LinearLayout>
<ImageView
android:id="#+id/icon"
android:layout_marginRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>

What you can do - is to make outer RelativeLayout, make you image alignParentRight=true, put text views in a separate linear layout (with vertical orientation), align your LinearLayout with text views to the left edge of the image view (layout_toLeftOf="#+id/img_id").
Here is what I manage to do following this approach:
<?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"
android:orientation="horizontal">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#+id/img"
android:orientation="vertical"
android:id="#+id/text_container">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text1"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text2"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text3"/>
</LinearLayout>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/icon"
android:id="#+id/img"/>
</RelativeLayout>

scaled ImageView placement in RelativeLayout

I need to place three elements inside RelativeLayout:
scaled image in ImageView on the right side with the top and bottom margins
TextEdit in the left top corner
LinearLayout in the rest of the space (below the title and to the left of the image)
The problem happens when the image is scaled in ImageView. I want it fits the entire parent's height considering margins. After scaling uniformly to fit the parent's height I want ImageView wraps the image's width. But as the result there are some unfilled horizontal spaces in ImageView.
The problem looks similar to one solved here. But in my case all tests with android:adjustViewBounds and android:scaleTypes didn't work. I suppose there is a problem because of margins and RelativeLayout use.
Here is the extract from my xml file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#id/albums_slideshow"
android:adjustViewBounds="true"
android:layout_marginTop="71.33dp"
android:layout_marginBottom="88.67dp"
android:scaleType="centerInside"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/music_img_album_noimage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/music_module_screen_title_margin_left"
android:layout_marginTop="#dimen/music_module_screen_title_margin_top"
android:text="#string/music_string"
style="#style/ScreenTitleFont"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignTop="#id/albums_slideshow"
android:layout_toLeftOf="#id/albums_slideshow">
...
</LinearLayout>
</RelativeLayout>
Has anyone met this problem and found the answer?

this is what i have come up with
and this is the xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="music string" android:background="#android:color/white"
/>
<LinearLayout android:id="#+id/albums_list"
android:layout_width="wrap_content" android:layout_height="fill_parent"
android:layout_alignParentLeft="true" android:layout_below="#id/album_text"
android:layout_marginTop="71.33dp"
android:orientation="vertical" android:background="#android:color/white"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="albums list"
/>
</LinearLayout>
<ImageView android:id="#+id/albums_slideshow"
android:layout_height="fill_parent" android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="88.67dp"
android:layout_alignTop="#id/albums_list"
android:scaleType="centerInside"
android:layout_centerInParent="true" android:background="#android:color/darker_gray"
android:src="#drawable/icon"/>
</RelativeLayout>
let me know for improvements