Android Drawing Separator/Divider Line in Layout?
I would like to draw a line right in the middle of a layout and use it as a separator of other items like TextView. Is 开发者_JAVA百科there a good widget for this. I don't really want to use an image as it would be hard to match the other components to it. And I want it to be relatively positioned as well. Thanks
I usually use this code to add horizontal line:
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray"/>
To add vertical separator, switch the layout_width and layout_height values
To improve on the answers provided by Alex Kucherenko and Dan Dar3
I added this to my styles:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
Add this in your layout where you want the divider (modify the attributes to fit your need):
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@android:drawable/divider_horizontal_dark"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="2dp"
android:paddingTop="2dp" />
You can use this in LinearLayout :
android:divider="?android:dividerHorizontal"
android:showDividers="middle"
For Example:
<?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:divider="?android:dividerHorizontal"
android:showDividers="middle"
android:orientation="vertical" >
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="abcd gttff hthjj ssrt guj"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="abcd"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="abcd gttff hthjj ssrt guj"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="abcd"/>
</LinearLayout>
Easiest Way:
Vertical divider :
<View style="@style/Divider.Vertical"/>
Horizontal divider :
<View style="@style/Divider.Horizontal"/>
That's all yes!
Just put this in res>values>styles.xml
<style name="Divider">
<item name="android:background">?android:attr/listDivider</item> //you can give your color here. that will change all divider color in your app.
</style>
<style name="Divider.Horizontal" parent="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item> // You can change thickness here.
</style>
<style name="Divider.Vertical" parent="Divider">
<item name="android:layout_width">1dp</item>
<item name="android:layout_height">match_parent</item>
</style>
<TextView
android:id="@+id/line"
style="?android:attr/listSeparatorTextViewStyle"
android:paddingTop="5dip"
android:gravity="center_horizontal"
android:layout_below="@+id/connect_help"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000" />
use this code. It will help
<LinearLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:divider="?android:dividerHorizontal"
android:gravity="center"
android:orientation="vertical"
android:showDividers="middle" >
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:background="@android:color/darker_gray" />
Between two Layouts Put this code to get Divider.
Just write this :
android:divider="?android:dividerHorizontal"
android:showDividers="middle"
full example:
<LinearLayout
android:id="@+id/llTipInformation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvServiceRating"
android:orientation="horizontal"
android:divider="?android:dividerHorizontal"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:showDividers="middle">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="@string/main.msg.tippercent"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@color/colorWhite"
android:layout_marginTop="@dimen/activity_vertical_margin"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="@string/main.msg.tiptotal"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@color/colorWhite"
android:layout_marginTop="@dimen/activity_vertical_margin"/>
</LinearLayout>
if you use actionBarSherlock, you can use the com.actionbarsherlock.internal.widget.IcsLinearLayout class in order to support dividers and show them between the views .
example of usage:
<com.actionbarsherlock.internal.widget.IcsLinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:divider="@drawable/divider"
android:dividerPadding="10dp"
android:orientation="vertical"
android:showDividers="beginning|middle|end" >
... children...
res/drawable/divider.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="2dip" />
<solid android:color="#FFff0000" />
</shape>
do note that for some reason, the preview in the graphical designer says "android.graphics.bitmap_delegate.nativeRecycle(I)Z" . not sure what it means, but it can be ignored as it works fine on both new versions of android and old ones (tested on android 4.2 and 2.3) .
seems the error is only shown when using API17 for the graphical designer.
Its very simple. Just create a View with the black background color.
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000"/>
This will create a horizontal line with background color. You can also add other attributes such as margins, paddings etc just like any other view.
You can use this <View> element just after the First TextView.
<View
android:layout_marginTop="@dimen/d10dp"
android:id="@+id/view1"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#c0c0c0"/>
Adding this view; that draws a separator between your textviews
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />
Here is your answer..this is an example to draw line between controls...
<TextView
android:id="@+id/textView1"
style="@style/behindMenuItemLabel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:text="FaceBook Feeds" />
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#d13033"/>
<ListView
android:id="@+id/list1"
android:layout_width="350dp"
android:layout_height="50dp" />
This code draw line between two controls...
It adds a horizontal divider to anywhere in your layout.
<TextView
style="?android:listSeparatorTextViewStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
Runtime version:
View dividerView = new View(getContext());
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT, UIUtils.dpToPix(getContext(), 1));
dividerView.setLayoutParams(lp);
TypedArray array = getContext().getTheme()
.obtainStyledAttributes(new int[] {android.R.attr.listDivider});
Drawable draw = array.getDrawable(0);
array.recycle();
dividerView.setBackgroundDrawable(draw);
mParentLayout.addView(dividerView);
use this xml code to add vertical line
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:background="#000000" />
use this xml code to add horizontal line
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />
//for vertical line:
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#00000000" />
//for horizontal line:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#00000000" />
//it works like a charm
In cases where one is using android:layout_weight property to assign available screen space to layout components, for instance
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
...
...
</LinearLayout>
/* And we want to add a verical separator here */
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
...
...
</LinearLayout>
</LinearLayout>
To add a separator between the existing two layouts which has taken the entire screen space already, we cannot just add another LinearLayout with android:weight:"1" because that will make three equal width columns which we don't want. Instead, we will decrease the amount of space we will be giving to this new layout.
Final code would look like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
...
...
</LinearLayout>
/* *************** ********************** */
/* Add another LinearLayout with android:layout_weight="0.01" and
android:background="#your_choice" */
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.01"
android:background="@android:color/darker_gray"
/>
/* Or View can be used */
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:background="@android:color/darker_gray"
/>
/* *************** ********************** */
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
...
...
</LinearLayout>
</LinearLayout>
If you are going to use it a lot, best thing to do is
styles.xml:
<style name="Seperator">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">@color/light_color</item>
</style>
now in your layout, just add it like:
<View style="@style/Seperator" />
To complete Camille Sévigny answer you can additionally define your own line shape for example to custom the line color.
Define an xml shape in drawable directory. line_horizontal.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" android:shape="line">
<stroke android:width="2dp" android:color="@android:color/holo_blue_dark" />
<size android:width="5dp" />
</shape>
Use this line in your layout with the wished attributes:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="2dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="2dp"
android:src="@drawable/line_horizontal" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="2dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="2dp"
android:scaleType="fitXY"
android:src="?android:attr/listDivider" />
Add a horizontal black line using this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000"
android:layout_marginTop="10dp"/>
I usually use this code:
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#aa000000" />
if you have an object in your layout and you want set line below that use this attribute in ImageView:
android:layout_below="@+id/textBox1"
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item
android:bottom="0dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="@color/divider" />
</shape>
</item>
This would help you to resolve this problem. Here a small view is created to make a black line as a separator between two views.
<View
android:layout_width="3dp"
android:layout_height="wrap_content"
android:background="@android:color/black"
/>
Here is the code " a horizontal divider line between two Text Views". Try this
<TextView
android:id="@id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="5dp"
android:inputType="textPersonName"
android:text:"address" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/black"/>
<TextView
android:id="@id/textView7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text:"Upload File" />/>
Divide the space in two equal parts:
<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="0dp"
android:layout_weight="1"
android:divider="?android:dividerHorizontal"
android:showDividers="end"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
Notice that one part contains a divider at the end
Simple solution
just add this code in your layout and replace 'Id_of__view_present_above' to the id of the view, below which you need the divider.<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#c0c0c0"
android:id="@+id/your_id"
android:layout_marginTop="16dp"
android:layout_below="@+id/Id_of__view_present_above"
/>
For example if you used recyclerView for yours items:
in build.gradle write:
dependencies {
compile 'com.yqritc:recyclerview-flexibledivider:1.4.0'
If you want to set color, size and margin values, you can specify as the followings:
RecyclerView recyclerView = (RecyclerView)
findViewById(R.id.recyclerview);
recyclerView.addItemDecoration(
new HorizontalDividerItemDecoration.Builder(this)
.color(Color.RED)
.sizeResId(R.dimen.divider)
.marginResId(R.dimen.leftmargin, R.dimen.rightmargin)
.build());
加载中,请稍侯......
精彩评论