My question is more informative. I just want to know how to make such design. I found android application called "weather timeline" and inside of that application between CardViews (as I understand) they used this element which I pointed out in picture below. I think its just ImageView but how to set it as here. It will be interesting to know any idea about that! Thanks for attection!
You could easily do it in the following way.
Let us assume that we are using a collection view where the card element is one type and the black gap with text in the middle is the other.
The cardView would look something like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="#dimen/circle_radius_half_size"
android:layout_marginBottom="#dimen/circle_radius_half_size">
</CardView>
<ImageView
android:layout_width="#dimen/circle_radius"
android:layout_height="#dimen/circle_radius"
android:layout_align_parentLeft="true"
android:layout_marginLeft="24dp"
android:src="#drawable/circle"
android:rotation="180"/>
<ImageView
android:layout_width="#dimen/circle_radius"
android:layout_height="#dimen/circle_radius"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="24dp"
android:src="#drawable/circle" />
</RelativeLayout>
Where drawable circle looks something like this
and the layout for black grape with text in the middle looks something like this
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp">
<View
android:layout_width="#dimen/width_of_line"
android:layout_height="match_parent"
android:layout_margin_left="#dimen/line_margin"
android:background="#color/white" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin_left="#dimen/line_margin" >
<!-- The Text View Layouts Here -->
</LinearLayout>
</LinearLayout>
Where line_margin is 24dp + CircleHalfSize - LineWidthHalfSize
Of course the CircleHalfSize and LineWidthHalfSize are in DP
Now it is just a question of arranging them properly via the adapter. Personally I would use the RecyclerView. Great Flexibility.
Also this way if you wanted the bubbles to be gone, all you have to do is set the bubble ImageView's visibility to GONE and that too you can do specifically either for the top or the bottom.
I'm pretty sure that this could be accomplished using 9-patched images.
By determining the way to draw your patches and how to set them as a background for your layouts you'll get the same result.
Quick illustrated demo
By adjusting the two backgrounds exactly one above the other you'll get the UI you posted.
Hope it helps.
Further reading
To see how to draw 9-patched images here is a documentation.
This can be accomplished by using a RelativeLayout. Then you can align all your views however you want inside your main view.
Thus, you would layout Card1 at the top, then layout the bubble connector with your marginTop attribute (remember this is from the top of the container, not from the bottom of the card) to layout that view wherever you want.
Basically, you would use a single RelativeLayout, then align the various views within that container wherever you want in relation to each other (or really in relation to the the top of your main view).
Checkout this Pseudo-code:
<RelativeLayout >
<CardView
layout_height = "8dp"
alignParentTop = "true"
/>
<!-- Connector Image -->
<ImageView
alignParentTop = "true"
layoutMarginTop = "10dp" <!-- or whatever it takes to align properly with CardView -->
/>
</RelativeLayout>
Related
I am writing an Android game. In the level selection activity's layout file, I want to layout the levels' buttons (They are actually ImageViews) like this:
x x x
x x x
And each level button has a TextView, with that level's name as the text, below it (Let's call these two views together as a "level choice"). I used a lot of LinearLayouts to do this. Here is the code for a level choice:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
As you can see, the two views' height and width are all wrap_content. But when I look at the designer, the text view doesn't show up.When I select the text view in the component tree, it shows where the text view is:
P.S. The picture isn't showing all six levels because I haven't made them yet.
As you can see, the text view is right at the bottom! When I select the ImageView, it shows that it is occupying all the space of its parent!
I don't know why this is happening, my image is certainly a square! Can you explain why this is happening and how do I fix it?
If you need my whole layout code, feel free to tell me in the comments.
For me, the best solution is to position and size it properly by code (where you have total control) instead of xml.
Anyway, i think your problem can be solved by setting ImageViews ScaleType
imageView1.setScaleType(ScaleType.FIT_START);
By XML:
android:scaleType="fit_start"
Hope this helps.
I use background color for textview when I'm studying the layout.
If you use wrap content in both dimension for TextView, that is invisible since you did not write any text inside it. wrap content means that the view take the minimum space. And no text means 0px; try to set ImageView and TextView with layout_weight 1 and layout_height 0dp. In this way both view take half of space of parent layout
Because right now, your LinearLayout doesn't know how to distribute the ratio of its children. And in fact, your imageview's wrap content already
consumes the whole space.
So, LinearLayout says "Sorry TextView, you have no space left".
Use layout_weight to both of the children.
I guess you want to have your picture twice the size of your text.
2:1
That is,
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=2
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=1
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
I just realized that I posted a question about ImageViews leaving out too much whitespace:
LinearLayout leaving out too much white space. Why?
I think this is the same as that problem. So I tried setting adjustViewBounds to true in the xml. And it works! Now the image view look like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/parallel_lines"/>
You can use relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</RelativeLayout>
or simple you can set background of textview to that image by putting this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:background="#drawable/angles"
android:textSize="#dimen/level_text_size"/>
I have a layout contain one image and 3 text field
I've tried to align the image to right and text field to left but I've failed
I've used
android:layout_gravity="right" for image and left to text but it did not work also I've used end and start in gravity with no success
this is the layout code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:background="#drawable/card_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/listthumb"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:contentDescription="Rss video thumbnail"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/listtitle"
style="#style/listTitle"
android:maxLines="3"/>
</LinearLayout>
<TextView
android:id="#+id/shortdescription"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/listpubdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11dp"/>
</LinearLayout>
</FrameLayout>
Try to use a <RelativeLayout> instead of a <LinearLayout>
With the RelativeLayout you could place a widget depending on the position of another widget
Here the Relative Layout description
Hope this will help, I have not had time to test....
One linear layout should have vertical orientation and contain the 3 text fields.
One linear layout should have horizontal orientation and contain both the above linear layout and the image.
To push two views to the edges of the screen, you can also give each a left/right margin and then put a blank view with weight = 1 in between them.
Please read a bit more on how layouts work on Android and the different types available to you. A LinearLayout will stack the containing Views either Horizontally or Vertically one after the other. A FrameLayout is simply a container and the items within have to position themselves. RelativeLayout allow you to position your views with a relative reference to other views (in your case, you can position your ImageView, and then your 3 TextViews relative to where the ImageView is).
If you can use LinearLayout instead of RelativeLayout, you should do so, as RelativeLayout is always slower, due to having to perform two passes prior to rendering as it needs to measure each view and then also perform the layouts based on that. You might be looking for something like (pseudo-code):
<LinearLayout orientation=horizontal>
<LinearLayout orientation=vertical>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<ImageView />
</LinearLayout>
You have not described your question well . Check below code if it works .
You just forgot to add orientation in linear layout containing one text view and a Image view .
Add Orientation to Your Linear Layout.
This question is in a way a continuation of my last question.
My problem now is pretty much the same, except that instead of separating the image and text in differend views (namely ImageView and TextView) I learned I can use the attribute android:drawableLeft to set an image "for" my text (the suggestion was pointed to me by Eclipse with a warning icon on the LinearLayout line).
I thought the only difference would be that instead of setting the ImageView with setImageResource() method I would simply set the TextView's drawableLeft attributed with the setCompoundDrawablesWithIntrinsicBounds() method. Instead, when I made the change, I was taken back to my original issue: the text aligns with the top edge of the view rather than the center.
This is what my TextView looks like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/account_login"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/pm_gmail"
android:drawablePadding="8dp"
android:text="example#gmail.com"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_centerVertical="true"
android:layout_below="#id/account_login"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="5dp"
android:background="#DDDDDD" />
</RelativeLayout>
The second View is just a separator.
... and this is what the layout looks like after setting the above mentioned attributes:
(I don't have enough reputation to post images yet, so here's the link to it)
(Just to be clear, this is only a static example. My text and image are both set dynamically in the code at runtime).
Any help is greatly appreciated.
Change android:layout_gravity="left|center_vertical" to android:gravity="center_vertical".
layout_gravity is for positioning a View inside a container (layout), while gravity is referred to
the View contents (that is, in this case, the text inside the TextView).
I have a containing LinearLayout which has a style associated with it that gives the container 20dp of padding. This is great for 99% of the elements contained inside. There may be 1 element which I'd like to have extend across the screen (android:layout_width="match_parent") and ignore the padding set by the containing LinearLayout. Is this possible? Or, do I need to remove the style from the containing LinearLayout and apply it to every other element individually?
(some attributes excluded for brevity)
<LinearLayout
android:padding="20dp">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txtDate"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- Would like this to ignore padding, extend fully. -->
<TextView
android:id="#+id/txtExperienceTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/sub_header_title" />
</LinearLayout>
Yes, you can't really pick and choose like that. I'd remove the padding from the LinearLayout and apply margin to the children.
To expand on what loeschg said in the comment below, I'd recommend using a "child style". Since it looks like each child will only need left/right margins, it will save some typing and look cleaner to just have one line on each child, rather than setting both left and right separately on each.
You cannot reach out of the container. Apply a style to the elements rather than the container if you have an exception.
Yes It will ignore it, the layout that you wrote is something like this.
General thinking
int x = 7;
x = 20;
Show me that x = 7; ---You wanted to do something like this whit your layout
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txtDate"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- Would like this to ignore padding, extend fully. -->
<TextView
android:id="#+id/txtExperienceTitle"
style="#style/sub_header_title" // --- Style before adding laout_width if you want the layout to be match_parent
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
For a long time I am reading posts from stackoverflow because they are very helpful and google seems to think that also.
Since yesterday I have a problem with a row in a ListView in Android. I want to show an image and the area between the image and the bottom of the element should be filled with a grey color.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/ConversationsBadgeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#c0c0c0"
android:orientation="vertical" >
<QuickContactBadge
android:id="#+id/ConversationsBadge"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
<!--
...
A LinearLayout with TextViews, shouldn't be interesting for this
...
-->
</RelativeLayout>
My Problem ist that the it seems that the inner layout only wraps the content but doesn't fill_parent. When I set for example 100dp it works but that is not what i want.
It would be nice if you could help me with that. I tried much workarround like using LinearLayouts and TextViews but nothing worked.
You can set the background color to the ListView itself, then everything in it will have the background you want.
BTW, I recommend using LinearLayout instead of RelativeLayout in your case.
The layout file should contain exactly one outermost element and it should have both android:layout_width="match_parent" and android:layout_height="match_parent" Your RelativeLayout has android:layout_height="wrap_content"
i think you can use you can take background color in another xml file and put in drawable folder and also using Linear Layout is very useful to your problem