I'm trying to build an android application and I've created a screen with a table layout and added to the first table row an image view and two large texts, to the second row I've added one button.
When I change the text of the button it automatically changes the size of the image view above to match the size of the button.
Here is the code:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".ChildInfoActivity" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:contentDescription="#string/child_info_image_descreption" />
<TextView
android:id="#+id/childInfoNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name_text_view"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/childInfoHasArrivedTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/has_arrived_text_view"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/more_info_button"
android:layout_weight="1" />
</TableRow>
why is that?
The reason is because when using TableLayout, each TableRow will have same size for each same column. Since the ImageView and Button are both on column 0, everything that affects Button's width will also affect ImageView's width.
If you permit the Button to span over many columns, add android:layout_span="2" to the Button. Else, use different layout, such as LinearLayout or RelativeLayout.
Because your row item, which holds imageView and textViews, has "wrap_content" value as height. So probably when your texts' heights getting bigger than your imageviews it increases its parent height as well.
You may try to put imageView and textViews inside a relativeLayout and wrap textViews with imageViews height and then put that relativeLayout into row item. It will be nested, but i think still it is better than given exact size because that way it wouldn't be seen so good on some devices...
Your buttons have
android:layout_width="wrap_content". If you set
android:layout_width="100dp"
then your width won't be dynamic.
remove android:layout_gravity="center_vertical" and as u have given added android:layout_weight="1" to button add this line to other components also
Related
I have a TextView and ImageView in a ListView row, positioned next to each other. However, the ImageView doesn't show up at all, and doesn't register clicks either. This is the XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:text="text"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</RelativeLayout>
The problem seems to lie in the layout_toRightOf line, if I remove it, the ImageView is shown, but in the wrong place. But I don't understand why it's causing a problem. What am I missing?
The issue is that the TextView is pushing the ImageView off the screen.
You can fix this using a LinearLayout and android:layout_weight
eg:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:text="text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</LinearLayout>
More info on the layout_weight attribute:
This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.
For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.
You need to use LinearLayout with weight.. if you set fixed width and the size of the phone is small, it will either stretch out of the screen.
//do linearlayout with orientation horizontal
<LinearLayout
...
orientation = "horizontal"
...
>
<TextView
....
android:layout_width="0dp"
android:layout_weight="1"
...
/>
<Button
....
android:layout_width="wrap_content"
...
/>
</LinearLayout>
Play with android:layout_weight, you will understand
I am trying to place a LinearLayout inside the second column of a parent GridLayout.I want a textView in the first column and the linear layout in the second.
The problem is that when I set the LinearLayout's with property to match_parent, the linear layout expands with a width greater than the remaining space in the column and it and the GridLayoutoverflow the screen as shown below in the picture.
I am assuming the the LinearLayout's parent is not the GridLayout's second column therefore the match_parent key sets the width to the wisth of the whole screen(also applies to height with a property of match_parent)
I am looking for a way that the column becomes the LinearLayout's parent so that it fills the rest of the screen in front of the textview
and I want to use the grid layout on purpose because of its advantages in design.I am also new to android so any help would be appriciated.
here's the layout code just in case :
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:columnCount="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView3" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"></LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView4" />
</GridLayout>
Ok so the problem was that I was trying to fill the remaining horizontal space with android:layout_width and setting it to match_parent.The problem with this approach is that with match parent, I am setting the width of the layout with its parent's(the grid layout) width which is as big as the whole screen, therefore it overflows the devices screen.
I should have set android:layout_gravity to fill_horizontal in order to achieve my goal
In a layout resource XML, I have 3 RelativeLayout(s) which are inside a main RelativeLayout. The view will be shown vertically. These 3 RelativeLayout() are set next to each other, and I want them to fill the whole screen, doesnt matter what will be the screen size. My, layout view:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backg"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/top_mr_image"
android:src="#drawable/temp" />
<RelativeLayout
android:id="#+id/r1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="10dp"
android:background="#drawable/r1bg"
android:layout_weight="1"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:layout_marginTop="39dp"
android:text="S"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView1"
android:layout_marginLeft="#dimen/txt_mr_right"
android:layout_marginRight="#dimen/txt_mr_right"
android:text="T"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/r2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r1"
android:layout_toRightOf="#+id/r1"
android:layout_weight="1" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/r3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/r2"
android:layout_toRightOf="#+id/r2"
android:layout_weight="1" >
</RelativeLayout>
I set weight=1 and layout_width=0dp for each relativeLayout and this technique works with buttons, I thought the same will be with relativeLayout, seems my thoughts were wrong. Any idea?
UPD1: I have added an image of what I would like to have
RelativeLayout does not pay attention to android:layout_weight. (That's a property of LinearLayout.LayoutParams, but not of RelativeLayout.LayoutParams.)
You should be able to get the layout you want with a much simpler view hierarchy. It's not clear what you are trying to do, since the last two RelativeLayouts are empty. If you need a purely vertical organization, I'd suggest using LinearLayout instead of RelativeLayout.
EDIT Based on your edit, it looks like you want a horizontal layout of three compound views, each one clickable. I think something like the following will work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- First column -->
<LinearLayout
android:id="#+id/firstColumn"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="..." />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="text 1"
. . . />
</LinearLayout>
<!-- Second column -->
<LinearLayout . . . >
. . .
</LinearLayout>
</LinearLayout>
If the contents of the buttons aren't correct, you can replace the second-level LinearLayout views with RelativeLayout if that helps organize the layout better.
RelativeLayouts do not support weight. You need to use a LinearLayout as a parent container if you want to use weights.
Solution is very simple. I have been looking for weight distribution in relative layout.
It's a small trick for all these kind situations.
Use LinearLayout with android:orientation="horizontal"
You can use Horizontally oriented LinearLayout Manager in the Recycler View, and place each RelativeLayout in each item, of its Adapter.
The Link: How to build a Horizontal ListView with RecyclerView?
If your RelativeLayouts are set to a fixed width and height, that is to the size of the Screen, that you can get from DisplayMatrics, that will be OK.
The Link: Get Screen width and height
If the contents of your RelativeLayouts are different, then you can use getItemViewType() method.
Please see: How to create RecyclerView with multiple view type?
Happy Coding :-)
I want to create a simple flag game. You are given the country name and you must then guess the correct flag. On my play screen, i have a TextView and a TableLayout with 4 images in 2 rows. These images are the same dimension.
The problem is: The TextView "shrinks" the second TableRow, so that the images no longer are equally big. If I remove the TextView, everything is fine.
I tried to debug in Hierachy Viewer, which told me that the property mMeasuredHeight of the second TableRow had a value of a very high value (16777526)
My play activity xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="4dp"
tools:context=".PlayTimeModeActivity" >
<TextView
android:id="#+id/tvFlagName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Hello"
android:textSize="50dp" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal" >
<TableRow>
<ImageView
android:id="#+id/ivFlag1"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag1" />
<ImageView
android:id="#+id/ivFlag2"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag2" />
</TableRow>
<TableRow>
<ImageView
android:id="#+id/ivFlag3"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag3" />
<ImageView
android:id="#+id/ivFlag4"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag4" />
</TableRow>
</TableLayout>
</LinearLayout>
Do you need additional info?
I wonder if this layout of images can be done better?
Edit:
The images are pretty high resolution
Try this:
Make the root of your layout (LinearLayout) have the following attributes android:layout_width="match_parent" and android:layout_height="match_parent"
Set your TableLayout to have android:layout_height="wrap_content". This will make it take up any remaining space on the screen after the text has been placed, rather than squashing the Hello text.
For each TableRow add android:layout_weight="1". This will make each row take up an even amount of space in the TableLayout.
For each ImageView in the table, set android:layout_weight="1". Again, this will set an even amount of space for each of your flags.
The flag should scale accordingly. If the scaling isn't correct, try different values in the ImageView for android:scaleType.
I have a PizzaOverview.
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
If the picture is too big the date is invisible.
add scroll view to your layout or fix the size of imageview
add the scroll view to your layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Ensure that the images you supply to the activity are the correct resolution and size.
Also make sure that you have separate layouts for separate screen size categories.
Read this section of the android documentation for more details on layouts and managing different screen sizes. It tells you the basics you'll need.
You could place your image with the rating bar and the text below it in a RelativeLayout. Give a marginBottom to your RelativeLayout equal to the height of your Button. Then place your text, give it an id and add android:layout_alignParentBottom="true". Set the height of the image to fill_parent and add attribute android:layout:below="id_of_text".
You can as the other answer states make the screen scrollable. But if your content is dynamic (and depending on device it is arguable to say you content will ALWAYS by dynamic) you should make sure the that ImageView has it's bounds set correctly.
In the source code you have:
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
You should instead have:
<ImageView android:layout_height="0dp"
android:weight="1"
android:layout_width="match_parent"
android:id="#+id/pizza_iv"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside"/>
The extra attribute of weight will make your view fill any available space along the orientation set in the bounding LinearLayout. This is dependant on the weight of other views along that orientation (as the other views have no weight value in this case it will fill all space up until the edge of your fixed views).
The extra attribute of scaleType="centerInside" will make your image sit in the center of the bound's you have suggested (which are the width of the screen and all available space vertically) without ever growing large enough to overlap the bounding container.
When using ImageView you should keep in mind that the ImageView is a bounding container for an Image. It can be as large or as small as possible but is only a mechanism for telling the UI where to place an image. The scaleType attribute is what you use to say how you want the image placing within this bounding countainer. Using "wrap_content" on an ImageView isn't effective and can lead to trouble later in the design (especially when considering different devices).