Develop Reference

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>

Adding several images on already existing background on Android Studio

I'm new in android programming and i want to add images in my already grid existing background.
This is my background image i want to add small images on left and right side of the background. Say animation images that i have designed but I don't know the procedure. Any help will be appreciated.

If you want to put images on in front the background image, it is best if you use a FrameLayout or RelativeLayout. If you do not want it on top but on the side, you should use LinearLayout in "horizontal" orientation.
<FrameLayout android:id="#+id/my_ph"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/background_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sketch" android:layout_alignParentTop="true"/>
<ImageView
android:id="#+id/image2"
android:layout_width="fill_parent"
android:layout_height="fill_paren"
android:layout_alignTop="#id/image"
android:layout_alignLeft="#id/image"
android:layout_alignRight="#id/image"
android:layout_alignBottomp="#id/image"
</FrameLayout>
or
<LinearLayout
android:id="#+id/my_ph"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image1"
android:layout_width="fill_parent"
android:layout_height="fill_paren" </>
<ImageView
android:id="#+id/background_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sketch" android:layout_alignParentTop="true"/>
<ImageView
android:id="#+id/image2"
android:layout_width="fill_parent"
android:layout_height="fill_paren" </>
</LinearLayout>

Display a scrollable image from a url in android studio

I'm trying to create an activity that display an image that is obtained from an url. I want the width of the image to adapt the screen but the height of the image can be longer than the screen so that the image becomes scrollable (vertically).
First of all, I displayed the image from a drawable folder and it worked with the following code :
<ScrollView
android:layout_width="fill_parent"
android:id="#+id/scrollView1"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:src="#drawable/programme"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:scaleType="fitStart"></ImageView>
</LinearLayout>
</ScrollView>
I obtained what I wanted :
http://i.stack.imgur.com/imPkZ.png
But now I wanted the image to charge from an URL so I used the ion library :
Ion.with(imageView)
.load("http://...");
The image load but it is no longer scrollable and doesn't display as wanted.
http://i.gyazo.com/704324724364235bbe417d5447265c42.png
Do you have any solution?
Thanks

I found the solution by setting android:layout_width="match_parent" in ScrollView, ImageView and LinearLayout and setting android:adjustViewBounds="true" for ImageView like this :
<ScrollView
android:layout_width="match_parent"
android:id="#+id/scrollView1"
android:layout_height="wrap_content"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"/>
</LinearLayout>
</ScrollView>

ImageView not showing image on real device

I am trying to create an interface for my application. In layout preview from eclipse everything is ok but when I test the application on the real device the two ImageViews doesn't show the images. I make Android application for 2 years but it is the first time I encounter this problem.
Screenshot from the eclipse layout preview:
And here is a screenshot from my tablet with no changes made to the code:
The xml code I use is simple:
<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="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:background="#ffffff" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/right_background"
android:orientation="vertical"
android:padding="2dp"
android:weightSum="11" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_weight="6"
android:background="#drawable/upper_container" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="12312"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:src="#drawable/video_button" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:background="#drawable/bottom_container" >
<ImageView
android:id="#+id/imageView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:src="#drawable/photo_button" />
</RelativeLayout>
</LinearLayout>
Does anyone have an idea what the problem might be? Thank you.

After all I created a separate RelativeLayout with the background image and I put the ImageView with the button over it. It worked this way.

add:
android:scaleType="fitXY"
also change height and width of imageview to fill parent.like:
android:layout_height="Fill_parent"
android:layout_widtht="Fill_parent"

How to create a slider like on the GoWeather weather app?

The go weather app (Go Weather On Google Play) has a nice little slider near the bottom just above the "MON", "TUE", "WED" in the image below.
You can drag the slider Up to show a longer daily forecast in addition to the 3 days shown. You can also drag the slider down to close the slider and hide the daily graphical temperatures + icons.
I assume this is not a normal slider since it seems to support 3 positions
90% of the screen (visible with forecast)
20% of the screen (as below)
0% of the screen (not visible except the slider bar)
Does anyone know how to make this type of UI?
Really appreciate a code sample or link to sites.

This is just an arrangement of layouts and widgets,
here is the sample xml I created, you can put diff widgets and layouts to design like this,
<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" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="#dimen/padding_medium"
android:text="#string/hello_world"
tools:context=".MainActivity" />
<SlidingDrawer android:id="#+id/SlidingDrawer" android:handle="#+id/slideHandleButton"
android:content="#+id/contentLayout" android:layout_width="wrap_content"
android:layout_height="120dp" android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<Button
android:layout_width="fill_parent"
android:layout_height="10dp"
android:id="#+id/slideHandleButton"
android:background="#00868B" />
<LinearLayout
android:id="#+id/contentLayout"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#90000000"
android:gravity="center|top"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/diego"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Diego"
/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/ellie"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ellie"
/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/scart"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sid"
/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</SlidingDrawer>
Just paste this in your program, you will see the working data. No need to write code for now, You can handle related events base on your needs. Here I used images from site, so download some images or use your existing images and replace the drawable used in this code.
Hope you will get this.