I'm developing an App, and I need to draw borders and separators on a View, like the eBay app.
I think on a combination of shapes and view with 1dp. There is another easy way?
Many thanks.
Create a 9-patch image for the outside border. Use that as the background resource and it will give you the rounded corners with solid border. For dividers, you can create a simple view and have another background resource that's a simple image with the same color as the border in the 9-patch.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/roundedborder"
android:orientation="vertical">
<!-- Put Saved Searches display code here. Probably LinearLayout/horizonal -->
<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#drawable/simpleborder"
android:layout_margin="3dp"/> <!-- Spacer! -->
<!-- Put Favorite sellers display code here. Probably LinearLayout/horizonal -->
</LinearLayout>
</LinearLayout>
or you could use margins at the bottom, for the view which is just above the empty space.
android:layout_marginBottom="1dp"
If you mean how the views are grouped together so that some have curved corners on top, others in the bottom plus padding or a margin, and others with no curved corners at all, then this is one way to do it.
If you are using ListView with ListAdapter then When overriding getView(int position, View convertView, ViewGroup parent) determine from position what view should be returned and return it. You can change the view's padding and margins before returning it.
Also, it'll be more efficient if you override getItemViewType(int position) and return a constant representation a view type for a specific position so that Android can reuse views and you wont have to inflate a new one or change the attributes every time.
Related
I was working with animations recently, and got into trouble, when FrameLayout did not show its shadow properly due to weird reasons.
I found a good answer, which helped me, but there was used a property called clipToPadding. Answer can be found here: Android “elevation” not showing a shadow
However, I really wanted to understand the purpose of this property. I went to documentation of Android, which states that:
Defines whether the ViewGroup will clip its children and resize (but
not clip) any EdgeEffect to its padding, if padding is not zero. This
property is set to true by default.
I have read it for many times and I looked for examples on the web, but I really failed to find some. The only visuals I found was similar to this ClipToPadding difference
I can see the effect on the list, but how can it affect, when there is only one View in the ViewGroup for example etc.
It would be nice if someone could provide me a few key points about this property and how it works with a few examples.
clipToPadding basically means "If the view draws beyond its bounds into the padding area, overwrite this drawing with the parent's padding".
The shadow of an elevated view is drawn outside of the view's bounds. In order for it to be visible, you need to make sure that there is space around the view. You can achieve this by setting padding on the parent, but then you need to set clipToPadding=false so that the shadow is not overwritten.
As noted in this answer, this is also useful when you have a scrollable view such as a ListView or RecyclerView. When scrolling the list will draw contents out of its bounds. If you set clipToPadding=false, you'll be able to see that content instead of the padding, and only see the padding when you've completely scrolled up or down.
As an example, let's set an oval shape as background of a view and let's elevate this view. We'll also set some padding on the container. The screenshot below was taken with "Show layout bounds" activated in the Developers options. The area between the two red rectangles is the parent's padding.
This is how it looks with clipToPadding=true, notice how the shadow is clipped at the bottom, where it would lie between the two red rectangles:
With clipToPadding=false, we see the whole shadow:
Here is the XML I used:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#8888ff">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:clipToPadding="false"
android:layout_centerInParent="true">
<View
android:layout_width="170dp"
android:layout_height="170dp"
android:background="#drawable/oval"
android:alpha="0.5"
android:elevation="5dp"
/>
</RelativeLayout>
</RelativeLayout>
And here is is the oval drawable:
<shape android:shape="oval">
<solid android:color="#f2f2f2"/>
</shape>
I need to add to add ListView with complicated items background: different for even/odd and rounded corners at the top and bottom. It looks like this:
I have implemented all this stuff via level-list, but there is one more thing I want to do.
Now the bottom item is near the bottom of the screen. It is better to add some space.
I don't want to add bottom margin to ListView, I need margin only for last item.
The ways I see to do this:
Footer
A kind of hack – add footer with empty TextView to ListView. But footers are quite unstable things, they usually disappear after notifyDataSetChanged and there is no way to get them back
Image with transparent pixels
I asked designer to add transparent pixels to bottom background resource. Unfortunately, in this case vertical centering is completely broken.
For example, there is 9patch like this:
And layout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- View with background with transparent pixels on bottom -->
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/item"
android:background="#drawable/some_bgr"
android:padding="10dp"
>
<TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"
android:text="Title"
android:layout_gravity="center"
android:textSize="18sp"
/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Detail"
android:layout_gravity="center"
android:textSize="18sp"
/>
</LinearLayout>
<!-- Just for marking place took by view -->
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_below="#id/item"
android:background="#88ff55"
/>
</RelativeLayout>
The result:
As you see, centering is not working. Unfortunately.
(BTW, if specify this 9patch as background for TextView, centering works good. If you know any article, explaining this, please let me know.)
Add bottom margin to last item in Adapter implementation
That should work, but for unknown reason I still can't get it work.
I don't like this way, because I don't like to modify dimensions in code.
So
There is already imaginary way – construct some XML drawable with particular bitmap and margin. According to drawables concept it should be possible, but I can't find implementation. May be somebody knows?
Any other ideas?
In your ListView, set a paddingBottom and clipToPadding="false".
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="8dp"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"/>
This also works for RecyclerView.
Only use android:scrollbarStyle="outsideOverlay" if you want the scroll bar to not overflow into the padded area.
add an empty footer in your list like this:
TextView empty = new TextView(this);
empty.setHeight(150);
listview.addFooterView(empty);
you can also do it from code if you want, for example here I react to
to EditText different situations:
if(s.toString().length()>0)
{
contacts_lv.setClipToPadding(false);
contacts_lv.setPadding(0,0,0,270*screenDensity);
}
else
{
contacts_lv.setClipToPadding(true);
contacts_lv.setPadding(0,0,0,0);
}
Clocksmith's answer is the best and pretty clever. You can also create an empty footer view.
Add these two lines in your listView XML code:
android:transcriptMode="alwaysScroll"
android:stackFromBottom="true"
Another solution might be that you make a mock view with certain height.
In your adapter in getViewCount return 2.
In getCount return yourData.size+1.
In getViewType check if the element is last element return 2;
Use this type in getView to populate the mockview.
I guess you want to add margin only to last item:
So you can do in this manner, in your getview method the index of the list item and check if its the last item, then progrmatically add margin to the view.
I am using a TextView and a 9 patch image as its background for a messaging application in android.
Here's what it looks like:
See how for the blue, it is showing too much on the left? How can I reduce it when it decides that it has to wrap the text?
I tried to access the Width and Height fields on the view in public View getView(int position, View convertView, ViewGroup parent), however they are always zero (ps the TextView is located inside of a ListView and the getView method is inside the adapter for the ListView).
Thank you!
TextView XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:background="#drawable/bubble_b"
android:shadowColor="#color/textShadow"
android:shadowDx="1"
android:shadowDy="1"
android:text="Medium Text"
android:textColor="#000000"
android:textSize="16sp"
android:lineSpacingMultiplier="1.1" />
</LinearLayout>
Also, here's a screen of what the nine-patch does for it, so you can see how that works for it:
In the iPad picture you attached, iMessage is setting maxWidth to the half of the screen I guess.
So you can get Screen Width and set maxWidth to half of it for your TextView
This is how you can get screen width and pass it to your TextView,
Display display = ((WindowManager)mContext.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
yourTextView.setMaxWidth(display.getWidth()/2);
P.S. getWidth method for Display class says deprecated, you can find alternative solution to this. You can get width of your LinearLayout also.
Check the 9-patch image in draw9patch. Check how for to the left you draw the black lines in there. I think the bottom line defines what part to stretch, the top line defines the area for the content.
I want to show up a 3*3 grid like matrix view on top of a custom View.(That custom View is used as a view for displaying a ball acting upon the accelerometer). What I wanted to achieve is when the ball on that custom View is acted upon by accelerometer, it would move along the custom View(which I named "mSimulationView"), passing through any one of the 9 grid like boxes. Passing through any of the boxes(grid) triggers a directional control as that of joypad. I want to make the boxes(grid) visible to the users and also change the color of the box(grid) as the ball passes through it.
The problem is I have no idea about how to add the grid view on top of the custom View. If I add "table Rows" or "Grid Views", it would block the custom View completely. I was thinking of using "GLSurfaceView" for this purpose,but I am not sure if that will work or not either. I am trying to make a gravity Simulated Joypad for android.v2.1.
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="250dp"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
</LinearLayout>
I need a 3*3 grid like structure on top of the linearLayout.
I am struggling with making one view's background transparent so that any areas on top view that are not drawn actually reveals the bottom view.
I have read several threads here about this, but whatever I try the top view is drawn in black.
Both bottom view and top view are inherited from the View base class and onDraw() is overridden and this is my layout.xml:
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.domain.myapp.MyBottomView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mybottomview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bottom_image"/>
<com.domain.myapp.MyTopView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mytopview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"/>
</merge>
Anyone got any suggestions for me I would be extremely greatful!
Regards
/Dee
Try this.
android:background="#android:color/transparent"
A resource is available here : http://android-developers.blogspot.in/2009/01/why-is-my-list-black-android.html