I want to implement a ViewPager having angled rectangle as background as shown in the image. I have tried to get it done by setting xml as background. But it only displays properly if we give image in that xml itself and if I try to manage it runtime then it is not taking that angled background.
This is the drawable I have attached to custom viewpager layout
<item android:top="300dp"
android:bottom="-300dp"
android:left="0dp"
android:right="-300dp">
<rotate
android:fromDegrees="-10"
android:pivotX="0%"
android:pivotY="100%">
<shape
android:shape="rectangle">
<solid
android:color="#color/white"/>
</shape>
</rotate>
AND this is the custom viewpager layout
<?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">
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/custom_imageview">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/rl_image"
android:layout_marginLeft="20dp"
android:layout_marginTop="-60dp">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/fashion1"
app:civ_border_color="#FFF"
app:civ_border_width="1dp" />
</RelativeLayout>
</RelativeLayout>
This is how it should display
Can anyone please tell me how to do it?
If you need to learn how to create a diagonal cut you could have a look at this tutorial:
https://medium.com/#adinugroho/create-diagonal-cut-view-in-android-5a376eca6a1c
If you need a library to do it for you then have a look at this library:
https://github.com/florent37/DiagonalLayout
This is how it should display
checked this link.
based on above link i guess as page swipes you want change background.
solution :
use constraint_layout or frame_layout.
add view pager as match_parent in height and width.
angle view use it and view on top of view_pager.
suggestion : use constraint layout.
note : above solution will not change view_pager dimensions (dont change it since view is complex, if you change behaviour unpredictable). Only you end up with place custom view on top of pager.
Related
I want to achieve the background effect of the TextView at the bottom of the below image.
sorry for my poor english...
You can create your background drawable
your_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient android:angle="0"
android:endColor="#fff"
android:startColor="#c86e6e6e"
android:gradientRadius="100dp"
android:type="radial"/>
</shape>
And add to textview:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST"
android:textColor="#fff"
android:background="#drawable/your_drawable"
android:padding="90dp"
android:textSize="30sp"/>
You have to use gradient scale. go Check documentation for more details
I can not draw the shadow with setElevation.I do not want to use a drawing to do this. Here is the code:
This is the parent.
Page.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/background">
<LinearLayout
android:id="#+id/pp_cont_new_list"
android:background="#color/background"
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:paddingTop="5dp">
</LinearLayout>
</LinearLayout>
Here I build a simple layout.
PersonalPage.Java
final LinearLayout ROOT = (LinearLayout) findViewById( R.Id.pp_cont_new_list);
final LinearLayout LL = new LinearLayout(context); //Container
LL.setLayoutParams (new LinearLayout.LayoutParams(
Generic.PARAM_MP, //eq. match_parent
(int) context.getResources ().getDimension (R.dimen.bt_preview_list_height)
));
LL.setBackgroundResource (R.drawable.background_new_list);
LL.setElevation (5f);
LL.setClickable (true);
ROOT.addView( LL );
/*
* other code inner the container
*/
this background
background_new_list.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#color/background"/>
</shape>
</item>
<item>
<ripple android:color="#color/textColorAlpha"/>
</item>
</layer-list>
I would like an explanation of my error.
And I would also like to know what to use for pre-LOLLIPOP.
set elevation just doesnot work for pre-lolipop
You can create a custom button image that has a shadow and set it as button background..or any view's background to give shadow effect
use ViewCompat.setElevation(your_view(in your case LL), elevation_amount);
but for devices pre-Lollipop this will not have effect,
for pre-Lollipop cases you might use:
android:background="#android:drawable/dialog_holo_light_frame"
This is working if you don't mind doing things in xml. I tried it out. I did not have background color value that you are using so I used a different color for parent layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E8E8E8"
android:paddingBottom="20dp"
android:clipToPadding="false"
android:translationZ="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/background_new_list"
android:clipToPadding="false"
android:elevation="25dp"
android:orientation="vertical"
/>
Note: I am using a higher elevation value just to make it easier to check if it's working. you can adjust it to what you need.
I am using grid view to display images in my app and I am using CardView for parent element.
I want the CardView to have some space from the beggining of the page and between each CardView so I am setting layout_margin to be 5dp.
I also want to have some space between the image and the beggining of the CardView so I put contentPadding to be 10dp.
The result though is not what I want. It seems that the layout_margin is pushing the image itself and the padding for the right side is not 10dp as I want but 10dp - 5dp and I really have no clue how to fix that
Here is visual examples:
And this is the result I get:
You can see the right side of the CardView and how the image is not properly centered.
Thank you for your help!
Edit:
ImageViewStyle:
<style name="ImageViewStyle">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">#dimen/card_view_image_view_height</item>
<item name="android:layout_gravity">center</item>
<item name="android:layout_alignParentTop">true</item>
<item name="android:scaleType">centerCrop</item>
</style>
Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
app:cardCornerRadius="2dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="10dp"
android:background="#drawable/image"/>
</android.support.v7.widget.CardView>
I'm using this library for VerticalSeekBars in my Android application. In my app, I'm laying multiple vertical seekbars horizontally (like about 10-15?) using LinearLayout and layout_weight properites. In addition, I'm using a thumb that is supposed to be bigger than the progress (essentially laying on top of the progress) and a custom drawable for the progress as such:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:height="10dp"
android:gravity="center_vertical">
<shape android:shape="rectangle">
<corners android:radius="500dp"/>
<solid android:color="#000000"/>
</shape>
</item>
</layer-list>
On API 23 (which I believe is Marshmallow?), everything lines up correctly and resizing properly across different screen sizes. Awesome. However, on API 22 and below, the progress drawable doesn't adjust itself; instead, it increases it size to have the seekbar thumb fit inside the progress. I've tried to resize the drawable in my code but that still doesn't do anything either. I have drawn it out to show what I mean:
How do I get API 22/below to match the same behavior API 23 is achieving with the seekbar?
Here's an example of my VerticalSeekBar setup:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="0.5">
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
android:layout_width="0dp"
android:layout_height="0dp"
android:max="100"
android:progress="50"
app:seekBarRotation="CW270"
android:progressDrawable="#drawable/custom_track"
android:splitTrack="false"/>
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="0.5">
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
android:layout_width="0dp"
android:layout_height="0dp"
android:max="100"
android:progress="50"
app:seekBarRotation="CW270"
android:progressDrawable="#drawable/custom_track"
android:splitTrack="false"/>
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>
</LinearLayout>
Thanks!
Set maxHeight like this:
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
...
android:maxHeight="2dp"
.../>
I'm trying to give my webView rounded corners.
Here is my code:
rounded_webview.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#000"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
And here is my webView:
<WebView
android:id="#+id/webView1"
android:layout_width="293dp"
android:layout_height="142dp"
android:layout_gravity="center_horizontal"
android:padding="5dip"
android:background="#drawable/rounded_webview"/>
But it simply won't work! Corners are not rounded...
This is a little quirk of Webview, it has a default background color of white, drawn in front of any drawables. You'll need to use the following code to make it transparent and show your drawable background:
WebView webview = (WebView)findViewById(R.id.webView1);
webview.setBackgroundColor(0);
The only way is wrap WebView element by other view (FrameLayout for example), and apply rounded corners background on external view.
Example:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dip"
android:paddingBottom="10dip"
android:paddingLeft="1dip"
android:paddingRight="1dip"
android:background="#drawable/white_rounded_area"
>
<WebView
android:id="#+id/web_view"
android:layout_width="300dip"
android:layout_height="400dip"
android:layout_gravity="center"
/>
</FrameLayout>
Where paddingTop and paddingBottom equals radius from drawable/white_rounded_area,
paddingLeft and paddingRight equals stroke width drawable/white_rounded_area.
Minus of this approach is top an bottom rounded panels can have different background color with web page inside WebView, especially when page scrolled.
You can use a CardView to contain the webview, and you just need to add the corner radius that you want with with app:cardCornerRadius :
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"> // HERE
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
And that's all
try this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<stroke
android:color="#drawable/black"
android:width="3dp"/>
</shape>
I use an image that looks like a picture frame, where I give the frame the rounded corners. I lay this picture frame over the view I'm trying to give the rounded corners to.
This gets over the problem in iBog's solution of background panels not working nicely.
The trick is to use a RelativeLayout; place your layout inside it.
Below your layout, add another ImageView, setting its background to a suitable masking image frame. This will draw that on top of your other layout.
In my case, I made a 9Patch file which was a grey background, with a transparent rounded rectangle cut out of it.
This creates the perfect mask for your underlying layout.
The XML code could be something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:layout_width="fill_parent">
<!-- ... INSERT ANY VIEW HERE ... -->
<!-- FRAME TO MASK UNDERLYING VIEW -->
<ImageView android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#drawable/grey_frame"
android:layout_alignTop="#+id/mainLayout"
android:layout_alignBottom="#+id/mainLayout" />
</RelativeLayout>
The full details can be found in my original answer here:
Android XML rounded clipped corners
None of the solutions worked for me.
It worked for me. Before loading data you need to set
webView.getSettings().setUseWideViewPort(true);
and applied you're drawable in XML file.
It worked for me.
Wrap the WebView with a FrameLayout, then set background,
clipToOutline and outlineProvider attributes on it
<FrameLayout
android:layout_width="350dp"
android:layout_height="400dp"
android:background="#drawable/rounded_rectangle"
android:clipToOutline="true"
android:outlineProvider="background">
<WebView
android:id="#+id/myWebView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>