CODEWITHSUNDEEP
androidandroid-layoutandroid-imageviewandroid-relativelayout
BVtp
BVtp

Reputation: 2480

ImageView can't be positioned in the right place in the Layout

I want to make a shopping cart image, with a little indicator at the top-right corner to show how many products were selected/ordered. The thing is, I can't place it in the top right corner, only the left one (default) or center.

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

         <ImageView
              android:id="@+id/shoppingCartIcon"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon_cart" />

         <ImageView
              android:id="@+id/indicatorIcon"
              android:layout_width="10dp"
              android:layout_height="10dp"
              android:layout_gravity="top|right"
              android:src="#0066ff" />

</RelativeLayout>

Upvotes: 1

Views: 67

Answers (4)

user1140237
user1140237

Reputation: 5045

By using FrameLayout you can give it with some padding & margin

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/shoppingCartIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_cart" />

        <ImageView
            android:id="@+id/indicatorIcon"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_gravity="top|right"
            android:src="#0066ff" />

    </FrameLayout>

UPDATE

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/shoppingCartIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_cart" />

        <TextView
            android:id="@+id/indicatorIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:layout_marginLeft="25dp"
            android:background="@drawable/circle_shape"
            android:text="5"
            android:textSize="24sp" />

    </FrameLayout>

You can create shape as per your wish

res/drawable/circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#0066ff"></solid>

</shape>

Apart from this i would suggest you other third library which is very nice for displaying this type of badge or highlighted view

Upvotes: 2

Kastriot Dreshaj
Kastriot Dreshaj

Reputation: 1121

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
    android:id="@+id/shoppingCartIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icon_cart" />

<ImageView
    android:id="@+id/indicatorIcon"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:src="#0066ff" />

</RelativeLayout>

Upvotes: 0

Nicolas Cortell
Nicolas Cortell

Reputation: 649

The parent is a RelativeLayout so try to use the properties :

android:layout_alignParentRight="true"
android:layout_alignParentTop="true"

on your "@+id/indicatorIcon".

Hope it helps.

Upvotes: 0

temre
temre

Reputation: 189

you can add this code to your ImageView tag. 

android:layout_marginLeft="90dp"

It will make the ImageView go right marginLeft gives a blank depends on the size you want. You can change the size however you want.

Upvotes: 0

Related Questions