CODEWITHSUNDEEP
javaandroidandroid-layouttextviewandroid-xml
blackHawk
blackHawk

Reputation: 6307

How to hide view behind the view

I'm placing a textview over a line as textview have light color background the line behind the textview is visible, I want to hide that portion of line thats behind textview, how can i do that

Thanks in advance!

Like this enter image description here

Upvotes: 1

Views: 517

Answers (4)

AskNilesh
AskNilesh

Reputation: 69689

Try this

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

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

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_centerInParent="true"
                android:background="@color/colorAccent" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:text="Nilesh" />
        </RelativeLayout>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:gravity="center"
        android:orientation="horizontal">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@color/colorAccent" />


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#FFFFFF"
            android:text="NILu" />


        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@color/colorAccent" />


    </LinearLayout>

</LinearLayout>

OUTPUT

enter image description here

Upvotes: 3

yogesh lokhande
yogesh lokhande

Reputation: 1275

You can either try it like following code

shape_line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    >
    <solid android:color="#FFFFFF">
    </solid>
    <stroke
        android:width="1dp"
        android:color="#000000" />
    <size android:height="2dp" />
</shape>

Add this to your drawable folder. and in your layout add following layout 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/shape_bg_line"
    tools:ignore="MissingConstraints">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#FFFFFF"
        android:padding="5dp"
        android:text="Hello" />


</RelativeLayout>

Here is the output :enter image description here

Upvotes: 0

Headcracker
Headcracker

Reputation: 521

I think there are two options:

  1. You use three views side-by-side to have line - text - line
  2. You use two views in a FrameLayout: The first one will be the view for the line, and the second one the TextView, which will be drawn above the line. Make sure that the TextView has a non-transparent background and its layout_width is wrap_content. Depending on your desired result you might want to add some horizontal padding to the TextView, so that the line doesn't directly touch the text.

Upvotes: 0

SpiritCrusher
SpiritCrusher

Reputation: 21043

You can do it in multiple ways using a RelativeLayout.

 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <View
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:background="#000000"
        android:layout_height="2dp"/>
    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:background="#FFFFFF"
        android:paddingLeft="10dp"
        android:paddingRight="10sp"
        android:layout_centerInParent="true"
        android:text="Some Demo text"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
         />
</RelativeLayout>

Other way can be as .

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:background="#000000"
        android:layout_toLeftOf="@+id/txt"
        android:layout_height="2dp"/>
    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10sp"
        android:layout_centerInParent="true"
        android:text="Some Demo text"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
         />

    <View
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:background="#000000"
        android:layout_toRightOf="@+id/txt"
        android:layout_height="2dp"/>
</RelativeLayout>

Upvotes: 2

Related Questions