Android frame layout

Question

I have this code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/header_height"
    android:background="@android:color/black"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/header_msg_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:gravity="center"
        android:orientation="horizontal" >

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



            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/messages" />

            <View

                android:layout_marginLeft="-10dp"
                android:layout_marginTop="-10dp"
                android:layout_gravity="left|top"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/circle" />
        </FrameLayout>

        <TextView
            style="@style/HeaderText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="4dp"
            android:text="@string/header_message" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/notifications" />

        <TextView
            style="@style/HeaderText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="4dp"
            android:text="@string/header_notification" />
    </LinearLayout>

</LinearLayout>

The view looks likes this:

The red circle appears to be trimmed. I need the full circle. The center of the circle should be the left top corner of message icon. What changes should i make in the code so that i can get the desired results

Try removing the margins for that view. How do you define your circle? I mean the drawable. — , Sep 25 '15 at 16:19
wasyl is right. you should remove margin and add padding instead. http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding — , Sep 25 '15 at 17:15
did that but center is not aligning with the left top corner of message icon — androider, Sep 25 '15 at 17:41

score 0 · Answer 1 · answered Sep 25 '15 at 16:26

0

The problem is that you define negative margins in your view:

android:layout_marginLeft="-10dp"
android:layout_marginTop="-10dp"

So left and top part of the circle are already outside FrameLayout. One thing that you could do is to add android:padding="10dp" attribute to your FrameLayout, giving the image more space on the left and top (you can also add this padding only on top and left side, using paddingLeft and paddingRight attributes

answered Sep 25 '15 at 16:26

wasyl

3,421
3
27
36

Then probably the most outer layout is constraining your views. Why not decrease the circle size from `30dp` to ~`10dp`, for example? – wasyl Sep 25 '15 at 17:14
did that but center is not aligning with the left top corner of message icon – androider Sep 25 '15 at 17:42

Android frame layout

1 Answers1