CODEWITHSUNDEEP
androidandroid-layout
Ali
Ali

Reputation: 2042

Overlap views in horizontal LinearLayout

I need to design a layout with five ImageViews in horizontal orientation.

I can reach my idea with a basic LinearLayout, but I want a design pattern like the following image:

enter image description here

Note: All ImageViews are in oval design.

Any ideas?

Upvotes: 1

Views: 3312

Answers (3)

Simas
Simas

Reputation: 44118

You can use a RelativeLayout for this task. Here's an example:

<?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">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="-18dp" />
    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/img1"
        android:layout_marginRight="-18dp" />

    <ImageView
        android:id="@+id/img5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/img4"
        android:layout_marginRight="-18dp"/>
    <ImageView
        android:id="@+id/img4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/img3"
        android:layout_marginRight="-18dp" />
    <ImageView
        android:id="@+id/img3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/img2"
        android:layout_marginRight="-18dp" />

</RelativeLayout>

Note that here, the last ImageView is the one that will be on top of all others.

Upvotes: 1

j__m
j__m

Reputation: 9625

you can overlap items in a LinearLayout using negative margins, but they won't stack in that order.

you could use a RelativeLayout instead. you'd lay out the items from outside to inside to achieve the desired stacking order.

here's an example with a fixed width:

<RelativeLayout android:layout_width="150dp" android:layout_height="wrap_content">
    <ImageView 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" android:layout_centerVertical="true" />
    <ImageView 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentRight="true" android:layout_centerVertical="true" />
    <ImageView 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" android:layout_centerVertical="true"
        android:layout_marginLeft="25dp" />
    <ImageView 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentRight="true" android:layout_centerVertical="true"
        android:layout_marginRight="25dp" />
    <ImageView 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" android:layout_centerVertical="true" />
</RelativeLayout>

if you don't have a fixed-width container, you'll have to calculate the margins in code with this approach.

of course, if you don't have a fixed width, you'll need code of some sort anyway as there's nothing built into android that's really meant for this sort of thing.

Upvotes: 2

Arunjyothis
Arunjyothis

Reputation: 1446

You are looking for developing a Carousel kind of widgets. You can refer any Carousel implementation in android. Many are available, you can refer one here https://code.google.com/p/carousel-layout-android/

Upvotes: 0

Related Questions