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.
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
so I'm currently working on an app on Android, and I got stuck on a specific problem regarding the RelativeLayout, which I can't find a way to solve.
I have in the layout three views as follows: TextView, Textview and ImageView (laid horizontally), here is a screenshot of the ios counterpart:
the Textview at the middle should stick to the first one, until he gets to the Imageview, when he does, he keeps his minimum size (wrap content), while the first Textview truncate.
On IOS I setted priorities to the constraint to accomplish this, but I can't figure out how to solve this on Android.
Here what I tried:
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/daily_movie_title_box">
<TextView
android:id="#+id/daily_header_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="New Text aawi oa ioawfwi"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/white"
android:lines="1"
android:singleLine="true"
android:layout_alignParentStart="true"
/>
<TextView
android:id="#+id/duration_text"
android:text="138 mins"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textSize="13sp"
android:textColor="#color/white"
android:lines="1"
android:layout_alignBaseline="#id/daily_header_textview"
android:layout_toStartOf="#+id/certification_icon"
android:layout_toEndOf="#id/daily_header_textview"
/>
<ImageView
android:id="#id/certification_icon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/uk12a"
android:layout_alignBottom="#id/daily_header_textview"
app:layout_aspectRatio="100%"/>
</android.support.percent.PercentRelativeLayout>
Which resulted in this (which is what I want):
But when I increase the first Textview text it's not behaving as I desire...
Is it possible to achieve the behaviour I want in Android (keep the middle Textview wrap content, and truncate the first one if needed)?
I will post an update if I find a solution eventually, just wanted to see if anyone can find an easy way to achieve this behaviour, as I suspect there is.
Thanks.
From my understanding, you want the first TextView to be as large as possible, without adding space after the text if the text is too small. The second TextView should only wrap_content, but it should fill the rest of the parent layout when the row doesn't. The ImageView is set to wrap_content.
I tested it with this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Shrinking text dddddddddddddddddddddd"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Midle column"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
</TableRow>
</TableLayout>
</LinearLayout>
The only problem is that if the second column has a incredibly large text, it will push the other views out of the parent. But in your case, I don't think that will be a problem. Otherwise, I think it does the job.
These are some suggested solutions:
You can use LinearLayout with horizontal orientation and weight for each component (TextViews and ImageView).
You can set the minimum and maximum text length for the second TextView.
But i prefer to apply the first solution. You can assign a weight for each component ( amount of space on the screen ) using:
android:layout_height
I have a TableLayout inside a RelativeLayout with android:layout_centerInParent="true" as one of its attributes, but it is not being centered vertically.
Here is my xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/line_drawing_relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableLayout
android:id="#+id/activity_linking_tl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<TableRow
android:id="#+id/table_row_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1dp" >
<com.xx.myview
android:id="#+id/id_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.xx.myview
android:id="#+id/id_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
<ImageButton
android:id="#+id/line_drawing_b_restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:padding="22dp"
android:src="#drawable/ic_restart" >
</ImageButton>
<!-- There are more views/widgets here -->
</RelativeLayout>
How would I solve this?
Are you sure that the RelativeLayout is taking up as much space as you think? It might be that the TableLayout is centered, but that the RelativeLayout is wrapping content, so it ends up being centered but in a smaller container than you expected. It's hard for me to gauge without seeing the RelativeLayout portion of the XML.
One way to check your layouts is to use the developer option "show layout bounds":
It will give you a better idea of how your layouts are being constructed. If you are running an older phone without this developer option, I would just start setting flat colors for View backgrounds (e.g. android:background="#F00").
Try setting parent RelativeLayout width and height to match_parent.
and add this to your TableLayout
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
The problem was that I had android:layout_below="xxx" as well (for some reason not shown in the code I posted), which overrode the centering I was trying to achieve. Removing this solved it. Obvious really.
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
I have a LinearLayout that has four views layed out horizontally. The first and last component are a set size. For the inner two views I want to just share the available space 50:50. I set each to a weight of "1" but when the views are layed out, the views are different sizes depending on the content they hold.
Here is my layout xml for reference.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/status"
android:src="#drawable/white"
android:paddingRight="10dip"
android:layout_height="35dip"
android:layout_width="35dip">
</ImageView>
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/status"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/description"
android:text="Description"
android:layout_toRightOf="#id/name"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/time"
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/description"
android:textSize="25dip">
</TextView>
</LinearLayout>
Obviously these aren't the actual column names but I changed them for privacy purposes. This layout is used by a ListView which changes the text of each view to be whatever value its presented. The name and description fields should line up since they're both given 50% of the remaining screen but when the name is longer the description is shifted right. Why?
For the weight to be considered, the layout dimension needs to be 0 (zero)
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
I also recommend making your weight add up to either 1 (and use fractions) or 100.
So instead of 1 you would use either 50 or .5 for each view. The LinearLayout code will work properly with any weight sum, but it gets difficult if you want to modify your view later with additional sections.
Also, if you are not using relative layout, get rid of the toRightOf attributes. Less is more.
Try to use android:layout_width="fill_parent" instead of "wrap_content" in all children of LinearLayout. Or better yet, make such a structure in your xml:
<RelativeLayout>
<ImageView /> # status, fixed width, alignParentLeft="true"
<TextView /> # time, fixed width, alignParentRight="true"
<LinearLayout> # layout_width="fill_parent", toLeftOf="time" toRightOf="status"
<TextView /> # name, use layout_weight="1"
<TextView /> # description, use layout_weight="1"
</LinearLayout>
</RelativeLayout>
This should do what you want. Using LinearLayout instead of RelativeLayout might work too, but you have to experiment a bit (I believe using nested Layout, as in my example, will do the work).