We Keep Coding

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

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

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>

I think there are two options:
You use three views side-by-side to have line - text - line
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.

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 :

No Ripple Effect in RecyclerView

I am using RecyclerView to display quote list Fragment. I am trying to use Ripple effect in list item but its not working. My RecyclerView is like below
<android.support.v7.widget.RecyclerView
android:id="#+id/listQuoteView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/BackColor"
android:layout_above="#+id/startAppBanner"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
And List Item XML is like below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="6dp"
app:cardElevation="4dp">
<LinearLayout
android:id="#+id/quoteActionView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/TextColor"
android:clickable="true"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageAuthorView"
android:layout_width="#dimen/imageAuthorView"
android:layout_height="#dimen/imageAuthorView"
android:visibility="visible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textQuote"
android:ellipsize="end"
android:layout_width="match_parent"
android:layout_height="0dp"
android:paddingRight="#dimen/list_text_margin"
android:paddingLeft="#dimen/list_text_margin"
android:gravity="center_vertical"
android:layout_weight="2"
android:maxLines="2"
android:layout_margin="2dp"
android:lineSpacingExtra="#dimen/linespace"
android:textColor="?attr/MainTextColor"
android:text="Hello there two line text for show here which I am typing for a test"
android:scrollHorizontally="true"
android:textSize="#dimen/textDetailQuote"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="?attr/dark_color"
android:orientation="horizontal">
<ImageView
android:layout_width="#dimen/likeIcon"
android:layout_height="#dimen/likeIcon"
android:layout_weight="1"
android:tint="?attr/List_Text"
android:src="#drawable/time_new_ic" />
<TextView
android:id="#+id/lblTimeCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="00:00"
android:textStyle="bold"
android:textColor="?attr/List_Text"
android:textSize="#dimen/lblTime" />
<ImageView
android:layout_width="#dimen/likeIcon"
android:layout_height="#dimen/likeIcon"
android:layout_weight="1"
android:tint="?attr/List_Text"
android:src="#drawable/fav_new_ic" />
<TextView
android:id="#+id/lblLikeCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="200"
android:textStyle="bold"
android:textColor="?attr/List_Text"
android:textSize="#dimen/lblTime" />
<ImageView
android:layout_width="#dimen/likeIcon"
android:layout_height="#dimen/likeIcon"
android:layout_weight="1"
android:tint="?attr/List_Text"
android:src="#drawable/share_new_ic" />
<TextView
android:id="#+id/lblShareCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textStyle="bold"
android:text="100"
android:textColor="?attr/List_Text"
android:textSize="#dimen/lblTime" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
I have tried many solutions listed in stackoverflow but not worked any. If I remove CardView from List Item.... Ripple Effect shows itself behind LinearLayout but I want to use CardView also. Let me know if someone can help me to solve this issue. Thanks.
Note : I have solved it using this solution. Thanks

Set the ripple as a foreground drawable on the CardView:
android:foreground="?attr/selectableItemBackground"
This will allow the ripple to show up above the content inside the CardView, which is usually what you want for a CardView

Create ripple drawable and set it as foreground of your layout
ripple.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/your_color"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/your_color" />
</shape>
</item>
</ripple>
Change your code like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:clickable="true"
android:foreground="#drawable/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="6dp"
app:cardElevation="4dp">

Use android:background="?android:attr/selectableItemBackground"

XML layout 2 views in centre, one at top

I created linearlayout with two buttons in center (buttons 1 and 2), but I can't manage it to create the view 3 on top, which I need to make it fill whole width and adjust it's height by it (keep proportions). How do I create third view?
Image:
Code:
<?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:background="#drawable/bg"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content" >
<ImageButton
android:background="#drawable/btn_one"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
<ImageButton
android:background="#drawable/btn_second"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
</LinearLayout>

I would recommend you use relative layouts, they are the closest thing in android to an "absolute layout" replace the button tags with Image button tags
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="215dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_below="#+id/button2"
android:layout_alignStart="#+id/button2" />
</RelativeLayout>

try this code set height and width what size of image button you need and simple look what you need.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp"/>
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp" />
</LinearLayout>

Center vertically listview

I have a listview and a layout that is displayed in this way:
I wish that the items were also centered vertically. How can I do? this is the code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+ListView/id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="24dp"
android:text="invisibile"
android:visibility="gone" />
<TextView
android:id="#+ListView2/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="22dp"
android:text="TextView"
android:textSize="24dp" />
</RelativeLayout>

You have to create your own layout for your listview item. Soemthing
like this
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Then, in your code, your going to have to do this
new ArrayAdapter(this, R.layout.yourRowItemLayoutHere,
R.id.textItem, functions);

Hop this is helpful to you
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal">
<TextView
android:id="#+id/videoView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

Try this. it will place the text view inside relative layout both vertically and horizontally.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<TextView
android:id="#+id/some_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

How can I make my ListView row look like the Twitter app [Screenshot]?

I am building a Twitter type client. Here is what my ListView row looks like
I want it to look more like:
How can I get my padding and positioning of the avatar correct? Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/RelativeLayout01" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:id="#+id/avatarImageView">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/usernameTextView"
android:textStyle="bold"
android:layout_toRightOf="#+id/avatarImageView"
android:layout_alignParentTop="true" android:textColor="#636363">
</TextView>
<TextView
android:id="#+id/bodyTextView"
android:layout_below="#+id/usernameTextView"
android:layout_toRightOf="#+id/avatarImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:textColor="#636363">
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/usernameTextView"
android:id="#+id/dateTextView"
android:text="date" android:textColor="#636363">
</TextView>
</RelativeLayout>

<ListView android:id="#android:id/list"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1.0"
android:textColor="#444444"
android:divider="#drawable/list_divider"
android:dividerHeight="1px"
android:cacheColorHint="#00000000">
</ListView>
create your own divider gradient named “list_divider” which is an xml file that you throw in your drawable folder. you just specify the colors for the left, center and right side:
list_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#999999"
android:centerColor="#555555"
android:endColor="#999999"
android:height="1px"
android:angle="0" />
</shape>
</item>
</layer-list>
layout for each row in the list. This is also done through a layout xml file that you specify later in your code.
row.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="4px">
<ImageView android:id="#+id/avatar"
android:layout_width="48px"
android:layout_height="48px"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="4px">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="end"
android:textColor="#444444"
android:padding="0px"/>
<TextView android:id="#+id/email_url"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:padding="0px"
android:textSize="10px"/>
<TextView android:id="#+id/postTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:padding="0px"
android:textSize="10px"/>
<TextView android:id="#+id/comment"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="false"
android:textColor="#666666"
android:maxLines="5"
android:ellipsize="end"/>
<TextView android:id="#+id/status"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
edit: removed line number, because i m a kind person

Heere ya go: you just use linear layout instead of relative. and use its weights. and the last important thing is to wrap views inside layout components. like ImageView inside another linearlayout or relative etc.. so try some combinations with this and it will work fine. also for the list divider you can set a null drawable or a custom shape etc. your row background can also be a shape or some color or drawable.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LinearLayout01" xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="130dp">
<LinearLayout android:layout_height="fill_parent" android:id="#+id/linearLayout1" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:id="#+id/avatarImageView" android:layout_height="75dp" android:layout_width="75dp"></ImageView>
</LinearLayout>
<LinearLayout android:layout_height="fill_parent" android:id="#+id/linearLayout2" android:orientation="vertical"
android:layout_width="fill_parent">
<LinearLayout android:id="#+id/linearLayout3" android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:text="TextView" android:textStyle="bold" android:layout_height="wrap_content"
android:textColor="#636363" android:id="#+id/usernameTextView" android:layout_weight="1" android:layout_width="fill_parent"></TextView>
<TextView android:text="date" android:layout_height="wrap_content" android:textColor="#636363"
android:id="#+id/dateTextView" android:layout_width="wrap_content"></TextView>
</LinearLayout>
<LinearLayout android:layout_height="fill_parent" android:id="#+id/linearLayout4" android:layout_width="fill_parent">
<TextView android:text="TextView" android:layout_height="wrap_content" android:textColor="#636363"
android:id="#+id/bodyTextView" android:layout_width="fill_parent"></TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>