Add a horizontal line at the top of a linear layout

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

Add a horizontal line at the top of a linear layout

Postby yinglcs » Fri Dec 18, 2009 9:39 am

Hi,

I have tried to draw a horizontal line at the top of my linear layout.

Here is my linear layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">

<LinearLayout android:id="@+id/test" android:layout_width="fill_parent"
android:layout_height="wrap_content>

<ImageView android:id="@+id/icon1"
android:layout_width="32dip"
android:layout_height="32dip"
/>
</LinearLayout>
</LinearLayout>

And I follow your advice and I did add
<View
android:background="@drawable/black_white_gradient"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_above="@id/test"
/>
But i dont' see any line at the bottom of the LinearLayout. And when I go to Hierarchy View and see he View (for the hort separator), the getWidth() is 0 while getHeight() is 1.

Can you please tell me what am I missing?

I have follow the example in for teh gradient dividers:
http://www.connorgarvey.com/blog/?p=34

Thank you very much for any help.
yinglcs
Junior Developer
Junior Developer
 
Posts: 10
Joined: Fri Nov 14, 2008 6:19 am

Top

Re: Add a horizontal line at the top of a linear layout

Postby qlimax » Fri Dec 18, 2009 12:00 pm

yinglcs wrote:But i dont' see any line at the bottom of the LinearLayout.


top ? bottom ? confused? :)

try this and modify it as you need:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical"
  6. >
  7.  
  8. <LinearLayout
  9. android:id="@+id/horizontalLine"
  10. android:layout_width="fill_parent"
  11. android:layout_height="2dip"
  12. android:background="#66FF33"
  13. />
  14.  
  15. <ImageView
  16. android:id="@+id/icon1"
  17. android:layout_width="32dip"
  18. android:layout_height="32dip"
  19. />
  20.  
  21. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


bye
¯`·.¸¸.><((((º>¯`·.¸¸. ><((((º>
User avatar
qlimax
Master Developer
Master Developer
 
Posts: 271
Joined: Mon Aug 31, 2009 10:54 am
Location: Swiss

Postby Droid123 » Sun Dec 20, 2009 8:58 am

do you know how to add the gradient shape in the example as a LinearLayout Divider?:

http://www.connorgarvey.com/blog/?p=34
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Postby qlimax » Sun Dec 20, 2009 2:16 pm

create a file named mygradient.xml in the res/drawable folder
and edit this file as following:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <shape
  4.  
  5. xmlns:android="http://schemas.android.com/apk/res/android"
  6.  
  7. android:shape="rectangle"
  8.  
  9. >
  10.  
  11.  
  12.  
  13. <gradient
  14.  
  15. android:startColor="#000000"
  16.  
  17. android:centerColor="#FFFFFF"
  18.  
  19. android:endColor="#000000"
  20.  
  21. android:angle="0"
  22.  
  23. />
  24.  
  25.  
  26.  
  27.  
  28.  
  29. </shape>
Parsed in 0.001 seconds, using GeSHi 1.0.8.4



then in your layout code (eg main.xml)

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.  
  5. android:layout_width="fill_parent"
  6.  
  7. android:layout_height="fill_parent"
  8.  
  9. >
  10.  
  11.  
  12.  
  13. .....
  14.  
  15.  
  16.  
  17. <View
  18.  
  19. android:id="@+id/divider"
  20.  
  21. android:layout_width="fill_parent"
  22.  
  23. android:layout_height="20dip"
  24.  
  25. android:background="@drawable/mygradient"
  26.  
  27. />
  28.  
  29.  
  30.  
  31. ...
  32.  
  33.  
  34.  
  35. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


:warning: In the eclipse preview of the layout, the gradient is not redered !
you have to run it on the emulator !

bye
¯`·.¸¸.><((((º>¯`·.¸¸. ><((((º>
User avatar
qlimax
Master Developer
Master Developer
 
Posts: 271
Joined: Mon Aug 31, 2009 10:54 am
Location: Swiss

Postby Droid123 » Sun Dec 20, 2009 5:41 pm

Okay so I tried to add the divider to my ListView and it's actually easier than what you suggested.

1) Create the gradient.xml file as stated above
2) Add android:divider="@drawable/mygradient" and android:dividerheight= "1sp"
to the listview code and it's done :)

My list looks sweet now!! Thanks for the reply
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Postby qlimax » Sun Dec 20, 2009 5:49 pm

Droid123 wrote:Okay so I tried to add the divider to my ListView and it's actually easier than what you suggested.



I would have explained it, if you had asked me that.....

you asked about a LinearLayout divider. not a ListView one... :roll:

Droid123 wrote:do you know how to add the gradient shape in the example as a LinearLayout Divider?:

http://www.connorgarvey.com/blog/?p=34



no? :roll:
¯`·.¸¸.><((((º>¯`·.¸¸. ><((((º>
User avatar
qlimax
Master Developer
Master Developer
 
Posts: 271
Joined: Mon Aug 31, 2009 10:54 am
Location: Swiss

Top

Postby Droid123 » Sun Dec 20, 2009 5:53 pm

hmmm guess you're right, but I meant a ListView one :)
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Postby qlimax » Sun Dec 20, 2009 6:16 pm

[font=Arial Black]A foamy toast of wishes :D[/font]
¯`·.¸¸.><((((º>¯`·.¸¸. ><((((º>
User avatar
qlimax
Master Developer
Master Developer
 
Posts: 271
Joined: Mon Aug 31, 2009 10:54 am
Location: Swiss

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 5 guests