I am trying to align four equally sized squares on an Android Screen & I have now tried what feels like a million different approaches, yet none of them seem to work :(.
What I've got at the moment is the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/MasterLayout" android:layout_width="wrap_content" android:layout_height="fill_parent" android:background="#FFFFFF">
<TableLayout android:layout_width="fill_parent" android:id="#+id/mainlay" android:background="#444444" android:layout_weight="0.2" android:layout_height="wrap_content" android:padding="0dip">
<TableRow android:layout_weight="1" android:background="#BBBBBB" android:padding="0dip">
<ImageView android:id="#+id/ImageView1" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="#drawable/bigbox_new"></ImageView>
<ImageView android:id="#+id/ImageView2" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="#drawable/bigbox_new"></ImageView>
</TableRow>
<TableRow android:layout_weight="1" android:padding="0dip">
<ImageView android:id="#+id/ImageView3" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="#drawable/bigbox_new"></ImageView>
<ImageView android:id="#+id/ImageView4" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="#drawable/bigbox_new"></ImageView>
</TableRow>
</TableLayout>
</LinearLayout>
This basically does the job. However, every one of those four Images has a huge padding above and under it. How do I get rid of that? Or do I need to use a different Layout type alltogether?
To help illustrate my problem, here's a picture.
On the left is what I got, on the right is what I need.
Image
Thank you very much!
Cheers, Markus!
Remove layout_weight from your TableRows and set their layout_height to wrap_content. Then add an empty TableRow below them with layout_height set to fill_parent.
Try using the scaleType as centerCrop, if the image size is greater then this will do the trick for you. But this is not the best way to do it, better would be to change the image resources.
HTH !
Try setting the ImageView height to fill_parent, I think that should do the trick. Anyway, it would help if your XML properties were split in lines, it's hard for the rest of us to read a single line of properties.
Also, why do you place a TableLayout inside a LinearLayout? Unless you have more elements inside that Linear, you can get rid of it.
Related
I need to use a ValueAnimator to make a custom "drop field" appear when the user drags a certain view. (I want to change the field from gone, height = 0 to visible, height = wrap_content).
I've tried the solution of this question: How to animate to wrap_content?
The answer there worked when I used it on a single TextView, but when I tried to apply it to a LinearLayout with multiple text views it animated to a too large height value, then, when the animation finished, snapped back to the correct one. The layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="gone"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
<TextView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
</LinearLayout>
Using animateLayoutChanges didn't work for me either, and I want to use a custom animator anyway.
I'm using C# in Xamarin, but answering with Android Studio Java code is acceptable too, I'll translate it to C#.
This should be caused by measuring the children views during Measure, so you can change your xaml like this ,change your children views's width to wrap_content:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="gone"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_weight="5"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_weight="2"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
</LinearLayout>
I've tried several ways of doing this and failed each time.
What I want to acomplish is centering TextView (horizontally and vertically) on ImageView, but instead command android:layout_centerInParent="true" results in vertical and horizontal centering on the whole area, not on ImageView. Please help me with attaching parent to TextView or other way of solving this.
Here is my xml code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
It can be easily acheived using ConstraintLayout. Android recently introduced ConstraintLayout. It allows us to lay out child views using ‘constraints’ to define position based relationships between different views found in our layout. It is similar to RelativeLayout, but much more powerful than it because, ConstraintLayout reduces View Hierarchy to a greater extent. Now getting back to your question, Here is the sample xml code which does the work for you
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<ImageView
android:id="#+id/image"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Image"
android:textSize="20sp"
app:layout_constraintRight_toRightOf="#+id/image"
app:layout_constraintLeft_toLeftOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"
app:layout_constraintBottom_toBottomOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Output View on Device
You can position the TextView anywhere on the ImageView using app:layout_constraintHorizontal_bias and app:layout_constraintVertical_bias. By default these values will be set to 0.5. So, it will be center aligned by default , if we don't specify any values.
When you add a constraint to both sides of a view (and the view size
for the same dimension is either "fixed" or "wrap content"), the view
becomes centered between the two anchor points by default.
Note: Bias attribute only works if you specify the constraints for the boundaries (e.g. top and bottom for vertical bias, left and right for horizontal bias)
More about ConstraintLayout
ConstraintLayout
Sample Project
Blog on ConstraintLayout
Try this way,hope this will help you to solve your problem.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
</FrameLayout>
Perhaps this would help you with your question
Android TextView text won't center
A person here mentions using android:gravity="center".
Here's what I would do
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_centerHorizontal="false"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
What you need to do is use FrameLayout.The doc says:
FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.
So you need something like following psuedo layout code:
<FrameLayout>
<ImageView gravity="center">
<TextView gravity="center">
</FrameLayout>
Add one more relative layout under your layout like this :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Check for width and height you want. Eg. If you want specific height and width for image, change height and width of this relative layout.
Thats it...
ok so i'm currently learning android and i am trying to make a memory app where you have to find 2 matching pictures.
I have almost finished it but there is one problem that is bugging me, i looked it up and someone else had the same problem but the only answer he got was to make the image button a fixed dp size, but i don't think that's a solution if you are making an app for a variety of different android devices.
I made the images image views and they are all the same image but every time someone presses one of the image views it changes to a certain image that is fixed for that spot for that round.
The problem is every time an image is pressed the whole layout moves slightly but enough to be noticed and get annoyed by it, how can i fix this without giving them a fixed dp size.
Thanks :).
i made it with table layout inside a linear layout, this is one of the rows.
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/ImageView1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp" />
<ImageView
android:id="#+id/ImageView2"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp" />
<ImageView
android:id="#+id/ImageView3"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp" />
<ImageView
android:id="#+id/ImageView4"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp" />
</TableRow>
I have this as my layout for an item in my listview:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/msgbox_self_default" >
<RelativeLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingLeft="7dip" >
<ImageView android:id="#+id/pending" android:layout_height="fill_parent"
android:layout_width="wrap_content" android:layout_marginLeft="2dip"
android:src="#drawable/ic_sms_mms_pending"
android:visibility="gone"
/>
<TextView
android:id="#+id/body"
android:text="#+id/body"
android:singleLine="false"
android:paddingLeft="#dimen/message_item_text_padding_left_right"
android:paddingRight="#dimen/message_item_text_padding_left_right"
android:paddingTop="#dimen/message_item_text_padding_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:linksClickable="false"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ff000000"
android:textSize="16sp"
android:layout_alignParentRight="true" />
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/body"
android:id="#+id/picture_layout"
android:orientation="vertical"
>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/picture"
android:visibility="gone"
android:maxWidth="178dip" android:maxHeight="178dip"
android:layout_alignParentRight="true"
android:adjustViewBounds="true" android:background="#android:drawable/picture_frame"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<TextView
android:paddingRight="#dimen/message_item_text_padding_left_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/picture_layout"
android:paddingLeft="3dip"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/date"
android:text="#+id/date"
android:singleLine="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
I want the bubble though to be on the right side. This is a layout for a message bubble. I am trying to put it on the right side like the iPhone conversations. I have tried every possibly thing I can think of relating to putting it on the right side instead of the left. Does anyone see anything wrong with my layout? Please help! Thanks
** EDIT **
The green bubble is the one that I aiming for in this picture
http://getandroidstuff.com/wp-content/uploads/2010/12/GO-SMS-Android.jpg
* CHANGED LAYOUT *
this is so far what I have.. anymore ideas?
I want the grey bubble to look like the white one except on the right side.
Im not going to sift through your code but basically you just want something like this for each message
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="put the right amount of padding in">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="make this your background, make sure to add padding in so that the text view is in the right place, look at 9 patches"
android:layout_alignParentRight="true"/><!-- Or make this left -->
</RelativeLayout>
Don't over complicate things, just use a text view with a 9 patch and it will do what you want.
Just swap the 9 patch horizontally and it'll be around the other way
I'm really pulling my hair out over this one. Some background. I have a list of items that all have checkboxes next to them. When you deselect a checkbox, a button appears that allows you to delete the item from the list. This seems backwards at first but we only want "selected" items to be eligible for further processing, etc. This is my layout:
<RelativeLayout android:id="#+id/rlBlahBlah"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
xmlns:android="http://schemas.android.com/apk/res/android">
<CheckBox android:text=""
android:id="#+id/cbDeleteItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:focusable="false"
/>
<TextView android:text=""
android:id="#+id/tvItemText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:paddingLeft="3dip"
android:paddingRight="3dip"
android:paddingTop="13dip"
android:gravity="fill_vertical"
android:layout_toRightOf="#id/cbDeleteItem"
/>
<Button android:layout_height="wrap_content"
android:id="#+id/btnDelete"
android:text="Delete"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:focusable="false"
/>
</RelativeLayout>
I cannot get the 3 items to center vertically in my row to save my life. layout_gravity, gravity, layout_centerVertical, none of it works. I'm sure my issue is some tiny setting to flip somewhere, but I'm really at wits end on this.
edit: I know the textview is "fill_vertical", that's some random stuff I was trying.
This attribute worked for me centering a Button using RelativeLayout:
android:layout_centerInParent="true"
See this posting:
Can you center a Button in RelativeLayout?
Your problem is probably not due to the layout, but how you are inflating the layout. In fact, it might even be my fault, depending on where you learned your technique...
To quote the omnipresent Romain Guy:
the correct usage of inflate() in
adapters is:
inflate(layoutId, parent, false);
Passing the parent (given to you as a
parameter in getView()) allows the UI
toolkit to create the appropriate
LayoutParams object. Passing false
tells the toolkit to NOT call
parent.addView(theInflateChild), since
ListView will do its own magic later
on.
If you use inflate(layoutId, null), as I have traditionally advised, life is OK unless you try using RelativeLayout as the base layout of the rows and try to use vertical centering.
I will be updating my books and such to reflect the new advice in the coming weeks.
Using RelativeLayout, I had no luck with gravity nor layout_gravity.
But android:layout_centerVertical="true" worked for me positioned in the child of my RelativeLayout, so you can keep it if you need.
Here is a layout that ended up doing exactly what I wanted. I ditched RelativeLayout once I learned that it ignores layout_gravity attributes (of course now I can't find the post). Either way, nested LinearLayouts did the trick for me:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:id="#+id/llBlahBlahRowMain"
android:padding="6dip">
<CheckBox android:text=""
android:id="#+id/cbDeleteItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:focusable="false"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content">
<TextView
android:text="blah blah dynamically replaced text"
android:id="#+id/tvItemText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="14dip"
android:paddingLeft="3dip"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnDelete"
android:text="Delete"
android:layout_gravity="center_vertical"
android:focusable="false"
/>
</LinearLayout>
Have you tried android:gravity="center_horizontal" as referenced here
I did an alternative solution, that worked for me. I put, on my textbox element, the property android:layout_height="fill_parent". This way, the text element filled all hieght of parent, so the contents were aligned correctly :)
<TextView android:id="#+id/principal_li_descricao"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_marginLeft="10dip"
android:textColor="#ff000000"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_alignBottom="#+id/principal_li_icone"
android:layout_toRightOf="#+id/principal_li_icone"/>
Thanks