Is there a way to make CardView only have corner radius at the top?
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
>
Unless you try to extend the Android CardView class, you cannot customize that attribute from XML.
Nonetheless, there is a way of obtaining that effect.
Place a CardView inside another CardView and apply a transparent background to your outer CardView and remove its corner radius ("cornerRadios = 0dp"). Your inner CardView will have a cornerRadius value of 3dp, for example. Then apply a marginTop to your inner CardView, so its bottom bounds will be cut by the outer CardView. This way, the bottom corner radius of your inner CardView will be hidden.
The XML code is the following:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view_outer"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="3dp" >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view_inner"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center"
android:layout_marginTop="3dp"
card_view:cardBackgroundColor="#color/green"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="0dp" >
</android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>
And the visual effect is the following:
Always put your content in your Inner CardView. Your outer CardView serves only the purpose of "hiding" the bottom Rounded Corners of the inner CardView.
You can use the standard MaterialCard included in the official Material Components library.
Use in your layout:
<com.google.android.material.card.MaterialCardView
style="#style/MyCardView"
...>
In your style use the shapeAppearanceOverlay attribute to customize the shape (the default corner radius is 4dp)
<style name="MyCardView" parent="#style/Widget.MaterialComponents.CardView">
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
</style>
<style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">8dp</item>
<item name="cornerSizeTopLeft">8dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
You can also use:
<com.google.android.material.card.MaterialCardView
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MaterialCardView.Cut"
...>
It is the result:
With Jetpack compose you can use the shape parameter in the Card.
Something like:
Card(
shape = RoundedCornerShape(
topStart = 8.dp,
topEnd = 8.dp,
bottomEnd = 0.dp,
bottomStart = 0.dp,
)
){
Text("Content Card")
}
dependencies: compile 'com.android.support:cardview-v7:23.1.1'
<android.support.v7.widget.CardView
android:layout_width="80dp"
android:layout_height="80dp"
android:elevation="12dp"
android:id="#+id/view2"
app:cardCornerRadius="40dp"
android:layout_centerHorizontal="true"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9">
<ImageView
android:layout_height="80dp"
android:layout_width="match_parent"
android:id="#+id/imageView1"
android:src="#drawable/Your_image"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</ImageView>
</android.support.v7.widget.CardView>
There is an example how to achieve it, when the card is at the very bottom of the screen. If someone has this kind of problem just do something like that:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-5dp"
card_view:cardCornerRadius="4dp">
<SomeView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp">
</SomeView>
</android.support.v7.widget.CardView>
Card View has a negative bottom margin. The view inside a Card View has the same, but positive bottom margin. This way rounded parts are hidden below the screen, but everything looks exactly the same, because the inner view has a counter margin.
You can use this drawable xml and set as background to cardview :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffffff"/>
<stroke android:width="1dp"
android:color="#ff000000"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
I wrote a drawable lib to custom round corner position, it looks like this:
You can get this lib at here:
https://github.com/mthli/Slice
As #Gabriele Mariotti at feedback#2 suggested. Thanks so much #Gabriele bcz your feedback helped me on this case but my account can't vote for you at this time, so sorry :( (I also need helping like this topic creater)
I recommend to you shoud use MaterialCardView component (not CardView). Exactly is MaterialCardView.
So, this is the code in XML layout:
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="260dp"
android:layout_marginTop="0dp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.CardView" >
<ImageButton
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_arrow"
android:layout_marginTop="15dp"
android:layout_marginStart="15dp"
android:background="#android:color/transparent"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/imagePoke"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_gravity="center"
android:scaleType="fitXY"
tools:ignore="ContentDescription" />
</com.google.android.material.card.MaterialCardView>
And below is the code in style/ShapeAppearanceOverlay atribute:
<style name="ShapeAppearanceOverlay.CardView" parent="">
<item name="cornerFamilyBottomLeft">rounded</item>
<item name="cornerFamilyBottomRight">rounded</item>
<item name="cornerSizeBottomLeft">30%</item>
<item name="cornerSizeBottomRight">30%</item>
</style>
Output:
You need to do 2 things :
1) Call setPreventCornerOverlap(false) on your CardView.
2) Put rounded Imageview inside CardView
About rounding your imageview, I had the same problem so I made a library that you can set different radii on each corner. Finally I got the result what I wanted like below.
https://github.com/pungrue26/SelectableRoundedImageView
NOTE: This here is a workaround if you want to achieve rounded corners at the bottom only and regular corners at the top. This will not work if you want to have different radius for all four corners of the cardview. You will have to use material cardview for it or use some third party library.
Here's what seemed to work for me:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#F9F9F9">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/profile_bg"/>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cvProfileHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="32dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="280dp"
android:orientation="vertical"
android:background="#drawable/profile_bg"
android:id="#+id/llProfileHeader"
android:gravity="center_horizontal">
<!--Enter your code here-->
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
There's two cardview's in all. The second cardview is the one that will have rounded corners (on all sides as usual) and will hold all other subviews under it. The first cardview above it is also at the same level (of elevation), and has the same background but is only about half the height of the second cardview and has no rounded corners (just the usual sharp corners). This way I was able to achieve partially rounded corners on the bottom and normal corners on the top. But for all four sides, you may have to use the material cardview.
You could do the reverse of this to get rounded corners at the top and regular ones at the bottom, i.e. let the first cardview have rounded corners and the second cardview have regular corners.
My custom way to implemented with a lib
//Rounded card
add this implementation on build.gradle
implementation 'com.github.captain-miao:optroundcardview:1.0.0'
in XML:
<com.github.captain_miao.optroundcardview.OptRoundCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
app:optRoundCardCornerRadius="40dp"
app:optRoundCardLeftBottomCorner="false"
app:optRoundCardRightBottomCorner="false"
app:optRoundCardBackgroundColor="#E2EAF8">
The simple way to make rounded corners is by using the CardCornerRadius attribute
app:cardCornerRadius="value"
simply write this in your XML code
<androidx.cardview.widget.CardView
android:id="#+id/cv_info"
...
app:cardCornerRadius="5dp"
...>
and it will work perfectly
image of the cardview
the highest value you'll put in the rounded it will be.
but when we would like to make rounded corners only in certain spots like left bottom, right bottom and so on we will run into a problem, because the CardCornerRadius attribute does it to each side.
I managed to find a solution, not a perfect one, and sometimes this solution is irrelevant for example when you want to do it in the middle of the activity, it will work only if you want this to card view who's in the corners of the activity.
something like that rounded corner image cardView
so what I'm trying to achieve is to make the card view to overflow to activity overflowed cardview
to do this you may set the width of the card view higher than the width of the phone or a better way is to set the width to match the parent and then set the margin to minus.
The XML code will be something like that
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="-16dp"
android:layout_marginLeft="-16dp"
android:layout_marginTop="-26dp"
android:layout_marginEnd="-16dp"
android:layout_marginRight="-16dp"
and then set the app:cardCornerRadius to something high
app:cardCornerRadius="200dp"
and you should get the final result final solution
you can also play with this and make some cool things with that!
I hope it will help someone in the future, I know it's not the most elegant solution or good solution at all but it should do the job, I tried some other things but it seems to be more complicated.
you can use the library:OptionRoundCardview
Easiest way to achieve it in Android Studio is explained below:
Step 1:
Write below line in dependencies in build.gradle:
compile 'com.android.support:cardview-v7:+'
Step 2:
Copy below code in your xml file for integrating the CardView.
For cardCornerRadius to work, please be sure to include below line in parent layout:
xmlns:card_view="http://schemas.android.com/apk/res-auto"
And remember to use card_view as namespace for using cardCornerRadius property.
For example : card_view:cardCornerRadius="4dp"
XML Code:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view_outer"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="3dp" >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view_inner"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center"
android:layout_marginTop="3dp"
card_view:cardBackgroundColor="#color/green"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="0dp" >
</android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>
You can put your ImageView inside a CardView, and add those properties to the ImageView:
android:cropToPadding="true"
android:paddingBottom="15dp"
That way you will get rid of the rounded bottom corner, but keep in mind that this comes in the price of having a small portion of your image cut off.
You will find many ninja techniques on the internet but the best way to do this is to create a "Drawable Resource file" and design your own background and give a radius to every side or only one side.
So, these are the following steps:
Right-click on the Drawable file.
Then Click New and then click drawable resource file.
Then a page will popup you only need to set the name of your file.
Change the Selecter to Shape.
And add this code.
The final step is to set this newly created drawable file as the
background.
An easy way to achieve this would be:
1.Make a custom background resource (like a rectangle shape) with rounded corners.
2.set this custom background using the command -
cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);
this worked for me.
The XML layout I made with top left and bottom right radius.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" />
</shape>
In your case, you need to change only topLeftRadius as well as topRightRadius.
If you have a layout that overlaps with the corners of the card view and has a different color maybe, then you might need a different background resource file for the layout and in the xml set this background resource to your layout.
I tried and tested the above method. Hope this helps you.
If you're setting the card background programmatically, make use you use cardView.setCardBackgroundColor() and not cardView.setBackgroundColor() and make sure use using app:cardPreventCornerOverlap="true" on the cardView.xml. That fixed it for me.
Btw, the above code (in quotations) is in Kotlin and not Java. Use the java equivalent if you're using Java.
Related
This question is about mobile app UI design, I've searched the web for long time for this question and didn't found any satisfying explanation - so i decided to bring it here. I'm using Android studio (Java), I have a navigation bar that is made of a LinearLayout that contains 5 navigation buttons in it inside my activity_home.xml, I want to make kind of a rounded 'wavy' border in the middle (not corners) of that navigation bar. something that will look like this:
I will share here some code and images of what i already have and what i want it to be.
Code:
activity_home.xml:
<LinearLayout
android:id="#+id/navigationBar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/navigation_bar_border"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".20"
android:background="#drawable/user_icon"
android:clickable="true" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".20"
android:background="#drawable/notifications_icon"
android:clickable="true" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".20"
android:background="#drawable/add_icon"
android:clickable="true" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".20"
android:background="#drawable/search_icon"
android:clickable="true" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".20"
android:background="#drawable/home_icon"
android:clickable="true" />
</LinearLayout>
navigation_bar_border.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<gradient
android:startColor="#color/light_dark_color"
android:endColor="#color/light_dark_color"
android:angle="90"/>
</shape>
</item>
</layer-list>
What i have now:
What i want to achieve:
How can i do that?
Ah, that can be achieved by using BottomAppBarTopEdgeTreatment. How? Let's see.
First, create a function like this which returns a MaterialShapeDrawable which you can set to the LinearLayout as:
//Suppressing a Restricted API warning as it's a part of Stock Material Libraries.
#SuppressLint("RestrictedApi")
private fun returnBottomEdgeShapeDrawable(): MaterialShapeDrawable {
//This is how you get the curve, the main ingredient.
//BottomAppBarTopEdgeTreatment() takes three parameters:
//FabMargin - Margin between Fab Button and the curve
//RoundedCornerRadius - Radius to make the corners round
//CradleVerticalOffset - Vertical offset of curve and Fab
val bottomAppBarTopEdgeTreatment = BottomAppBarTopEdgeTreatment(
2f, 8f, 2f
)
//Diameter of the curve, current as Default Fab 56Dp
bottomAppBarTopEdgeTreatment.fabDiameter = resources.getDimension(R.dimen.56dp)
//This is further the shape of the LinearLayout.
//Set Corners to 0 in your case else corners of the LinearLayout will be curved
val shapeAppearanceModel = ShapeAppearanceModel()
.toBuilder()
.setAllCornerSizes(0f)
//Including the main ingredient here
.setTopEdge(bottomAppBarTopEdgeTreatment)
.build()
//Returning the ShapeDrawable
return MaterialShapeDrawable(shapeAppearanceModel)
}
This is exact code from one of my projects. Now, use it for your LinearLayout as:
ViewCompat.setBackground(yourLinearLayout, returnBottomEdgeShapeDrawable())
Remember to give the LinearLayout a BackgroundTint as the above code will make the shape but in Black color.
I've commented the code to make it more understandable.
Edit: One tip, you can use it for other Views as well like ImageView and also, you can show the curve in other sides as well like left or on bottom, just use setBottomEdge() instead of setTopEdge(). Also, this is the exact curve you've shown aboe in the images as this is the default code of Material App Bar shared by the one of the core developers of Material Libraries, Gabriele Mariotti.
I am trying something that I didnt think would take hours.
I want a cardview with a transparent background and slightly rounded corners.
In the end it should look like this (the pink item at the top is some other view):
This is how far I have got:
Actually I thought I am done, and I just need to round the corners, and remove the stroke from the cardview. Well, it seems like these 2 things are not possible. When I set app:cardCornerRadius="8dp" this is the output I get:
Removing the stroke didn' work at all. In the end I created a rectangle shape inside drawable (where I set the stroke to 0dp), assigned it to the cardview and the stroke was gone, but I got a white background behind the rounded corners and I wasnt able to remove it.
This is my CardView Layout:
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:elevation="0dp"
app:cardCornerRadius="8dp"
app:cardPreventCornerOverlap="true"
app:cardBackgroundColor="#00123456"
> </CardView>
Is there a possibility to achive what I want (first pic)? Or should I let go of RecyclerView switch to ListView?
Removing the CardView as the parent and putting a Constraintlayout, solved the problem.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#drawable/rounded_background"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:paddingTop="4dp"></ConstraintLayout>
I'm relatively new to android and I want to know how to put a visible divider/borders around images.
You could try to add an android:background attribute to your ImageView with the value of your desired border color. Then add an android:padding attribute to the ImageView with the value of your desired border width. It's not the most elegant solution, but it's understandable and for a new developer will do a fine job. For example:
<ImageView
android:id="#+id/list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android_image"
android:background="color/list_item_icon_border_color"
android:padding="1dp"
/>
Maybe the right way for performing this is by using custom XML drawables. You could check in Google for creating borders for ImageView using custom XML drawable. However being a little more complicated way than the upper mentioned method it could be an excellent way to start with XML defined custom drawables. Sooner or later you'll have to understand it, no other way. For circular border check this post - nice and clear explanation with custom XML drawable:
Create circular border around ImageView
In the item's layout you could put a View with heigth of 1dp or width 1dp and fill it with some color. This is a item for a list with a text and a bottom divider.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimary"/>
</FrameLayout>
I am using a cardview as the root of a custom view I am writing. I using the v7 support library. My XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
My problem is that I am getting a white border around my card view. It looks like it is there to indicate elevation as it is thicker on the right side. I've tried adjusting cardElevation and MaxCardElevation in my XML like so :
card_view:cardElevation="0dp"
and in code in my custom view that extends CardView and uses this layout:
setCardElevation(0);
setMaxCardElevation(0);
But the white border persists. I'm not sure how to get rid of it. If anyone had any input into why this is happening or suggestions on how I can remove the white border it would be appreciated. Thanks much.
I know it's a bit late, but for anyone having a similar problem:
I had the same issue: A white border was shown on pre-lollipop devices.
I solved it setting the cardPreventCornerOverlap to false on your XML.
Like this:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
Support CardView doesn't support content clipping, because it's expensive on older devices. It's possible to clip content using Canvas.saveLayer/restoreLayer and PorterDuff modes. This is how Carbon implements rounded corners with correct content clipping. See the image:
I might be late in the game, but I had the same issue. Just wanted to share a simple solution!
My custom view extended a CardView and I had a margin applied to the root element (i.e. CardView) in the XML just like in the original question. This ended up giving me the extra white border like this:
Solution was to move the margin from root of the Custom View XML to the declaration of your custom view (check comments in the snippet)
Code snippet:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cvSettings"
style="#style/DefaultCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Remove this -->
app:cardElevation="#dimen/default_card_elevation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
.
.
.
</android.support.v7.widget.CardView>
Ended up just moving over the margin to my custom view declaration which got rid of the extra white border:
<com.example.android.custom.MyCustomView
android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Move it here-->
cv:pt_widgetColor="#color/colorAccent" />
After the change, much cleaner :) :
use cardBackgroundColor="color" in xml card_view
sample code :
<android.support.v7.widget.CardView
android:id="#+id/card_view_khaterat"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
app:cardBackgroundColor="#f56f6c"/>
I have a custom toolbar with icons, etc that is modeled after the Android 3.x ActionBar.
One thing I'd like to add are dividers modeled after the ActionBar dividers.
I grabbed the 9-patch divider image from the SDK, and then tried incorporating that in a drawable that I set as the image for a 1dp wide ImageView, but no luck. Here is the Drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/divider_vertical_holo_dark"
android:dither="true" />
Here is the 'divider' ImageView:
<ImageView
android:id="#+id/toolbar_notification_div"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toRightOf="#id/toolbar_notification_txt_accel"
android:visibility="gone"
android:gravity="center_vertical"
android:src="#drawable/bg_actionbar_div"
android:contentDescription="#string/content_desc_div" />
Te end result is that nothing shows up for the divider. Any pointers?
EDIT:
Note that I am turning the various Image and TextViews to View.VISIBLE in the application itself depending on state. Assume they are all visible.
Found the problem, I was using android:src, when I should have been using android:background:
<ImageView
android:id="#+id/toolbar_notification_div"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toRightOf="#id/toolbar_notification_txt_accel"
android:visibility="gone"
android:gravity="center_vertical"
android:background="#drawable/bg_actionbar_div"
android:contentDescription="#string/content_desc_div" />
Your ImageView has android:visibility="gone", so it won't be shown.