Aligning image in LinearLayout - android

I have LinearLayout and I want to put into it ImageView. Is there any simple way how to put this image on the right side of the screen? Now, the image is placed to the left, padding and marking don't solve this, because this should be done dynamically, the image is each time different.
Thanks.

Have you tried setting the gravity attribute to right?
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:contentDescription="#string/imageDesc"
android:src="#drawable/image" />

Related

How to place correctly two views in a framelayout?

I am trying to get this design:
But my problem is that i can't get to place the red view exacly like in the photo above.
For now I'm using a framelayout but I still can't get the desire design.
Xml:
<FrameLayout
android:id="#+id/mental_health_card_h_c_ll_chat_image"
android:layout_width="42dp"
android:layout_height="42dp"
android:background="#drawable/bg_doctor_image_empty"
android:gravity="center">
<LinearLayout
android:id="#+id/mental_health_card_h_c_ll_chat_notifications_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|right"
android:background="#drawable/background_sendbird_notification"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.movistar.movistarsalud.components.TeladocTextView
android:id="#+id/mental_health_card_h_c_ll_chat_notifications_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
app:textColor="?attr/white"
app:textType="regular"
tools:text="2"
tools:textColor="?attr/white" />
</LinearLayout>
<com.movistar.movistarsalud.components.TeladocImageView
android:id="#+id/mental_health_card_h_c_chat_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="#drawable/ic_i037_chat__1_"
app:riv_oval="true" />
</FrameLayout>
And what i have until now:
You're pretty close! And I'd recommend ConstraintLayout for positioning stuff - but if you really want to use a FrameLayout (combined with a LinearLayout - I doubt it's more efficient than just using a ConstraintLayout) then I think your issue is the chat ImageView is too large.
If you imagine the FrameView as a box around your image, you have the notification dot right in the top-right corner. That shows you where the top and right edges of the frame are. You can also see that the chat image (including the blue circle) is up against those edges too - in your example pic, there's a bit of a gap.
So you'll need to experiment with setting different layout_width and height values on your ImageView. Try 40dp and see how that looks. Also you'll probably want to mess with your scaleType, you want the image to shrink, not get cropped (your version already looks a lot bigger than the example)
Simply you are missing to add elevation to your LinearLayout.
You need to add this line, and your text would be shown over the chat icon.
android:elevation="1dp"

Getting ImageView to middle of RelativeLayout - Android

I have been having trouble getting this LinearLayout to move to the vertical center of the RelativeLayout which is it's parent. I have tried many methods and maybe I am using the wrong one but I am not sure. Can someone just check it over to see what I need to add. Thanks. There is some TextViews to the right of the LinearLayout but I didn't include them as you don't require them but just remember the layout needs to be in the vertical center of the RelativeLayout and not in the complete center.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_card"
android:orientation="horizontal"
android:padding="5dip" >
<!-- ListRow Left sied Thumbnail image -->
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:gravity="center"
android:background="#drawable/image_bg"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/list_image"
android:layout_width="50dip"
android:layout_height="50dip"
android:src="#drawable/thumb"/>
</LinearLayout>
If you need to center vertically a element inside a RelativeLayout, in your particular case the LinearLayout, then add android:layout_centerVertical="true" attribute to the LinearLayout.
first of all using linear inside relative is not a good idea, i prefer u change that but still if u wanna keep it same, cannot move linear layout in middel, u have to move ur image
now there are many ways such as
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
plus you can give margin -inputs manually
android:layout_marginTop="162dp"
android:layout_marginleft="80dp"..
try these first, but still strongly recommend to use either Linear or Relative and u can always drag ur UI's in design view.

Align image to the top with "match_parent"

I've got a problem with my application. I've a image which goes across the whole screen (ImageView) with this code in xml:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/achtergrond"
android:scaleType="fitCenter" />
My problem is that the image is centered in the imageview itself. It needs to be centered up as you can see in the next picture:
The left image is what I have, with the image in the middle. The right is what I want, the image should be up in the whole layout, I need to set my image to match_parent to have it fill as background (I didn't set it as background because it would be stretched then).
I hope I'm missing something obvious! Thanks for helping me in advance!
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/achtergrond"
android:scaleType="fitStart" />

scale an image to fit TOP and RIGHT in android ImageView

I use an ImageView, I want the source image to fit to the TOP and RIGHT.
FitEnd scaling fits BOTTOM and RIGHT
all other scale enums don't help much as well
any idea?
Thanks
Try this code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top|right">
<ImageView
android:scaleType="fitEnd"
android:adjustViewBounds="true" />
</LinearLayout>
This should get you the intended result.
I beleive you are looking for the fitStart or, in code, setScaleType(ImageView.ScaleType.FIT_START);
Using that you could simply wrap the image in a layout wrapper that is aligned to the right, such as a RelativeLayout with android:layout_alignParentRight="true"
Just use scaleType = MATRIX
e.g:
<ImageView
android:layout_width="%wanted width%"
android:layout_height="%wanted height%"
android:scaleType="matrix"
android:src="%your src%" />

Aligning center relative to others

So it's possible to align the top, bottom, left, and right of one view with another so that their edges are flush with each other. However, I've been wondering if it's possible to align the centers of two views of different sizes. My situation occurs when I have an ImageView side by side with a TextView, like this: [ImageView] [TextView]. The ImageView is bit taller than the TextView and so what I do is add padding/margins to the bottom of TextView to get it align and look like the ImageView and TextView horizontal centers are aligned. Problem is, when this view is displayed on larger tablet screens, the padding and margins don't work out right and the TextView doesn't look aligned with the ImageView. I'm sure there is an easy fix to allow this to always work out, so could someone provide me with some insights? Thanks!
This is how I did for a listview row:
<?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="fill_parent"
android:background="#FFFFFF"
android:padding="5dp"
android:gravity="center_vertical">
<TextView android:id="#+id/questionItemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textColor="#000000"
android:gravity="center_vertical"/>
<ImageView android:id="#+id/questionViewed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/eye"
android:layout_marginLeft="5dp" />
<ImageView android:id="#+id/questionAnswered"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
android:layout_marginLeft="5dp" />
</LinearLayout>
Use weightSum rather than padding in dips or pxs, that will make your layout look fine regardless of the size of the user's device.
or you could use gravity as well.
Or you can create a second xml file and insert that one into your res/xlarge file, the phone will pick which xml to read.

Categories

Resources