I'm trying to put an image header at the top of the constraintlayout but when i run the app in a real device it is wrong and the header is not in the top:
<?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=".MainActivity">
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="207dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_header" />
</androidx.constraintlayout.widget.ConstraintLayout>
below we can see how looks it in a real device:
There is a space between the action bar and the header.
I tried to remove the action bar but also does not work.
Thanks in advance.
This is my content of ic_header:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="360dp"
android:height="180dp"
android:viewportWidth="360"
android:viewportHeight="180">
<path
android:pathData="M0,0h360v180h-360z"
android:fillColor="#fbc711"/>
</vector>
I think the issue is with the src drawable and the ImageView both having a fixed height.
Try using android:scaleType="centerCrop" in your ImageView xml, so that the source image expands to cover the empty area.
I tried running your code and found out that given constraints are right but your SVG isn't scaling to the total length for your ImageView. You can see the view bounds below
Solution:
You can consider adding this line.
android:scaleType="fitXY"
The result will be like the following image.
and the alternate solution is you can also use shape drawable if all you need is a solid layout.
And if you drawable isn't a solid color and some complex vector image. try not to resize your image view.
keep
android:layout_height="wrap_content"
Related
[![my image][1]][1]
As. you can see from the image i have a rounded corner shape ..but i want to have a shadow just on the top (there is no where else for it anyway since its covered on the other ends). How can i place a shadow just at the top of this cardView ? here is what i have so far and i've tried using two framelayouts earlier.
<?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:id="#+id/viewRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.card.MaterialCardView
android:theme="#style/Theme.MaterialComponents.Light"
android:id="#+id/greenCardView"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:cardCornerRadius="16dp"
app:cardElevation="0dp"
android:clipToOutline="true"
android:clipToPadding="true"
android:clipChildren="true"
app:cardPreventCornerOverlap="true"
app:cardBackgroundColor="#color/green">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/contentContainer"
android:layout_width="match_parent"
android:background="#color/transparent"
android:layout_height="54dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
i also need the shadow to have no background under it ..so it should not be on a white background, i just want the shadow on top alone on a transparent background.
update: after i udated to 70dp elevation the shadow is only appearing on the bottom :
[![enter image description here][2]][2]
notice the shadow is only appearing at the bottom . how can i make shadow just at the top
[1]: https://i.stack.imgur.com/8XC6l.png
[2]: https://i.stack.imgur.com/egRoB.png
Increse the value of
app:cardElevation="0dp"
it was how i was attaching the scrollview to the cardview ..i used a space view to attach it a bit lower and it works great now (since i dont have access to negative margins) ..thanks
what i learned is that when you have a scrollview attached to a cardview then you should attach the scrollview a few pixels away from the top so that it does not look cut off when it scrolls.
Im trying to add 3 imageview with text, but i have problems with the image.
there coming some emty space under and over the image, so the image is been like a square.
And i have problem to change the other image and text.
It is like a layer around the image.
Like this:
This is my code.
<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=".MainActivity">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/tuna" />
Set adjustViewBounds to true and mess around with the scale types.
This is happening because of your image file. It consists of transparent pixels.
you can either remove those using photoshop if you are adding images manually. or if you are getting that image from the server you try below answer to remove it via code. remove transparent pixels from bitmap
try to adjust the width and height of the image file using photo editor (ex. Adobe photoshop)
I have a problem with a vector drawable which I set as background of my RelativeLayout. It is not filling the screen horizontally.
Here is the code for my RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/my_drawable">
...
some text views etc.
...
</RelativeLayout>
And the vector Drawable my_drawable, if it helps to have it posted:
<vector android:height="24dp" android:viewportHeight="110.0"
android:viewportWidth="110.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:name="border_path" android:fillColor="#color/color_1" android:fillAlpha="1"
android:pathData="M105.13,107.51L4.89,107.51A2.38,2.38 99.69,0 1,2.51 105.13L2.51,4.89A2.38,2.38 119.37,0 1,4.89 2.51L105.13,2.51A2.38,2.38 119.37,0 1,107.51 4.89L107.51,105.13A2.38,2.38 99.69,0 1,105.13 107.51z"
android:strokeAlpha="1" android:strokeColor="#color/color_2" android:strokeWidth="5"/>
</vector>
And the screenshot below. AS you see it doesn't fill the whole width.
Any suggestions/solutions highly appreciated!
place image view inside a frame layout
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/sample"
android:text="Hello World!" />
</FrameLayout>
</RelativeLayout>
Looks like a source image your generated the vector drawable from contains some padding. Make sure to remove it and regenerate drawable again.
I know this is not the solution I was looking for, but rather than playing with vectors, I simply created a shapes drawable XML. My goal was to achieve shadows, hence I started with importing SVGs, but actually I was able to achieve shadows with layer-list of shapes.
If anyone ever stumbles upon a solution, I'd be curious to know.
Thanks all!
I have an ImageView that when I look at in the XML preview layout on Eclipse looks fine, but when I launch the app on my hardware device a big whitespace comes to surround it. This is what the actual image is, without the whitespace that is being added. Here is my XML file too. How do I get rid of this whitespace?
Since your image shouldn't be too large, try this:
<?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" >
<ImageView
android:id="#+id/linkMe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="cat"
android:src="#drawable/ashsc" />
</LinearLayout>
This way, the image won't attempt to scale and won't create bounds outside the ImageView's image.
I have a custom toolbar with icons, etc that is modeled after the Android 3.x ActionBar.
One thing I'd like to add are dividers modeled after the ActionBar dividers.
I grabbed the 9-patch divider image from the SDK, and then tried incorporating that in a drawable that I set as the image for a 1dp wide ImageView, but no luck. Here is the Drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/divider_vertical_holo_dark"
android:dither="true" />
Here is the 'divider' ImageView:
<ImageView
android:id="#+id/toolbar_notification_div"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toRightOf="#id/toolbar_notification_txt_accel"
android:visibility="gone"
android:gravity="center_vertical"
android:src="#drawable/bg_actionbar_div"
android:contentDescription="#string/content_desc_div" />
Te end result is that nothing shows up for the divider. Any pointers?
EDIT:
Note that I am turning the various Image and TextViews to View.VISIBLE in the application itself depending on state. Assume they are all visible.
Found the problem, I was using android:src, when I should have been using android:background:
<ImageView
android:id="#+id/toolbar_notification_div"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toRightOf="#id/toolbar_notification_txt_accel"
android:visibility="gone"
android:gravity="center_vertical"
android:background="#drawable/bg_actionbar_div"
android:contentDescription="#string/content_desc_div" />
Your ImageView has android:visibility="gone", so it won't be shown.