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"
Related
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>
I've tried several things but my image always appears as a proportionally scaled down version of itself. I want it to take up the full width available to it and for it to bleed over the image boundaries height-wise.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/messageImageLayout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/messageImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/test"
android:visibility="gone" />
</LinearLayout>
How it looks now:
What I want:
Replace android:scaleType="fitXY" with android:scaleType="centerCrop" instead
Please I have problem with size in textView
I have .xml code, where I use linear/horizontal/frame layout and I have in layout some object (textview) and have same text in textviews.
I need switch text size according to Phone display.
but if I put 130dp is not good for small display.
little of my code
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="88"
android:id="#+id/hlc"
android:textSize="130dp"
android:textIsSelectable="false"
android:gravity="end"
android:textStyle="bold" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:layout_weight="10">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="°"
android:id="#+id/textView15"
android:textSize="#android:dimen/notification_large_icon_width"
android:textIsSelectable="false"
android:textStyle="bold"
android:layout_weight="9"
android:textAlignment="viewStart" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="8"
android:id="#+id/hld"
android:textSize= "#android:dimen/notification_large_icon_width"
android:textStyle="bold"
android:textAlignment="viewStart"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
if i use #android:dimen/thumbnail_width it's too big for my formated display
I need to fill in framelayput with text in textview.
I can't put image here :(
... and how are used values-small, values-large, etc ? example please. example declarate and example use in xml.
Thanks.
What you can do is create different dimension folder for different size with different sp (better to use sp than dp for text size).
check this documentation for better understatement
and also check this
I'm trying to resize the images and increase the icon size however I have added them to a LinearLayout and each 5 icons share the weight. They fit by themselves thus making it impossible for me to increase their icon size/height/width.
A Snapshot:
Here's my XML:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:orientation="horizontal"
android:weightSum="5">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/feed_blue" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/compass" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/circle_blue" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/heart_beat" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/user_icon_female" />
</LinearLayout>
I need to increase/decrease the size of my icons as I wish but the Weight property is probably limiting that ability. How can I get that done folks?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="horizontal"
android:weightSum="5">
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/feed_blue" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/compass" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/circle_blue" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/heart_beat" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/user_icon_female" />
</LinearLayout>
In this situation they all have %20 percent of total width you can change width easily by changing weight. And also you can change width and height using padding property.
For normal app you need images pack for all android resources like mipmap-hdpi, mipmap-mdpi, mipmap-nodpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi and you should not change image size programmatically, if you have not image pack try to play vs android:scaleType in all buttons for example android:scaleType="centerCrop"
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>