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...
Related
I have an image that I desire to put textViews on top to my Android Application which is the following:
In order to place textViews on top of the image the only solution I have is to create a FrameLayout, place ImageView first, TextView after and then put padding into the TextView, this is very archaic and time consuming, and I don't know if it will stretch correctly to all android resolutions. This is the way I'm able to do it:
Is this the only way to do it? Does it have any issue relating to different phones resolutions? or since its based on dp it will always stretch correctly?
Instead of using image view, you can use a linear layout and set its background as that image..Then you can add edit text and text views on it.
You could use a ConstraintLayout. If you constrain the Name: TextView's top to the top of the ImageView and create a chain of constraints (ending with the Information EditText having its bottom constrained to the bottom of the ImageView), that will keep all your views in the bounds of the ImageView.
A layout like this:
<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"
xmlns:tools="http://schemas.android.com/tools">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#color/grey"/>
<TextView
android:id="#+id/name_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name:"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toTopOf="#id/image" />
<EditText
android:id="#+id/name_text_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="#id/name_text"
app:layout_constraintTop_toBottomOf="#id/name_text"
tools:text="Some random text in here"/>
<TextView
android:id="#+id/id_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ID:"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="#id/name_text_entry"
app:layout_constraintTop_toBottomOf="#id/name_text_entry"/>
<EditText
android:id="#+id/id_text_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="#id/id_text"
app:layout_constraintTop_toBottomOf="#id/id_text"
tools:text="Some random text in here"/>
<TextView
android:id="#+id/information_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Information:"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="#id/id_text_entry"
app:layout_constraintTop_toBottomOf="#id/id_text_entry"/>
<EditText
android:id="#+id/information_text_entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:lines="5"
app:layout_constraintStart_toStartOf="#id/information_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/information_text"
tools:text="Some random text in here"/>
will produce something like this (the grey background being your ImageView)
Here's a link since I can't embed images
I apologize for this question may have been asked somewhere, but I'm not sure how to phrase it.
I have a ListView in my Android app and I want to align the content in each row so that each TextView is aligned with corresponding TextViews in rows below it (left, right, and center).
This picture is what I'm going for listview:
So, the left TextView is aligned all the way to the left and the right TextView is aligned all the way to the right. The center TextView is aligned such that it always "begins" at the same place (ie. it's position is not affected by the length of the left TextView).
How can I achieve this? Thanks a lot
use bellow like.. I have used first textview left, second center & third is right. You can change as your wish...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<TextView
android:id="#+id/tv_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical|center_horizontal"
android:text="AAP 500" />
<TextView
android:id="#+id/tv_textview2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|center_vertical|center_horizontal"
android:text="85.65" />
<TextView
android:id="#+id/tv_textview3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right|center_vertical|center_horizontal"
android:text="-3.75(-3.34 %)" />
</LinearLayout>
You'll want to use a LinearLayout with horizontal orientation then apply a weight to each of the textviews inside of it. this will cause them to each take a certain fraction of the layout. You can start by giving them each a weight of 1 and adjusting from there. The right-most textview will also need a right justification on the text to match the picture.
You have to create custom listView in that your item_row_view.xml will look like this
<?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="vertical">
<TextView
android:id="#+id/tv_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:text="AAP 500"
android:textAlignment="center" />
<TextView
android:id="#+id/tv_textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="85.65"
android:textAlignment="center" />
<TextView
android:id="#+id/tv_textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="-3.75(-3.34 %)"
android:textAlignment="center" />
</RelativeLayout>
I got such issue with my RecyclerView
I need to present to user images that I downloaded with help of picasso lib from web to my RecyclerView. Eventually it looks like this
As you can see I need to scratch my images, but in proper aspect ratio of course.
I went to my XML file and set attribute in my ImageView android:scaleType="fitXY"
now my ImageView looks like this
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
and here is result that I got
as you can see now image fill all available space, but them doesn't scratch with propriety aspect ratio. Images scratch width more than height and does't looks nice...
Also here is my XML file
<?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:paddingBottom="3dp"
android:paddingEnd="3dp"
android:paddingStart="3dp"
android:paddingTop="3dp"
>
<LinearLayout
android:id="#+id/cardMainActivityLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/rippleInbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mrl_rippleColor="#color/ntz_background_light_grey"
app:mrl_rippleOverlay="true"
>
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
</com.balysv.materialripple.MaterialRippleLayout>
<RelativeLayout
android:id="#+id/rlCardMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:padding="4dp"
>
<TextView
android:id="#+id/tvBrandName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvBrandName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvPreviousPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvItemName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvDivider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvPreviousPrice"
android:layout_toEndOf="#+id/tvPreviousPrice"
android:text=" / "
android:textSize="10dp"
android:visibility="gone"
/>
<TextView
android:id="#+id/tvPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvDivider"
android:layout_toEndOf="#+id/tvDivider"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<Button
android:id="#+id/bAction"
android:layout_width="70dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:textSize="8dp"
/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
What am I doing wrong?
Edit1
There is a result of android:scaleType="centerCrop" attributes
It is also not so nice when women don't have head))
Edit2
There is result of android:scaleType="centerInside"
To answer your question, please use centerCrop to center the image absolute to it's parent. Also add this attribute, android:adjustViewBounds="true". With this the aspect ratio of the image will be preserved.
fitXY uses FILL which is described as "Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src" in the Android Documentation.
You should use centerInside to center, fit and scale while keeping the aspect ratio
Alright the problem is that your layout does not respect the bounds of your image.To remedy this, wrap the image-view in a separate parent layout , add a parent weight to the layout it self with layout_weight="1".Then set the width relative to the layout with android:layout_width="0px", to avoid tearing and proper bounds coordination set android:adjustViewBounds="true". To center and crop the image at it's center use android:scaleType="centerCrop".
I am a new android programmer.I want to show images with PullToRefreshListView ,but I find both the left and right sides of the ImageView has blank space.And I have tried the some solution about the "ImageView blank space" including using adjustViewBounds="true" and scaleType,but it failed.
The following code is my list cell layout.
<?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="vertical" >
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/userPortrait"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:id="#+id/timeAgo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20px"
android:layout_marginRight="5px"
/>
</LinearLayout>
<!-- here is my imageControl -->
<ImageView
android:id="#+id/imageUrl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
/>
</LinearLayout>
The image comes from server,so I add the image source in code by imageView.setImageBitmap.
I also have tried using imageView.setBackground(drawable), actually no blank space appear in the left and right sides,but the height is not incorrect,it does not depend on the aspect ratio.
can anybody help me? Thanks in advance.
If the aspect ratio of the ImageView after layout is different than the aspect ratio of the image itself, you have to make a choice:
If you want to fit the entire image into the ImageView leaving some space (in your case, left and right), use android:scaleType="fitCenter".
If you want to cover the entire ImageView and crop the image (in your case, at the top and the bottom), use android:scaleType="cropCenter"
If you don't want to have extra space or cropped sides and want to distort the aspect ratio of the image to match the ImageView dimensions exactly, use android:scaleType="fitXY".
Here is how android:adjustViewBounds="true" works: When you have one dimension of the ImageView "fixed" (e.g. match_parent or 240dp etc.) and another dimension "flexible" (e.g. wrap_content), setting android:adjustViewBounds="true" will cause the ImageView layout to make the wrap_content dimension just the right size to match the aspect ratio of the source image.
Since you have match_parent on both dimensions of your ImageView, android:adjustViewBounds="true" won't have any effect.
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