I'm designing a simple layout using a RelativeLayout, i would like to avoid nested LinearLayouts or other nested viewgroups.
There are 9 views, it all shows like this:
I don't know how to correctly align seekbars to avoid text overlapping or wrapping lines.
Aligning from right: rgb images width is fixed, seekbars width (all the same) depends on the labels width, i want it to depend on the largest one.
How to know what label to refer to with android:layout_toRightOf or what?
The above image also shows two behaviours i'd like to avoid:
--aligning refers to first label (#id/text1)--
2nd row: android:layout_alignRight missing make a longer text overlap.
3rd row: android:layout_alignRight is present but longer text wraps.
Here's what i would like:
Should i measure the TextViews width to find the largest one (programmatically, of course...)?
Any idea for an XML solution?
Here's the code:
<RelativeLayout
android:id="#+id/addon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/semi_transparent_background_controls"
android:visibility="visible" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Normal text"/>
<SeekBar
android:id="#+id/seek1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/img1"
android:layout_toRightOf="#id/text1"/>
<ImageView
android:id="#id/img1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img1"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek2"
android:layout_alignParentLeft="true"
android:layout_below="#id/img1"
android:text="Longer text overlaps"/>
<SeekBar
android:id="#+id/seek2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/seek1"
android:layout_alignParentLeft="false"
android:layout_alignTop="#+id/img2"
android:layout_below="#id/seek1"
android:layout_toLeftOf="#id/img2"/>
<ImageView
android:id="#id/img2"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img2"
android:layout_alignParentRight="true"
android:layout_below="#id/img1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek3"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/text1"
android:layout_below="#id/img2"
android:text="or wraps to a new line"/>
<SeekBar
android:id="#+id/seek3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/seek1"
android:layout_alignParentLeft="false"
android:layout_alignTop="#+id/img3"
android:layout_below="#id/seek2"
android:layout_toLeftOf="#id/img3"/>
<ImageView
android:id="#id/img3"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img3"
android:layout_alignParentRight="true"
android:layout_below="#id/img2"
/>
</RelativeLayout>
Related
I'm having a problem whereby a string in textview is displaying each character on seperate lines. My code is as below. I am hoping to show the text on one line.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp" >
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#drawable/button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/sectionPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginLeft="10dp"
android:text="AM"
android:textSize="18sp"
android:background="#drawable/button"
android:layout_toRightOf="#+id/numberPicker"
android:layout_centerVertical="true" />
</RelativeLayout>
The problem was that like #mbm29414 suggested I had another relative layout that the above was nested in and this layout had a left/right margin that was limiting this layouts size. The parent layout had a horizontal margin set to 40dp. I discovered this by rotating the screen and noticing a change.
There has a listView and imageView in Activity A. If listView.size is equal to 0, it will display the image in the imageView, it not equal to 0, it will display the list.
This is the xml of my Activtiy A. I want to make the text and button display below the image but I found it so difficult to adjust.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_gravity="center"
android:layout_width="330dp"
android:layout_height="300dp"
android:id="#+id/imageView2"
android:paddingLeft="20dp"></ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No Data"
android:textSize="15dp"
android:layout_marginLeft="140dp"
android:paddingTop="160dp"
android:textColor="#color/honey_dew2"
android:layout_gravity="center"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Data"
android:paddingTop="20dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="130dp"
android:id="#+id/button2"
android:layout_centerVertical="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
</RelativeLayout>
This is what I want. Thanks
http://i.stack.imgur.com/OSL4I.png
I think this is pretty much what you are looking for
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="No alarms"
android:textSize="15sp"
android:textColor="#color/honey_dew2"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="Add alarms"
android:paddingTop="48dp"
android:id="#+id/button2" />
</LinearLayout>
Notice that I changed from a RelativeLayout to a LinearLayout with a orientation value of vertical. I think that the RelativeLayout adds unnecessary complexity to this problem.
By using the layout_centerVertical and layout_centerHorizontal attributes instead of the padding you solve two problems at once.
The position now scales to different devices.
The layout is far less complex.
Notice also that the TextView textSize attribute is now in the units sp (scaling pixels) instead of dp (density-independent pixels). The size of your text should always be defined in sp and the size of your views should be defined either relatively or in dp.
This tutorial from the prolific mkyong should provide a strong foundation for manipulating the XML with your Java code.
I'd rework your entire approach. Use ListView.setEmptyView(View) to set a separate view to display when the list is empty. Then your base layout is just the list, and you have a separate layout for what to display for the empty case.
How do I align two TextViews with different font sizes in a RelativeLayout so that they're baseline aligned?
The bottom image is when both text views have android:layout_alignParentBottom="true" but they're the same way if I use android:layout_alignBaseline="#id/leftTextView" on the right text view.
What would be super useful is some way to make sure that the tops of the letters in two text views also align, but that's probably not realistic for TextViews.
By demand, the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/leftTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="#string/daily_average_month"
style="#style/tvStatName" />
<TextView
android:id="#+id/rightTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
style="#style/tvStatValue.big" />
</RelativeLayout>
Try this..
use android:layout_centerVertical="true" for rightTextView and try
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/leftTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="#string/daily_average_month"
style="#style/tvStatName" />
<TextView
android:id="#+id/rightTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
style="#style/tvStatValue.big" />
</RelativeLayout>
I'm trying to create a layout for a callout bubble that includes an image on the left, another image on the right and then a layout in the middle which includes a couple of TextViews.
If the length of either TextView is short enough, I want the whole callout to only be wide enough to show the text; if it's too long I want it trimmed with a '...'.
Here's a sample of the XML I'm dealing with (I've stripped out all the margins and padding etc. for clarity):
<RelativeLayout android:id="#+id/callout"
android:layout_width="wrap_content"
android:layout_height="54dp">
<ImageView android:id="#+id/callout_img_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RelativeLayout android:id="#+id/callout_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/callout_img_left">
<TextView android:id="#+id/callout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
<TextView android:id="#+id/callout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:layout_below="#id/callout_name" />
</RelativeLayout>
<ImageView android:id="#+id/callout_img_right"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/callout_info"/>
</RelativeLayout>
Originally I had the image on the right using android:layout_alignParentRight="true" but this made the whole callout fill it's available width. The XML shown above works for short text, but if the text is too long it pushes out (shrinks?) the image on the right.
Perhaps a nested LinearLayout with a zero width will do the trick:
<LinearLayout android:id="#+id/callout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="54dp">
<ImageView android:id="#+id/callout_img_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TextView android:id="#+id/callout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
<TextView android:id="#+id/callout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
</LinearLayout>
<ImageView android:id="#+id/callout_img_right"
android:layout_width="48dp"
android:layout_height="wrap_content" />
</LinearLayout>
If you don't mind the two text views always having the same width, you can dispense with the nested LinearLayout and just give each TextView a width of 0dp and weight of 1.
Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.
One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.
You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>