Develop Reference

Background not filling entire screen in scrollview android

I'm developing an app and I need to fill the entire screen with a background, this view contains a scrollview. The problem is that the background is not covering the entire screen, it has a white stripe at the bottom, like the image below.
I have already tried many options of scaleType, like fitXY, centerInside, etc. none of them worked out.
My XML is below.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/signup_background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="40dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/image_view_photo"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:layout_marginBottom="25dp"
android:src="#drawable/camera_icon" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_name"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/name_icon"
android:hint="#string/field_name"
android:inputType="textCapWords" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_email"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/email_icon"
android:hint="#string/field_email"
android:inputType="textEmailAddress" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_password"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/password_icon"
android:hint="#string/field_password"
android:inputType="textPassword" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edit_text_confirm_password"
style="#style/BaseEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="35dp"
android:drawableLeft="#drawable/password_icon"
android:hint="#string/field_confirm_password"
android:inputType="textPassword" />
<com.jacksonueda.reachalert.Utils.LoadingButton
android:id="#+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="#string/action_sign_up" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Can anyone help me? Thanks.

I think that you have to give background to ConstraintLayout with width wrap_content. also set your height for both ScrollView and ConstraintLayout wrap_content.

In constraint layout you have to specify constraint. You don't have specified constraint in ImageView
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/signup_background" />
Replace it with
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/signup_background"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintLeft_toLeftOf="parent"
card_view:layout_constraintRight_toRightOf="parent"
card_view:layout_constraintTop_toTopOf="parent" />

Try to use RelativeLayout instead of ConstraintLayout in your xml. Relative Layout is best for overlapping two elements of xml.

I got the answer, what I needed to do was to put a RelativeLayout as parent of the ScrollView, like below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/signup_background"
android:orientation="vertical"
android:padding="40dp">
...
</LinearLayout>
</ScrollView>
</RelativeLayout>

Android - ImageView overlay another ImageView

I would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:
I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.
EDIT:
Sorry, here is my layout xml code
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
</RelativeLayout>

I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.
<android.support.design.widget.CoordinatorLayout
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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<TextView
android:id="#+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/white"
android:textSize="17sp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/black"
android:textSize="17sp"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/plus"
app:layout_anchor="#+id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Alternate way Try this
<FrameLayout 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="match_parent"
android:orientation="vertical">
// this is your first layout to put the big image
// use src or backgroud image as per requirement
<LinearLayout
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
// this is your bottom layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
// This is the imageview which overlay the first LinearLayout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/success"
android:adjustViewBounds="true"
android:layout_gravity="center"/>
</FrameLayout>
its look like this
found one more solution for that (Edit)
if your big image size is fixed height you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/layoutTop"
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="200dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/layoutTop" >
</RelativeLayout>
<ImageView
android:id="#+id/overlapImage"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="#id/layoutBottom"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-20dp"
android:adjustViewBounds="true"
android:src="#drawable/testimage" />
</RelativeLayout>
Refernce :- Android: Placing ImageView on overlap between layouts
Hope this will help.Good Luck

Try out this way:
Just change layout_width and layout_height according to your need.
<?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" >
<View
android:id="#+id/viewOne"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#126989" />
<View
android:id="#+id/viewTwo"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/viewOne"
android:background="#547866" />
<View
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignBottom="#+id/viewTwo"
android:layout_centerHorizontal="true"
android:background="#ff7800"
android:layout_marginBottom="35dp" />
</RelativeLayout>
It will look like this:

I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/parentLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/image_view_product"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/circle"
android:src="#drawable/ic_add_circle_green_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Use layout_marginTop = -20dp ( Half of your image size ). It will go up.
android:layout_marginTop="-20dp"

put both the image in Relative layout
first define the image you want to put behind the green circle
than define the green circle as
android:layout_alignBottom="#+id/Image1"
Than adjust the position by giving margin to the green circle image.

I recommend you to use a framelayout with these two images.
with the refresh imageview at the bottom and the table fan at the top.
Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.
And do the set the gravity of the refresh icon to be bottom|center to make it look this way.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_fan"
android:scaleType="centerCrop"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<ImageView
android:src="#drawable/ic_refresh"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center|bottom"/>
</FrameLayout>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="#+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.
I did not run this code so if you face any issues just let me know i hope this works well for you..

Screenshot:
activity_main.xml:
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="null"
android:scaleType="fitXY"
android:src="#drawable/album9" />
<ImageView
android:id="#+id/imageView_round"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/user_profile" />
</RelativeLayout>

Using layout_above/layout_below does not yield expected results. Item dissapears

I have the following code:
grid_view_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_height="wrap_content">
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_squareImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:visibility="invisible"/>
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_selectedColor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:background="#e85349"
android:alpha="0.45"
android:visibility="invisible"/>
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_constantGrey"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:background="#000000"
android:alpha="0.45"
android:visibility="visible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:textColor="#FFFFFF"
android:id="#+id/gridItem_textView"
android:layout_centerInParent="true"
android:hint="AAAAAAAAA"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:src="#drawable/checkmark"
android:id="#+id/gridItem_selectedCheckMark"
/>
<ProgressBar
android:id="#+id/gridItem_progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:visibility="visible"/>
</RelativeLayout>
Which yields this view:
I want my item to look like this:
So, I added this line in my CheckMark imageView code:
android:layout_above="#+id/"gridItem_progressBar"
And the checkMark imageview just dissapears. Same for layout_below, as shown here:
Can anyone help me in solving this problem?
Cheers!

It may help you if you use padding instead of above or below, why do you want linear layout as your parent and relative view as child it will be more easier if you have relative layout as parent. Hope this may help you.

Make ImageView take up all available vertical space and grow width to scale up/down proportionally in RelativeLayout

I'm targeting API level 21 and min is also 21 (I support Lollipop only for now, it's a pet project to learn).
I'm having problems with a custom ListView item layout. Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#FF0000"
android:src="#drawable/ic_test"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/test_list_item_icon"
android:textSize="50sp"/>
</RelativeLayout>
And here is what it looks like (the icon's red background color is only to see how big the actual view is):
I would like the image view to behave like the following: take up the available vertical space at the 'start'/left of the layout, have the image scale proportionally, and have the width be grown so that the image can be fully shown, like this (pardon my gimp skills):
Is it possible?

Try this for your ImageView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#FF0000"
android:src="#drawable/ic_test"
android:adjustViewBounds="true"
android:scaleType="fitXY"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/test_list_item_icon"
android:textSize="50sp"/>
</RelativeLayout>

In the end I decided to create one more icon size, xxxhdpi, and it all looks nice now.
Many thanks to #corsair992 for information about the bug in one of the comments.

HI wujek the reason for your problem is you set height as wrap content for your relative layout . so it will take the textview's height as its height .then image view will use this as its height .so change relative layout height to match parent. Please try and let me know thanks
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:adjustViewBounds="true"
android:background="#ff0000"
android:src="#drawable/ic_launcher"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/layout_1"
android:gravity="center"
android:text="bhsbd"
android:textSize="50sp" />

try this
if u want to image should capture imageview size use background insted src.
if red background is mandatory use another relative layout as parent for imageview.
hope it works fo u..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#FF0000" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:background="#drawable/ic_launcher"
android:adjustViewBounds="true"
tools:ignore="ContentDescription" />
</RelativeLayout>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/layout_1"
android:textSize="50sp" />
</RelativeLayout>
edit 2
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/test_list_item_name"
android:layout_alignTop="#+id/test_list_item_name"
android:background="#FF0000" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:adjustViewBounds="true"
tools:ignore="ContentDescription" />
</RelativeLayout>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/layout_1"
android:textSize="50sp"
android:text=" text 5>" />
</RelativeLayout>

Define a LineatLayout with weightsum.
<LinearLauyout
----
android:orientation="horizontal"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4">
</LinearLayout>
you can adjust the weightsum as per your requirement.

android children inside relativelayout same height

I want two Views inside a RelativeLayout with the same height one below the other.
I can't use LinearLayout's weight so I have to figure out another way to do it.
From what I googled and read on SO I found out as a solution to use an anchor View centerHorizontal in the parent View and place the 2 children one above and one below that anchor View, but it doesn't seems to work.
My code so far is :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="top" >
<View android:id="#+id/anchor"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#000"/>
<RelativeLayout
android:id="#+id/toplayout"
android:background="#990000"
android:layout_above="#+id/anchor"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/bottomlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/anchor">
<RatingBar
android:id="#+id/ratingBar1"
android:layout_width="218dp"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
Is there a mistake to my code or the way I'm trying to solve it is wrong from the beginning?

Your approach is correct, but by the Anchor View, you set its layout to be Central Horizontal, but it should be Central Vertical. Also, you can use Align Top and Bottom to match the Views' edges.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="top" >
<RelativeLayout
android:id="#+id/toplayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#990000"
android:orientation="horizontal"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/anchor"
android:layout_above="#+id/anchor">
</RelativeLayout>
<View android:id="#+id/anchor"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:background="#000"/>
<RelativeLayout
android:id="#+id/bottomlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/anchor"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/anchor" >
<RatingBar
android:id="#+id/ratingBar1"
android:layout_width="218dp"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>