I installed my app on a device for the first time. It worked great on the emulator but it now has this white padding on the edges which affects the locations of the transparent buttons (See screenshot). I am wondering if there is a way to force the whole image to take up the full screen and remove the white on the sides. Please let me know your best solutions.
Thanks.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".firstroom">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can use android:scaleType="centerCrop" or android:scaleType="fitXY" in your ImageView.
I woulld also recommend you to go through this link: https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide
You can use the "scaleType" attribute in the tag to ImageView
android:scaleType="centerCrop"
or
android:scaleType="fitXY"
There are some other other types also . Shown in image below
You have to use the attribute android:scaleType.
If you want to keep the aspect ratio unchanged, then you have to use android:scaleType="centerCrop", this will center your image to the imageview and scale it keeping the aspect ratio. So it might crop either some portions of width or height if required.
<ImageView
android:scaleType="centerCrop"
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
If you do not want to keep the aspect ratio, then you have to use android:scaleType="fitXY", this will scale both height and width to fill your image to the imageview. As a result your image might be stretched horizontally or vertically.
<ImageView
android:scaleType="fitXY"
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
For more info, see official doc.
Related
I am currently programming an Android app and using Kotlin and Android 7, but when I run the app on my phone the picture is a bit different than when I design it in UI Designer. I have chosen the same resolution for both and I am stumped because I have had little contact with the frontend so far. Hopefully someone can help me, thanks already!
XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
tools:context=".MainActivity">
<ImageView
android:layout_width="194.3dp"
android:layout_height="144.3dp"
android:layout_marginStart="83dp"
android:layout_marginTop="583.7dp"
android:layout_marginEnd="82.7dp"
android:layout_marginBottom="52dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/gui_base"
tools:ignore="MissingConstraints"
android:contentDescription="GUI" />
<ImageView
android:layout_width="47dp"
android:layout_height="53.3dp"
android:layout_marginStart="161.3dp"
android:layout_marginTop="648dp"
android:layout_marginEnd="151.7dp"
android:layout_marginBottom="78.7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/homebutton"
tools:ignore="MissingConstraints"
android:contentDescription="HomeButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio
||| My Device
Try something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageBackground"
android:layout_width="194.3dp"
android:layout_height="144.3dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_background"
/>
<ImageView
android:id="#+id/imageFront"
android:layout_width="47dp"
android:layout_height="53.3dp"
app:layout_constraintBottom_toBottomOf="#id/imageBackground"
app:layout_constraintEnd_toEndOf="#id/imageBackground"
app:layout_constraintStart_toStartOf="#id/imageBackground"
app:layout_constraintTop_toTopOf="#id/imageBackground"
app:srcCompat="#drawable/ic_launcher_foreground"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Now You can paste this to another container. And the Result:
It will always center the button. If You want the center image (play button) to be a little lower You can add bias app:layout_constraintVertical_bias="0.75". Now the center image will be at 1/4 hight from the bottom.
But I think You should newer hardcode margins to place somewhere on the screen. E.g. You have added android:layout_marginTop="583.7dp" this will only work on one screen resolution and on every other it will look bad. If You want it to be on the bottom just set the bottom constraint to the bottom of the parent and add a 16dp margin.
I have a TextView with a drawabletop image, but the image is big and I need to resize it:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/football_pitch">
<TextView
android:id="#+id/playerNameTop"
android:layout_width="350dp"
android:layout_height="358dp"
android:layout_marginStart="16dp"
android:drawableTop="#drawable/ic_football_top"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</RelativeLayout>
I tried to resize it via the design view, but it just crops the image when I reduce the size.
How do I go about resizing the image itself, without cropping the image?
I think if I make the image smaller, I will have to increase the text size, which I can do just fine.
So now I need to scale down the image but for some reason it also cuts off the side of the image:
[This image shows me resizing it via the design view. As you can see it has cropped the bottom out so you cannot see the text1
I always avoid to use drawableTop and other similars. Do it in more customizable way:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_drawable"/>
<TextView
android:id="#+id/playerNameTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"/>
</LinearLayout>
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 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.