I'm trying to make layout like this:
|---------------------------| |---------------------------|
| Title of text goes there | | Title of text goes there |
|---------------------------| |---------------------------|
| Image goes there, height | | Image goes there, height |
| can be different | | can be different, very |
|---------------------------| | very, very different |
| Long, very long text goes | |---------------------------|
| here, and here, and here | | Long, very long text goes |
| that should fill space | | here, and here, and here |
| lef after title and ima.. | | that should fill space ...|
|---------------------------| |---------------------------|
Imagine now that I have 5 LinearLayout like this situated on the screen, 2 upper and 3 lower, all uniformly. The problem is that my #Long, very long text doesn't ellipsize and fill the space available at the same time. When I set android:maxLines, it works, but I don't have the constant maxLines, because image and title height changes.
<!-- item -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip"
android:layout_weight=".3">
<!-- item title -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/item_3_title"
android:textSize="22sp"
android:textStyle="bold"/>
<!-- item image -->
<RelativeLayout
android:id="#+id/item_3_image_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/item_3_image"
android:layout_width="wrap_content"
android:layout_height="120dip"
android:scaleType="centerCrop"
android:padding="2dip" >
</ImageView>
<ProgressBar
android:id="#+id/item_3_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</ProgressBar>
</RelativeLayout>
<!-- item text -->
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:id="#+id/item_3_text"
android:ellipsize="end"
android:textSize="18sp"/>
</LinearLayout>
Ok, finally found the answer here
ViewTreeObserver observer = textView.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int maxLines = (int) textView.getHeight()
/ textView.getLineHeight();
textView.setMaxLines(maxLines);
textView.getViewTreeObserver().removeGlobalOnLayoutListener(
this);
}
});
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
>
<!-- item title -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/item_3_title"
android:textSize="22sp"
android:textStyle="bold"/>
<!-- item image -->
<RelativeLayout
android:id="#+id/item_3_image_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/item_3_title"
>
<ImageView
android:id="#+id/item_3_image"
android:layout_width="wrap_content"
android:layout_height="120dip"
android:scaleType="centerCrop"
android:padding="2dip" >
</ImageView>
<ProgressBar
android:id="#+id/item_3_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</ProgressBar>
</RelativeLayout>
<!-- item text -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_3_text"
android:layout_below="#+id/item_3_image_holder"
android:ellipsize="end"
android:textSize="18sp"/>
</RelativeLayout>
you need such kind of structure I hope you are able to interpret it.
Related
I'm confused with a problem about ImageView alignment recently. We know that the width of ImageView is NOT exactly the width of the actual image (because sometimes the image is scaled). So how can I align a textview to the bound of the actual image, not the ImageView?
+----------------------------------------+
| +--------------+ |
| ImageView | Scaled Image | |
| +--------------+ |
+----------------------------------------+
| I want to align my textview to here
| Not here
The following code doesn't meet my requirement, it always align the textview to the right of the ImageView, not the actual image:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/mypic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mypic" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/mypic" />
</RelativeLayout>
Thanks a lot!
What I understood from your post is that you want to align the textview to the right of your imageview, you can do it like so:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/mypic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mypic" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/mypic" />
</RelativeLayout>
I have a layout that looks as follows:
|User Name | |
|email#mail.com | info |
And I need to set user's first name and second name if it fits into TextView and only first name if first name and second name is too long for current screen.
For example for "Tom Smith":
|Tom Smith | |
|email#mail.com | info |
and for "Tom VeryVeryVeryLongSurname":
|Tom | |
|email#mail.com | info |
How can I get a name size with specified text size and compare it with TextView width?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="bottom"/>
</LinearLayout>
See TextPaint#getTextBounds method http://developer.android.com/reference/android/graphics/Paint.html#getTextBounds%28char[],%20int,%20int,%20android.graphics.Rect%29
And other from the TextPaint and Paint classes
Paint.html#measureText seems to be even more matching what you are looking for.
http://developer.android.com/reference/android/graphics/Paint.html#measureText%28java.lang.CharSequence,%20int,%20int%29
Anyway look at the android.graphics.Paint class.
Here i want to create a layout that contains following by using fragment how can i do this?
Should i use for top portion or can i use fragment? which one is the best approach. And instead of swipe tab i want to display .(dot) in the bottom. e.g. Android home screen bottom 3-5 dots.
+-----------------------------------------------+
| +------------+ |
| | | Line 1 |
| | Image | Line 2 |
| | | Line 3 |
| | | (Static) |
| +------------+ |
|-----------------------------------------------|
| |
| |
| |
| |
| Some Content goes here |
| (Swipe tab) |
| Swipe to next -->>> |
| Here dot(.) represent the pages |
| |
| |
| |
|____________________._._.______________________|
| |
| 3 images goes here |
| (Static Horizontal scroll able) |
+-----------------------------------------------+
Hmmm...i tried it...and here is the out put...
And here is the source...
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/news_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Test image"
android:padding="20dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your headline..."
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFCCCCCC" >
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Inner contents..."
android:textAppearance="?android:attr/textAppearanceLarge" />
</FrameLayout>
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scrollable contents here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</HorizontalScrollView>
NOTE: You need to put your tabs or any thing else in Inner contents section. And whatever contents in lower scrollable panel by you self. I just tried to make a structure for you...
Hope this helps...
You must put three layouts . In first linear horizontal layout place imageview and text views.
In the second one place a horizontal scrollable view with buttons or something suits to you contents with match parent widht to each . place page indicator tyo each button.
Third one is normal scrollable view or use gallery view to place you content.
I'm trying to create the following layout:
|-----------------------------------------------------------|
| |
| |
| |
| |
| L-Email [___________]-R |
| L-Password [___________]-R |
| (Login)-R |
| |
| |
| |
|-----------------------------------------------------------|
So what I'm trying is that I created a linear layout, every e-mail, password and the login line is a linearlayout. But what i want is to place the whole thing into the center (vertically and horizontaly) and align the Email and password labels to the "L-" part of the screen ("L-" is just to indicate that i want to align to there) while i want to align the two text boxes and the login button to the "-R" sign (so I actually don't need the L- and -R signs, these are just indicates the align position here in this mockup)
Here is a more specific mockup:
So i want to align the whole thing to center and align the text labels to the left green line while the others to the right green line.
At this time i prefer to use the Graphical Editor in eclipse but any suggestion is welcome.
I've tried this one so far but have become stuck:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/sahbg"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/EditText01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
And it looks like this:
Using your existing code:
Change the height and width of the outer LinearLayout:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
(And you may need to change gravity="center" to layout_gravity="center", honestly I can't remember which is which at this moment.)
Switch the "password" LinearLayout's width to match_parent so both the "username" and "password" rows are the same width.
Remove the LinearLayout that holds the Button, since it is not necessary, and add:
android:layout_gravity="right"
To the Button to shift it over to the right. You can also use this on the EditTexts and give them a specific width to force them to be the same size.
I want to make a part of a bitmap clickable and my layout looks like this:
________________________________
| ##### |
| ##### |
| ___________________ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| ___________________ |
________________________________
I thought the easiest way to this would be to place a button over the image with a relative layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?
Suggestions for other approaches are also welcome, I considered this:
http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
But it seems a bit of an overkill for my simple rectangle area.
Try this:
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
You can also use
<Button
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/image1"
android:drawableLeft="#drawable/image2t"
android:drawableRight="#drawable/image3"
android:drawableTop="#drawable/image4"
android:drawableTop="#drawable/image4"
android:textColor="#ffffff"
/>
Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/ImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>