CODEWITHSUNDEEP
androidandroid-layout
Amokrane Chentir
Amokrane Chentir

Reputation: 30385

How to design a frame in Android?

I would like to design a frame using 4 ImageView for each of the top, bottom, left and right side of that frame, as shown in the following example:

enter image description here

Seems simple, but I am really having a hard time doing it. I tried using a FrameLayout along with layout_alignParentLeft|Right|Top|Bottomlike the following:

<?xml version="1.0" encoding="utf-8"?>
 <FrameLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/camera_masque"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#FFFFFF"
     >
        <ImageView
            android:id="@+id/camera_top_masque"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_top_masque_photo"
            android:layout_alignParentTop="true"
        />

        <ImageView
            android:id="@+id/camera_left_masque"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/ic_left_masque_photo"
            android:layout_alignParentLeft="true"
        />

        <ImageView
            android:id="@+id/camera_right_masque"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/ic_right_masque_photo"
            android:layout_alignParentRight="true"
        />

         <ImageView
            android:id="@+id/camera_bottom_masque"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_bottom_masque_photo"
            android:layout_alignParentBottom="true"
        />
</FrameLayout>

It works well for the top and left sides, but not for the others (like it places the right and bottom sides on the top side...).

I also tried using a RelativeLayout like this:

<?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/camera_masque"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#FFFFFF"
     >
        <ImageView
            android:id="@+id/camera_top_masque"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_top_masque_photo"
            android:layout_alignParentTop="true"
        />

        <ImageView
            android:id="@+id/camera_left_masque"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="-2dp"
            android:src="@drawable/ic_left_masque_photo"
            android:layout_below="@id/camera_top_masque"
        />

        <ImageView
            android:id="@+id/camera_right_masque"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/ic_right_masque_photo"
            android:layout_marginRight="-2dp"
            android:layout_below="@id/camera_top_masque"
            android:layout_alignParentRight="true"
        />

         <ImageView
            android:id="@+id/camera_bottom_masque"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_bottom_masque_photo"
            android:layout_alignParentBottom="true"
        />
</RelativeLayout>

But same thing, does not work as expected.

Any idea what is wrong with my layouts? How could I accomplish this?

Note: Images sizes are: 640*114px (top, bottom) and 34*572 (left, right).

Thanks!

Upvotes: 1

Views: 1790

Answers (3)

Chronos
Chronos

Reputation: 1962

If the frame are built by the same images. You can try a 9-patch drawable or a shape with borders and transparent center.

Upvotes: 1

Amokrane Chentir
Amokrane Chentir

Reputation: 30385

I will answer my own question in order to highlight the mistakes I have made. Turns out, I was almost there, I only had to add an alignParentTop at both the right and left ImageViews and an alignParentLeftat the bottom ImageView.

I don't understand the logic behind this, though! (if someone could explain...)

Upvotes: 1

Moog
Moog

Reputation: 10193

I usually use linearlayout for things like this and control the fill using layout_weight parameters. You will probably find a lot of similar questions here.

Simply create a vertical linear layout and in the middle section create a horizontal linear layout.

This is made a lot simpler if you use the WYSIWYG layout designer in Eclipse ADT ... .see tools.android.com for details

There are a lot of tutorials available for Android layouts which are a more useful resource as Stack Overflow tends to deal with the programming issues rather than layouts.

Upvotes: 4

Related Questions