I know this gotta have a simple answer, so here goes:
This is an image of a famous "chat" Android app. My question is how can I simulate the behaviour in red, namely a divider that does not take the parent's screen width, but starts aligned with the text views in the recyclerview item inflated layout?
I have created a chatlist_divider.xml drawable as below:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="80dp"
android:insetRight="16dp">
<shape>
<size android:height="1dp"/>
<padding
android:bottom="2dp"
android:left="8dp"
android:right="8dp"
android:top="2dp"/>
<solid android:color="#color/colorDivider"/>
<corners android:radius="48dp" />
</shape>
</inset>
and programatically have used it as follows:
mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), R.drawable.chatlist_divider));
but ofc the result will not be as perfect as in the image above, because Im playing with the insetLeft property of the inset, until it feels right:
Is this the best that can be done? I wanted a proper and definite alignment to the TextViews inside the inflated layout of each list item, not just trial and error.
(I could also create a <View> below the textviews (which are in a Layout of its own) to simulate the divider, but then how can I assign it the .xml drawable?)
Any thoughts?
No need to use mRecyclerView.addItemDecoration.
Simply create the divider as a regular View with your drawable xml as background and add it to your item's layout xml.
If you make the root of the layout RelativeLayout, you can have the divider toRightOf="#+id/some_other_view", so it's aligned properly with the item's views.
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_toRightOf="#+id/my_photo_view"
android:background="#drawable/chatlist_divider" />
Related
I’d like to achieve the following look in my app to try and group the views into a more logical layout.
I was thinking of creating a Shape Drawable for the rectangle something along the lines of this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="12px"/>
<stroke android:width="2dip" android:color="#000000"/>
</shape>
But what I’m not sure about how to place the rectangle in the view. Most of the examples I’ve seen are placing a drawable as a background for a single view, not multiple views as per the above.
Do I need to create some sort of ‘blank’ view which holds no purpose but to house the rectangle? How would I go about this?
Everything is currently defined in a constraint layout.
Create a layout around the views and set its background as the drawable you created.
You will have to add this as a background to the Viewgroup where all these views are.
For eg. add this drawable as background to the relative layout.
Thanks for the comments all. Thought I'd update this with what I implemented as although the other answers were correct, I still didn't quite grasp what was required, so here's some additional information:
Create a file called 'rectangle.xml' in the drawable folder, with the following content:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="12px"/>
</shape>
Then in the layout file in which I wanted to place the rectangle, I added the following view. The key bit that I didn't understand was how to specify the size/position of the rectangle. This was achieved by defining the following constraints to wrap it around the items I wanted.
<View
android:id="#+id/myRectangleView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#id/unit_spinner"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#id/time_label"
android:background="#drawable/rectangle"
android:elevation="2dp"
/>
Couple of other points I struggled with:
Even though I defined this view before all the views it surrounds,
the arrows on the spinners were displaying behind the rectangle. To fix this, I had to use the elevation property on the view, and set all the other views to be higher.
I struggled to get the position of
the rectangle where I wanted it using the margin/padding of the
rectangle view, so instead had to add padding to the views it was
surrounding. Not sure if this is the right approach - I'm still
toying with it.
This might be just bad practice, but android gui keeps frustrating me as always. I have this standalone view called primary_button under res/layout:
<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/primary_button"
android:textColor="#color/light_warm_gray"/>
and its custom background "primary_button" shape under res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/light_olive" />
<corners android:radius="10dp"/>
<size android:height="40dp" android:width="40dp" />
</shape>
Now the problem is, when I set layout_margin to say 10dp, nothing is set because at that point when I inflate using that line:
Button b = (Button)View.inflate(this, R.layout.primary_button, null);
it has no layout parent (obviously needs to set layout params). I want neat code, and setting *Layout.LayoutParams in code all the time is a pain.
Shape padding, and button padding, didn't do what I wanted, but what they are intended to do. (In that case they just enlarged the button shape)
Another way i thought of, was to set a zero-alpha stroke around it, but that is a horrible solution.
I wonder how the stock buttons handle this. I mean they just leave a nice margin between them (around 15dp?) without having to set layout params. Shouldn't this somehow happen with a custom view as well?
Try the following:
View.inflate(this, R.layout.primary_button, parentView);
I suppose there is an add view method called later. try both by keeping it and removing it.
I want to give my ListView rounded corners and some padding. Here is my style:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white"/>
<corners android:radius="10px"/>
<padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
</shape>
But when I create a divider its width is not from one end to the other but looks like this:
I create the divider like this:
<ListView android:id="#+id/livList"
...
android:divider="#color/bordeaux"
android:dividerHeight="1px" />
Any ideas how to tell the divider to strech from one end to the other?
I will add an answer with the solutions from comments if anybody else have the same problem.If you want your divider to fit the whole ListView just remove paddings set in your drawable in xml. And just another thing: while trying to style ListView items, you need to 'work' on xml file which contains views which you are using to populate current item.
Dude you've entered right, left paddings as 5dp. Remove left & right paddings or make them 0dp
Lets say I have a ListView/GridView with each row consisting of an ImageView. In addition, each row has some padding to it. Ideally in this case, we would want the list selector to be on top so we use drawSelectorOnTop="true". Ok, no problem, except the list selector covers the entire area of the row. Ideally, I would like to have the list selector cover only the area of the ImageView. Below is an example of what I am talking about.
The left is what ideally should happen, and the right is what actually happens.
The only solution I could come up with is to add an extra "empty" View on top of the ImageView that matches in height/width and use that empty View as the selector. I'm wondering if there are any other or better ways to accomplish this?
use layer-list drawable.
drawable/selector_drawable.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" ><item
android:drawable="#drawable/internet_list_focused_holo_light"
android:top="10dp"
android:bottom="10dp"
android:right="10dp"
android:left="10dp">
</item>
</layer-list>
Use an InsetDrawable as your custom selector with a custom ShapeDrawable
For example:
drawable/my_selector.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/my_shape_drawable"
android:insetBottom="10dp"
android:insetLeft="10dp"
android:insetRight="10dp"
android:insetTop="10dp"/>
drawable/my_shape_drawable.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/selector" />
</shape>
This assumes your ImageViews are all of uniform size.
Android is killing me.
I want set rounded corners for Relative layout, it's simple
Drawable XML may look like
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<padding android:left="1dp" android:top="1dp"
android:right="2dp" android:bottom="2dp" />
<solid android:color="#FFFFFF" />
<corners android:radius="15dp" />
<stroke
android:width="2dp"
android:color="#FFF" />
</shape>
But, if I insert into Relative layout other layout or else widget like ImageView I got not clipped childs - see picture
How you can see I got not clipped child element.
How do I do this right?
Maybe it helps I want rounded corners works like in iOS
givenView.layer.cornerRadius =roundAngle;
[givenView.layer setBorderColor:[[borderColor colorWithAlphaComponent:alphaBorder] CGColor]];
[givenView.layer setBorderWidth:borderWidth];
givenView.clipsToBounds = YES;
Also I want show every one who think that padding it's solution:
Here set padding.
For correctly understating problem look at hierarchy picture
In here:
RelativeLayout - have described xml as background,
LinearLayout - container for custom objects with complex layouts which contains image as background and else widgets
profileStatistic - complex custom widget with many sub-objects in outer layout.
FULL picture of layout is:
And layout for inside controls (profileStatistic):
P.S.
I do not need 9-path. Question not about 9-path!
if you see the image rounded corner is getting applied. but child of the layout is not having round rect. that's why that corner of the is going out of the background of the parent. to solve this either you give some padding to the parent layout so that it will not go out of the parent layout's background.
Or you can apply same kind of rounded corner shape drawable to the child view also.