I'm trying to apply a ripple effect (#drawable/pill) to a layout. The ripple draws under the layout children, while I'd like the effect to be applied over the content.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="#drawable/pill"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/my_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text"/>
</FrameLayout>
</FrameLayout>
And pill.xml (where #drawable/pill_bg is a custom shape):
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask" android:drawable="#drawable/pill_bg"/>
<item android:drawable="#drawable/pill_bg"/>
</ripple>
Following other posts, I tried applying android:background="#null" and android:drawSelectorOnTop="true" to the ImageView with no luck.
Does it even make sense to have the ripple defined as the background of a layout? I'm wondering if the right approach is to separate the ripple from the background drawable, and apply the ripple to a dummy view that overlaps the content.
You are right. What you have defined in the xml, works like as shown in the first diagram. To have the ripple drawable above the ImageView and TextView, you need to define it above them. One approach to achieve that would be to have an ImageView on top of your LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/ll_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/my_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text" />
</LinearLayout>
<ImageView
android:id="#+id/iv_ripple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/ll_container"
android:layout_alignLeft="#id/ll_container"
android:layout_alignRight="#id/ll_container"
android:layout_alignTop="#id/ll_container"
android:src="#drawable/pill" />
</RelativeLayout>
Related
I am trying to get a card view so that I get a rounded corners image with a text under it but the thing is, when I add the text, since they are both inside of the rounded corners card view, the image is not rounded at the bottom (which is what I need). How would I accomplish that?
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_news"
android:layout_width="300dp"
android:layout_height="200dp"
android:src="#drawable/background_shape"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/news_title"
android:textColor="#color/black"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAlignment="center"
android:layout_marginTop="5dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
The image (I need the bottom corners of the image also rounded):
Try to put this code in your "#drawable/background_shape". Just tried it and it all working fine.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/>
</shape>
The problem is the TextView is overlaying the card radius. To fix that add padding to the text view or to the card and that should solve it.
The answer marked as correct, is not clean: Adds an unnecessary drawable, the card view already has a corner radius property, making the child implement round corners as well defeat the purpose of such attribute.
Also, try to use material card view: <com.google.android.material.card.MaterialCardView/>. You might not needed it now but it has more customizations.
If you only need a circular image in that case you need to add only ImageView inside CardView, and which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.cardview.widget.CardView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="16dp">
<ImageView
android:id="#+id/iv_news"
android:layout_width="300dp"
android:layout_height="200dp"
android:src="#drawable/background_shape"
android:scaleType="centerCrop" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/news_title"
android:textColor="#color/black"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAlignment="center"
android:layout_marginTop="5dp"/>
</LinearLayout>
See the image for example
I want to implement a login screen where I want user to login through only Google plus sign in. I was looking for design to choose from but couldn't get the idea. But then I came across something like. I tried to implement it.
This is what I tried.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
tools:context="com.bt4u.shopcite.login">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha=".5"
android:background="#drawable/ny"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_100sdp"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/applogo" />
<com.google.android.gms.common.SignInButton
android:id="#+id/Sign_in_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:alpha="1" />
</RelativeLayout>
You can see I tried to use alpha but its not giving me same results. I want a clone type of what is shown in the image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
tools:context="com.bt4u.shopcite.login">
<ImageView
android:id="#+id/yourbackgroundImageIDD"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/yourbackgroundImage" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000"">
</LinearLayout>
<ImageView
android:id="#+id/imageView3"
android:layout_centerHorizontal="true"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_100sdp"
app:srcCompat="#drawable/applogo" />
<com.google.android.gms.common.SignInButton
android:id="#+id/Sign_in_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
You can try above layout. Set a background image then LinearLayout with background color and set alpha within hex code of color like "#66000000" where 66 is alpha for black color.
you can refer to this for other values of alpha : Hex transparency in colors
I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"
Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.
This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>
I have a listview that will be filled with AsyncTask and at the bottom edge of the app I need to show a fixed overlay layout like this:
But I can't figure it out how I can do this in xml?
This is my present layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- Probably I need to do something here -->
</LinearLayout>
As Daniel has suggested, use a RelativeLayout because it allows stacking of components(same with FrameLayout and SurfaceView). The following code will give you the layout you are looking for:
<?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" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/transparentBlack"
android:layout_alignParentBottom="true" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView1"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:text="Medium Text"
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="40dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
</RelativeLayout>
In the code above, the color hex values used for transparentBlack is #95000000 and white is #ffffff.
Here is an excellent tutorial on the basics of UI design in android: Android User Interface Design: Layout Basics.
Change the parent layout to RelativeLayout or FrameLayout and position the fixed view at the same level of the ListView (but after the ListView)
Something like:
---> RelativeLayout
--> ListView
--> Any view as the fixed view
You can then align the fixed view to the bottom of the wrapping RelativeLayout
<?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">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- Here you should position the fixed view -->
</RelativeLayout>
Is it possible to create a button with a custom xml layout?
I have this layout:
<?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="wrap_content"
android:padding="1dp"
android:background="#7e7e7e">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#f9f9f9">
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="ButtText"
android:textColor="#000000">
</TextView>
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow"
android:layout_alignParentRight="true">
</ImageView>
</RelativeLayout>
</LinearLayout>
Now I want to use this on a button. Anyone know how I can do this?
I was thinking if I had Button.java file that extended Button. And then setView(R.layout.mylayout.xml); ... but that was to easy, and it clearly not working
Regards Martin
I've been dealing with this recently because I wanted to put two textviews in a button. You have to choose:
Extend Button class and use it in your layout
Use a Layout insted of a button and drag inside everithing you need and make it clickable by adding this parametter to it:
android:clickable="true"
After that you can modify te apperance of your layout by defining the
android:background="#drawable/my_background"
to give to it a "button-like" face and behavior
/res/drawable/mi_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/black"/>
<item android:state_pressed="true" android:state_enabled="false" android:drawable="#color/black" />
<item android:drawable="#color/white"/>
</selector>
You cannot literally use that layout on the face of a Button. You can achieve a similar look using the android:drawableRight property on a Button, though.
You can use a RelativeLayout to simply overlay your custom button view on top of a real Button 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">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Your custom button layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7e7e7e"
android:padding="1dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f9f9f9"
android:padding="10dp">
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="ButtText"
android:textColor="#000000" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/jobs_menu" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>