I am trying to get this design:
But my problem is that i can't get to place the red view exacly like in the photo above.
For now I'm using a framelayout but I still can't get the desire design.
Xml:
<FrameLayout
android:id="#+id/mental_health_card_h_c_ll_chat_image"
android:layout_width="42dp"
android:layout_height="42dp"
android:background="#drawable/bg_doctor_image_empty"
android:gravity="center">
<LinearLayout
android:id="#+id/mental_health_card_h_c_ll_chat_notifications_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|right"
android:background="#drawable/background_sendbird_notification"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.movistar.movistarsalud.components.TeladocTextView
android:id="#+id/mental_health_card_h_c_ll_chat_notifications_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
app:textColor="?attr/white"
app:textType="regular"
tools:text="2"
tools:textColor="?attr/white" />
</LinearLayout>
<com.movistar.movistarsalud.components.TeladocImageView
android:id="#+id/mental_health_card_h_c_chat_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="#drawable/ic_i037_chat__1_"
app:riv_oval="true" />
</FrameLayout>
And what i have until now:
You're pretty close! And I'd recommend ConstraintLayout for positioning stuff - but if you really want to use a FrameLayout (combined with a LinearLayout - I doubt it's more efficient than just using a ConstraintLayout) then I think your issue is the chat ImageView is too large.
If you imagine the FrameView as a box around your image, you have the notification dot right in the top-right corner. That shows you where the top and right edges of the frame are. You can also see that the chat image (including the blue circle) is up against those edges too - in your example pic, there's a bit of a gap.
So you'll need to experiment with setting different layout_width and height values on your ImageView. Try 40dp and see how that looks. Also you'll probably want to mess with your scaleType, you want the image to shrink, not get cropped (your version already looks a lot bigger than the example)
Simply you are missing to add elevation to your LinearLayout.
You need to add this line, and your text would be shown over the chat icon.
android:elevation="1dp"
Related
I have a layout which has two CardView's and looks like this:
I wanted the right card to be fixed width (90dp) and the left one to automatically resize and fill the remaining space. I have currently done it like this:
<RelativeLayout
android:id="#+id/inventory_host_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<android.support.v7.widget.CardView
android:id="#+id/inventory_last_scanned_wrapper_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_toLeftOf="#+id/inventory_scanned_infobox_wrapper_card">
...
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/inventory_scanned_infobox_wrapper_card"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="false"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp">
...
</android.support.v7.widget.CardView>
</RelativeLayout>
Left one can grow, so I also wanted the right card to always be the same height as the left one. Usually I do that kind of alignment by setting both layout_alignTop and layout_alignBottom properties to other View but those properties are not available this time, probably because that would create a circular reference (although I don't really understand how horizontal alignment could affect vertical). What to do? I have explored several other options but always get back to the same point except hardcoding heights or setting them programmatically which of course I want to avoid.
Where and why are you getting circular reference errors? Just set
android:layout_alignBottom="#id/inventory_last_scanned_wrapper_card"
on the card at the right side and everything should work.
In GridView, I am showing grid of books. Each book has status - new, favorite, done. This is example, what I want to implement:
My layout has 2 ImageViews: 1 for book cover and 1 for book status icon(new, done, favorite)
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivCover"
android:layout_width="95dp"
android:layout_height="146dp"
/>
<ImageView
android:layout_width="26dp"
android:layout_height="26dp"
android:src="#drawable/icon_new"
android:layout_alignParentTop="#id/ivCover"
android:layout_alignRight="#id/ivCover"
android:background="#drawable/shape_round_book_status"
android:layout_marginRight="-13dp"
android:layout_marginTop="-13dp"/>
</RelativeLayout>
I found how to position one view's center on another view's top right corner here. In that example, solution was for one item - linear layout. In my case, I am putting status icon on the corner for grid view item. In result, most of status icon not visible:
How to make one view's center on another view's top right corner inside list item layout?
To be more efficient you can do this with a FrameLayout that is better for performance than RelativeLayout.
Say that, the trick to do it is put a margin in the book image to simulate that the badge exit the image. For example like this
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivCover"
android:layout_width="95dp"
android:layout_height="146dp"
android:layout_marginTop="30dp"
android:layout_marginRight="30dp"
/>
<ImageView
android:layout_width="26dp"
android:layout_height="26dp"
android:src="#drawable/icon_new"
android:layout_gravity="top|right"
android:background="#drawable/shape_round_book_status"/>
</FrameLayout>
Adjust the layout margin to fit your design.
** Other little recommendation is use x8 sizes to be "more material" (or x4 if you need middle sizes). Instead of 95dp use 96, instead of 146 use 144 or 152...
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>
I have overloaded the getView method of listview to populate custom style of list item.
This is what currently it looks like:!!
Red color is to just show the background of listview item
Here I have used 3 controls: Imageview for image, 2 text views (one top, one bottom).
Problem here is the height of listview item is getting increased. I want two textviews over the image not above or below. To someextent I know the root cause of this problem but don't know how to fix it.
Here is the layout of listview item:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<ImageView android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:scaleType="fitCenter"/>
<TextView android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:layout_alignLeft="#+id/imgIcon"
android:layout_alignTop="#+id/imgIcon"
android:layout_alignBottom="#+id/imgIcon"/>
<TextView android:id="#+id/txtTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:layout_alignLeft="#+id/imgIcon"
android:layout_alignTop="#+id/imgIcon"
android:layout_alignBottom="#+id/imgIcon"/>
The problem is i'm using png image for Imageview and their size is getting increased in some aspect ratio. In case I hard code the height of listview item layout then, specifically on my phone screen size, things start appearing good but on some different screen size things get totally worse (which makes sense too).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:padding="5dp" >
Would be great if someone can explain about how to do it. Main problem is to display text over an image (and image is not same). Thanks.
Update: My major problem is I don't have the bit vector of image instead a PNG and it tries to scale up the image. (setting scale type to center-fit could be an option but would it work on background resourcE?. Here is the output if I set image as a background for listview item and two texts over it.
Ok, when calling getView() in your CustomArrayAdaptor, rather than set the ImageView bitmap to the image you have (what you are currently doing, I believe), instead call View.setBackgroundResource(R.drawable.yourimage.png) on your view after you have infalted it. The equivalent in xml is below:
android:background="#drawable/yourimage".
If you need more information, let me know.
If you're using solid colors as the backgrounds, and you intend to support a variety of screen sizes, I would think it might be easier to use a background color fill on the text views, with the text views stacked and aligned such that there's no borders. Then it would not have any stacking issues (a simple Linear Layout would work) and it would be scalable with no processing of images.
I have LinearLayout and I want to put into it ImageView. Is there any simple way how to put this image on the right side of the screen? Now, the image is placed to the left, padding and marking don't solve this, because this should be done dynamically, the image is each time different.
Thanks.
Have you tried setting the gravity attribute to right?
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:contentDescription="#string/imageDesc"
android:src="#drawable/image" />