CODEWITHSUNDEEP
javaandroidxml
Elad Benda
Elad Benda

Reputation: 36656

set one image above another android

I want to create a layout like this:

enter image description here

I have 3 different images: the background, the white square and the V sign.

How can I position them as in the photo, when I want the box to move from side to side

when onClick is triggered.

I have tried:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/off_background">

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

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

</FrameLayout>

which gives me the order correctly, but not posed correctly:

enter image description here

Upvotes: 0

Views: 383

Answers (4)

Pawan Kumar
Pawan Kumar

Reputation: 273

You should really be looking at the TobbleButton.

Your layout should look like this

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/off_background">
    <ToggleButton 
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn=""
        android:textOff=""
        android:background="@drawable/toggle_bg"
    />

</FrameLayout>

And use a selector (toggle_bg) for the background like below

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/toggle_on" android:state_checked="true" android:state_pressed="true"/>
    <item android:drawable="@drawable/toggle_on" android:state_checked="true" android:state_focused="false"/>
    <item android:drawable="@drawable/toggle_off" android:state_checked="false" android:state_pressed="true"/>
    <item android:drawable="@drawable/toggle_off" android:state_checked="false" android:state_focused="false"/>
</selector>

This is of course assuming you have the drawables for the different states of the ToggleButton.

Hope that helps.

Upvotes: 0

Devrim
Devrim

Reputation: 15533

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:background="@drawable/off_background">

    <ImageView android:id="@+id/checkButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/handle"
        android:src="@drawable/switch_v"
        android:layout_gravity="center"
        android:scaleType="centerInside"/>

</FrameLayout>

Upvotes: 1

Siddharth_Vyas
Siddharth_Vyas

Reputation: 10100

Provide android:layout_gravity="center" for ImageView in your xml

Upvotes: 0

fweigl
fweigl

Reputation: 22018

Give this a try: 

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/off_background" >

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

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

                <ImageView
                    android:id="@+id/upper_layer"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:src="@drawable/switch_v" />
            </RelativeLayout>
        </RelativeLayout>

Upvotes: 0

Related Questions