Develop Reference

Impossible put at the top one image using a constraintlayout in android

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"

Custom curvy shape for a CardView in android

I've just started with android and, in order to learn something, i'm simply trying to recreate some basic concept that i found on the web. My biggest question so far is which is the best method to draw a custom curvy shape in android. I know that similar question have been asked multiple times here, but i'm unable to find the solution to my problem.
I do not understand how to replicate a card like this. My only idea so far is to create curvy line in illustrator, save into svg and import in android as vector assets. At this point i was simply thinking to create a white rectangle and overlay the vectori assets. I absolutely don't think this is teh best way to do it but so far i don't know another way.
Thanks and sorry my english

either user CardView or create your custom view.
CardView
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="#dimen/scale_7dp"
app:cardElevation="#dimen/scale_5dp"
app:cardUseCompatPadding="true">
</android.support.v7.widget.CardView>
Custom View
create a shape in your drawable.xml folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/dull_white" />
<corners
android:bottomLeftRadius="#dimen/scale_5dp"
android:bottomRightRadius="#dimen/scale_5dp"
android:topLeftRadius="#dimen/scale_5dp"
android:topRightRadius="#dimen/scale_5dp" />
</shape>
Hope this helps you.

The best implementation would be to use CardView in your layout.
include
compile 'com.android.support:cardview-v7:21.0.0-rc1'
or any other version which is compatible with your existing support library.
after that, use this in your layout xml file
<android.support.v7.widget.CardView
android:id="#+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#color/grey_300"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
place all the other views inside this cardview and you will get a curvy edge.

Add this dependency in app, this lib will give a rounded corner Image and other for cardview.
implementation 'com.makeramen:roundedimageview:2.3.0'
implementation 'com.android.support:cardview-v7:28.0.0-rc01'
In xml parent CardView and its Child RoundedImageView have same corner radius. I hope you know, how cardview works. Where "YOUR_DRAWABLE_HERE" is written please change it with your drawable
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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_margin="10dp"
app:cardElevation="0dp"
app:cardBackgroundColor="#00ffffff"
android:layout_width="match_parent"
android:layout_height="100dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/iv_look"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="YOUR_DRAWABLE_HERE"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:riv_corner_radius="10dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:layout_margin="20dp"
android:layout_width="100dp"
android:src="#android:drawable/btn_default"
android:layout_height="50dp" />
<TextView
android:text="YOUR TEXT"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>

Cardview - white border around card

I am using a cardview as the root of a custom view I am writing. I using the v7 support library. My XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
My problem is that I am getting a white border around my card view. It looks like it is there to indicate elevation as it is thicker on the right side. I've tried adjusting cardElevation and MaxCardElevation in my XML like so :
card_view:cardElevation="0dp"
and in code in my custom view that extends CardView and uses this layout:
setCardElevation(0);
setMaxCardElevation(0);
But the white border persists. I'm not sure how to get rid of it. If anyone had any input into why this is happening or suggestions on how I can remove the white border it would be appreciated. Thanks much.

I know it's a bit late, but for anyone having a similar problem:
I had the same issue: A white border was shown on pre-lollipop devices.
I solved it setting the cardPreventCornerOverlap to false on your XML.
Like this:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>

Support CardView doesn't support content clipping, because it's expensive on older devices. It's possible to clip content using Canvas.saveLayer/restoreLayer and PorterDuff modes. This is how Carbon implements rounded corners with correct content clipping. See the image:

I might be late in the game, but I had the same issue. Just wanted to share a simple solution!
My custom view extended a CardView and I had a margin applied to the root element (i.e. CardView) in the XML just like in the original question. This ended up giving me the extra white border like this:
Solution was to move the margin from root of the Custom View XML to the declaration of your custom view (check comments in the snippet)
Code snippet:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cvSettings"
style="#style/DefaultCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Remove this -->
app:cardElevation="#dimen/default_card_elevation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
.
.
.
</android.support.v7.widget.CardView>
Ended up just moving over the margin to my custom view declaration which got rid of the extra white border:
<com.example.android.custom.MyCustomView
android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Move it here-->
cv:pt_widgetColor="#color/colorAccent" />
After the change, much cleaner :) :

use cardBackgroundColor="color" in xml card_view
sample code :
<android.support.v7.widget.CardView
android:id="#+id/card_view_khaterat"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
app:cardBackgroundColor="#f56f6c"/>

Repeat Image in with ImageView in RelativeLayout

I want to repeat the image with ImageView with in RelativeLayout. Can it be possible to use the Bitmap xml and use tilemode "repeat" with RelativeLayout, because what I have seen things on Internet they all dealing with LinearLayout.
Any help or tip will be warmly welcomed.

Create an XML file named background in Drawable folder
background.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/imagename"
android:tileMode="repeat" />
In your Relative Layout add the above XML as background
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:background="#drawable/background" />

Yes of Course, You can use it with relative layout. Use it as background of your RelativeLayout. I also used it in my project.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/top_header_bg_repeat"
android:gravity="center">
top_header_bg_repeat.xml (in drawable folder)
----------------------------------------------
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/top_header"
android:tileMode="repeat"
android:dither="true"/>
Set Bitmap in ImageView
----------------------
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/top_header_bg_repeat"
android:scaleType="fitXY"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/top_header_bg_repeat"/>

Yes, its possible. Define your repeating image as Drawable (bitmap) with android:tileMode="repeat" in XML and use it as background of your RelativeLayout.

In all requests exists one small problem if you image will be great and smaller what size your layout, image will not resize, only repeat by X.
For repeat by Y you can do it only programmly.
I solve my problem like this (set gravity fill)
drawable bg for image
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/table_cells_bg_img"
android:tileMode="repeat" android:gravity="fill" />
and on layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="#dimen/table_cell_height">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="#dimen/table_cell_height"
android:scaleType="fitXY"
android:src="#drawable/table_cells_bg"/>
<TextView
android:id="#+id/txtActivityTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/avatarImage"
android:text="TextView"
android:textColor="#color/white"
android:textSize="#dimen/font_size_middle" />
</RelativeLayout>
And table_cells_bg_img it's image with width=1px and height = 1px
and etc of layout, so now your image it's like background and it's will resized for any size of parent layout
Try, maybe help. To be cleared in my case i need tiled background image to full size of tablecell repeated by X coordinate (like i can do it on iOS). So i solve it like i describe.

Background in tab widget ignore scaling

I tried to use a background (480x320) for my tab content. Using a xml as drawable, I should be able to scale the image. This works fine outside the tabhost/tabactivity. If I try to use it inside the tabcontent, the scaleType doesn't work. He ignores every scaleType I tried.
tabcontent:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<include layout="#layout/main_list" />
</RelativeLayout>
background.xml in res/drawable
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background_img"
android:scaleType="centerInside"/>
Of couse I checked if the xml is really used by changing the image, at the image changed so the xml is used.
The used scaling seems to be fitXY, because the whole background is visible but the aspect ration is ignored.
Some ideas?

Try just placing this inside the RelativeLayout and not using your background drawable:
<Drawable
android:src="#drawable/background_img"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:scaleType="fitCenter" />
Since elements inside the relativelayout can overlap, this oughta work, and using a Drawable in the layout independently instead of a Bitmap included as the element background_src might give you more flexibility.

set the background to ur tabhost tag not in tabcontent layout. that is
<TabHost android:background="#drawable/background">