Develop Reference

Unable to scroll linear layout inside a horizontal scrollview in android

I am adding few image views inside a horizontal LinearLayout which is again inside a HorizontalScrollView. But the linear layout is not scrolling. Below is my code. Can someone guide me where exactly my xml formation is going wrong?
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
</LinearLayout>
</HorizontalScrollView>

I would suggest use Constraint Layout As Parent and Inside it Use Nested Scroll View With Linear Layout
Here is a sample code, modify according to your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="suraj.iitgandhinagar.Login">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:layout_editor_absoluteX="72dp"
tools:layout_editor_absoluteY="0dp"
tools:ignore="MissingConstraints">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="36dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="272dp"
android:layout_height="237dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:src="#drawable/unnamed"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="59dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

Take a look at this situation. if you use the linear layout as match_parent then don't get the layout width. Use wrap_content. If its don't work then set the fixed size for your image.
<HorizontalScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</HorizontalScrollView>

One layout over another layout

I need one layout over another layout (they can have any heights), like this:
When screen become smaller, I need that brown layout become lower, like this:
I have this code to do this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<FrameLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<FrameLayout
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
</FrameLayout>
On small heights it works fine, but on big screens I have this:
Can you help me please with this?

you could benefit from CoordinatorLayout here to do such effects

Use Linear layout with percentage weights, so that percent of screen covered will always be same despite of resolution as in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_weight ="0.6"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<LinearLayout/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight ="0.6"
android:layout_gravity="bottom|center_horizontal"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
</LinearLayout/>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<FrameLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<FrameLayout
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginTop="70dp"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
Use RelativeLayout and add android:layout_marginTop="70dp" to second child of RelativeLayout. You can change margin as per your requirement.

Android layout_below in RelativeLayout

I came across a strange issue, below is my layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:src="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<ImageView
android:id="#+id/image"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="text"
android:layout_below="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
TextView is not below ImageView as expected, it's below the original position of ImageView.
If i set layout_height of RelativeLayout to 200dp or match_parent, it works fine.
How do i solve this?

Simple solution for you is to use android:layout_height="match_parent" in your root layout.
If you are using wrap_content for your root layout, android:layout_centerInParent and android:layout_below will not work properly.
Either use height as match_parent or static.
choice 1 :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">
choice 2 :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
choice 3:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text" />
</LinearLayout>
Now its upto you to use which solution.

If you want your Relative Layout to Wrap Content and Your Second Image view Apply with layout_centerInParent then you need to give marginTop to Text View.
Try with below code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="?attr/colorPrimary" />
<ImageView
android:id="#+id/imageTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageTest"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:text="text"
android:textSize="22sp" />
</RelativeLayout>
Here is Screen Shot.

Thank for everyone answered.
I have got a solution at last. It is not a very good solution, but it works fine.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/background"
android:src="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<RelativeLayout
android:layout_height="warp_content"
android:layout_width="match_parent"
android:layout_alignTop="#+id/background"
android:layout_alignBottom="#+id/background">
<ImageView
android:id="#+id/image"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="text"
android:layout_below="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</RelativeLayout>

The top answer is actually not necessarily true. You do not need to give the element a margin top for it to be below the image view. In my situation, I have a RelativeLayout with an ImageView and a ListView. I wanted ImageView to be above ListView but the ListView to cover the area below the ImageView. And I achieved it by setting layout_alignParentTop to the ImageView and adding layout_below to the ListView.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="io.menuloop.menuloopandroid.MainActivity">
<ImageView android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/yourStory" android:src="#drawable/ic_face_black_24dp" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/yourStory"
android:layout_centerHorizontal="true" android:id="#+id/listView" />
</RelativeLayout>

How to design this?

I am designing a registration screen.Here I need to place the button on circular image bottom corner,this is my output and I am using 3rd party library from github de.hdodenhof:circleimageview:2.0.0
Now I want to place camera bottom on bottom- right corner of image view
Need Output
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
tools:context="com.example.this_pc.framelayout.MainActivity"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:contentDescription="Image Border"
android:padding="0dp"/>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"
android:layout_gravity="center_horizontal"
android:background="#drawable/round_border"/>
<Button
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|right"
android:background="#drawable/camera"/>
</FrameLayout>
</RelativeLayout>
</ScrollView>

Do like this...
<Button
android:id="#+id/uploadImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="//define according to your layout"
android:layout_marginTop="//define according to your layout"
android:layout_toRightOf="#+id/profile_Image"
android:background="#drawable/camera" />

Android. ImageView wrap in FrameLayout

I want imageView wrap in FrameLayout. And ImageView show fullscreen.
1 variant:
<?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"
android:background="#ffff00" >
<FrameLayout
android:id="#+id/fl_draw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#00ff00">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
</FrameLayout>
</RelativeLayout>
(source: cs412821.vk.me)
2 variant:
<?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"
android:background="#ffff00" >
<FrameLayout
android:id="#+id/fl_draw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#00ff00">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
</FrameLayout>
</RelativeLayout>
(source: cs412821.vk.me)
AdjustViewBounds not working.
What I'm trying to achieve:
(source: cs412821.vk.me)
How do I handle this? Thank you very much. Sorry for my english.

Change your imageview attributes from :
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
To:
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
It also depends on how tall your image is.. If you know the width and height, you can adjust it accordingly.
Also, you can use gravity attribute if you want the want the image to be in the center position.