Layout with shadow
I would like to create same shadow and layout as shown in above figure i tried http://inloop.github.io/shadow4android/ but i am not able to clear those 9 patch lines on top and left side of image
Using Material design, this can be done elegantly using elevation:
<TextView
android:id="#+id/myview"
...
android:elevation="2dp"
android:background="#drawable/myrect" />
https://developer.android.com/training/material/shadows-clipping.html
I will suggest you to use Cardview for this.
like below you can show shadow.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:padding="#dimen/_5sdp"
app:cardElevation="#dimen/_3sdp"
android:layout_marginTop="#dimen/_10sdp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/_3sdp"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:text="Profile"
android:drawableLeft="#drawable/profile"
android:drawablePadding="#dimen/_5sdp"
android:id="#+id/frag_setting_profile_tv"
android:padding="#dimen/_10sdp"
style="#style/textview_primary"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
app:cardElevation property show below shadow view .
Related
I have the following problem: I want to put a CardView over another one in an android layout file.
So in android studio layout editor the result is this and it's what I want:
the cardView round one top right of the rectangular CardView, at the same elevation
But if I start the emulator the result is this:
This is the code of the two cardView:
<androidx.cardview.widget.CardView
android:id="#+id/dati1h"
android:layout_width="300dp"
android:layout_height="483dp"
android:layout_marginTop="90dp"
android:layout_marginBottom="162dp"
app:cardCornerRadius="8dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/info"
android:layout_width="40dp"
android:layout_height="40dp"
app:cardCornerRadius="100dp"
app:layout_constraintBottom_toBottomOf="#id/dati1h"
app:layout_constraintEnd_toEndOf="#id/dati1h"
app:layout_constraintStart_toStartOf="#id/dati1h"
app:layout_constraintTop_toTopOf="#id/dati1h"
android:layout_marginBottom="480dp"
android:layout_marginStart="290dp"
android:clickable="true"
android:focusable="true"
app:cardElevation="5dp">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_info_foreground"/>
</androidx.cardview.widget.CardView>
I really don't know how to solve it. Thanks for the help!
how about make RelativeLayout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/info"
android:layout_width="40dp"
android:layout_height="40dp"
app:cardCornerRadius="100dp"
app:layout_constraintBottom_toBottomOf="#id/dati1h"
app:layout_constraintEnd_toEndOf="#id/dati1h"
app:layout_constraintStart_toStartOf="#id/dati1h"
app:layout_constraintTop_toTopOf="#id/dati1h"
android:layout_marginBottom="480dp"
android:layout_marginStart="290dp"
android:clickable="true"
android:focusable="true"
app:cardElevation="5dp"/>
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_info_foreground"/>
</RelativeLayout>
I can't see an issue with the code as you declared info CardView after dati1h that means info cardView should get rendered over dati1h. But this can be a device specific issue i have faced similar issue before (For constraint layout).
To solve it i chose to increase the elevation which will solve it for sure.
But as you don't want to follow that approach try using Frame/Relative Layout as parent of both CardView(instead of constraint layout) and it should solve your issue.
I know shapes and stuff but issue is that I want to use standart android button from SDK (#android:style/Widget.Button.Small) Just have a look at screenshot. I know how to do round corners with "shape" then "solid" which is flat color but i want .png from library ...
Card doesn't work...
Nope even with "androidx.appcompat.widget.AppCompatButton" doesn't work ...
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="15dp"
android:layout_marginTop="1dp"
app:cardElevation="1dp"
android:layout_gravity="center"
style="#style/gtBtnMenuStyle">
<androidx.appcompat.widget.AppCompatButton
android:drawableStart="#drawable/ic_supervisor_48dp"
android:onClick="onSupervisorClick"
android:text="Supervisor"
style="#style/gtBtnMenuStyle"/>
</androidx.cardview.widget.CardView>
If you do not want to take any drawable then one solution is to try to add a button into the cardview
Please find below code:
<androidx.cardview.widget.CardView
android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_40sdp"
app:cardCornerRadius="#dimen/_8sdp"
android:layout_marginTop="#dimen/_10sdp"
app:cardElevation="#dimen/_5sdp"
android:layout_gravity="center">
<androidx.appcompat.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/Widget.AppCompat.Button.Borderless"/>
</androidx.cardview.widget.CardView>
I hope this can help You!
Thank You.
In my code below, I have a white view with an elevation of 8dp. The blue button has an elevation of 10dp so in theory it should show. However, it doesn't. It only shows the part in which it is not directly over the white view. I know it's something to with the elevation however I do not know exactly what. I have sussed out that it's fine when the white view is =<2, but as soon as I set it higher, the problem occurs.
Here is my code:
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/login_background"
android:background="#color/colorPrimary" />
<View
android:id="#+id/view"
android:layout_width="#dimen/login_container_width"
android:layout_height="#dimen/login_container_height"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/login_container_margin_top"
android:background="#drawable/login_container"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_marginBottom="52dp"
android:background="#drawable/login_button"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
The following reflects this Stack Overflow question and the accepted answer.
Let's consider what you start off with. I don't have access to all your dimensions, etc. to make the following look exactly like your example but the basis is there. Below is the base layout. You can see that the button lies beneath the view even though the view has an elevation of 8dp and the button has an elevation of 10dp.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_alignBottom="#+id/button"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_margin="30dp"
android:background="#android:color/white"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="52dp"
android:background="#mipmap/ic_launcher"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
So, why is this? It is because android:elevation="10dp" in the XML for the button isn't really defining the elevation. Instead, the button's elevation is controlled by a "StateListAnimator" that controls the android:elevation and android:translationZ properties." (See accepted answer to above-referenced question.)
If you don't really care for what the StateListAnimator is doing for your layout, you can simply eliminate it by adding android:stateListAnimator="#null" to the XML for the button. Here is what the layout looks like after adding this code. (Please note that the designer may not show the changes immediately; Android Studio 3.0 Beta 6 didn't). So, you may need to refresh the layout to see the changes.
As you can see, the button is now above the view as we expect.
If you do care what StateListAnimator does for you, you will need to define your own and enter its name instead of #null in the XML statement changed above. The answer I reference above has the StateListAnimator that Android presumably uses, so you can take that as a basis and change the elevation to what you prefer. I haven't tried this, but it should work.
I added circular floating action menu to my app but I can't find anywhere option to add label to elements. Can some has any idea how to add text?
I used this tutorial:
http://androidlift.info/2015/10/12/create-floating-action-button-fab-android/
Circular floating menu can be created easily in ConstraintLayout. layout_constraintCircle, layout_constraintCircleAngle, layout_constraintCircleRadius this property of ConstraintLayout will help you to create circular positioning of views.
Check this official documentation.
layout_constraintCircle is for the id of the center view
layout_constraintCircleAngle is for the angle of the circular positioning view
layout_constraintCircleRadius is for the radius of the circle.
This is a sample xml code for Arc menu:
<android.support.constraint.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="match_parent"
tools:context=".CircularPositioningActivity">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_menu_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAttachFile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_constraintCircle="#id/fabMenu"
app:layout_constraintCircleAngle="270"
app:layout_constraintCircleRadius="100dp"
app:srcCompat="#drawable/ic_attach_file_white_24dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAudio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_constraintCircle="#id/fabMenu"
app:layout_constraintCircleAngle="315"
app:layout_constraintCircleRadius="100dp"
app:srcCompat="#drawable/ic_audiotrack_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCamera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_constraintCircle="#id/fabMenu"
app:layout_constraintCircleAngle="0"
app:layout_constraintCircleRadius="100dp"
app:srcCompat="#drawable/ic_camera_alt_white_24dp" />
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="fabAttachFile,fabCamera,fabAudio"
/>
</android.support.constraint.ConstraintLayout>
This is how it look like
can't find anywhere option to add label to elements
You can replace each circular positioning views with viewgroup or different layout for adding multiple view. This is the easiest way to do with out any library.
I want to achieve this (ribbon over a CardView):
And here's the snippet of my solution:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testId"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/ribbonParentId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|top"
android:layout_marginBottom="15dp"
android:background="#drawable/green_ribbon" >
<android.support.v7.widget.AppCompatTextView
android:id="#+id/ribbonId"
style="#style/RibbonStyle"
android:text="#string/ribbon_text" />
</LinearLayout>
<android.support.v7.widget.CardView
android:id="#+id/historicalWeightCardViewId"
style="#style/MyCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="18dp" >
... Other elements
</android.support.v7.widget.CardView>
And in the RecycleView adapter I bring the ribbon to front by calling.
itemView.findViewById(R.id.ribbonParent2Id).bringToFront();
My solution is working in most devices I tested except Nexus 5 (Android 5.1.1), where ribbon is still (partially) behind the cardview. I'm using AppCompat and targeting >v4.0.
What is the proper way of putting a view over a cardview? Is there another way of achieving the same thing? Why my solution doesn't work for some cases?
How can I make green ribbon to start from the left edge of the screen? Currently there still is a space between screed edge and start of the ribbon.
It is caused by elevation, because CardView on android 21 use true elevation and your LinearLayout has 0 elevation so it is behind the CardView.
To solve this problem, you have 2 options
set android:elevation to your LinearLayout, e.g. android:elevation="10px"
wrap your CardView with a FrameLayout like below
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/historicalWeightCardViewId"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="18dp" >
</android.support.v7.widget.CardView>
</FrameLayout>
<LinearLayout
android:id="#+id/ribbonParentId"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="left|top"
android:layout_marginBottom="15dp"
android:background="#android:color/holo_red_dark">
<android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ribbonId"
android:text="abc" />
</LinearLayout>