CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayout
user5076870
user5076870

Reputation:

Overlap textviews in LinearLayout

My problem is that i want to overlap two TextViews in a LinearLayout. On smartphone looks alright, but on tablet the negative margin gives me a hard time.

This is the layout i want to obtain enter image description here

And here is the code. How can i modify it so i can overlap one text view on the upper right part of the other text view without using negative margin?

<FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@drawable/bottom_bar_back_with_arrow"

            android:layout_weight="1">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center">

                <TextView
                    android:id="@+id/mShowHideScale"
                    style="@style/BottomBarButton"
                    android:layout_weight="1"
                    android:drawableTop="@drawable/show_calibrate_tool"
                    android:text="Calibrate" />

                <TextView
                    android:id="@+id/badgeRadius"
                    android:layout_width="14dip"
                    android:layout_height="14dip"
                    android:textColor="@color/primary_color"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:background="@drawable/shape_notification"
                    android:layout_marginLeft="-18dp"
                    android:layout_marginTop="-27dp"/>
            </LinearLayout>
          </FrameLayout>

Upvotes: 3

Views: 1176

Answers (2)

kggoh
kggoh

Reputation: 742

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:clickable="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/White">

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

        <com.UTU.View.UtuTextView
            android:visibility="visible"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:gravity="center"
            android:textStyle="bold"
            android:textSize="17sp"
            android:text="" />

        <com.UTU.View.UtuButton
            android:id="@+id/btn_crop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/transparent_full"
            android:textColor="@color/black"
            android:clickable="true"
            android:layout_marginTop="30dp"
            android:text="Select Image" />

        <FrameLayout
            android:background="@drawable/utu_round_background"
            android:layout_marginRight="10dp"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="right">

            <ImageView
                android:background="@color/red"
                android:src="@drawable/icon_user_default"
                android:id="@+id/iv_fragment_dashboard_user_image"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="right" />

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/icon_profile_border" />
        </FrameLayout>

    </FrameLayout>

</LinearLayout>

Try this. I use my code to modify some layout to test, for circle drawing, you may try to modify the background of the image or button.

Upvotes: 1

Kevin Murvie
Kevin Murvie

Reputation: 2642

This is how I do it in my code 

<RelativeLayout
    android:layout_width="@dimen/menuitem_width"
    android:layout_height="@dimen/toolbar_height">

    <ImageView
        android:id="@+id/menu_layout_notification_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/mi_menu_notification"/>

        <RelativeLayout
            android:id="@+id/menu_layout_notifcation_newIndicatorWrapper"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginTop="-5dp"
            android:layout_marginEnd="-5dp"
            android:background="@drawable/background_red_notif"
            android:layout_alignTop="@+id/menu_layout_notification_icon"
            android:layout_alignEnd="@+id/menu_layout_notification_icon"
            android:visibility="gone">

...
        </RelativeLayout>
</RelativeLayout>

By aligning it to top and end of the ImageView, the ends of top and end of the RelativeLayout is aligned with the top and end of the ImageView. Then I add negative margin and leaving 5 dp inside the ImageView

Upvotes: 0

Related Questions