How can I keep circleimageview ahead of a CardView? in ConstraintLayout? - android

I want to show output in such a way that CircleImageView is ahead of CardView
But my output looks like this
This is my Single Row XML which I want to use with RecylerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/backgroundColor">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circleImageView"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="#drawable/cat_placeholder"
app:civ_border_color="#color/red"
app:civ_border_width="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
app:cardElevation="50dp"
app:layout_constraintBottom_toBottomOf="#+id/circleImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/circleImageView"
app:layout_constraintTop_toTopOf="#+id/circleImageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Consider wrapping your CardView and CircleImageView in a FrameLayout. Also, set the android:elevation property for both views in the way that you want them to appear.
<FrameLayout
android:id="#+id/some_container"
android:layout_width="..."
android:layout_height="..."
... >
<CardView
android:id:"#+id/card"
android:layout_width="..."
android:layout_height="..."
android:elevation="..."
...
... />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circleImageView"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="#drawable/cat_placeholder"
android:elevation="..."
...
... />
</FrameLayout>
Don't forget to check the FrameLayout documentation for understanding how best to use it. (Also, remember that a CardView is itself a FrameLayout.)
Additionally, I would suggest paying attention to the minSdkVersion of your project. The elevation property is available in API 21+ . Your app won't crash in lower API devices, but you might not get the look you need. Strongly consider using the FrameLayout for achieving overlap, or try designing custom views or using some library, e.g. for shadows to simulate elevation.

add android:elevation="55dp" to your imageView

Related

Not able to set background color to a view in Kotlin

Edit: everything is fine with the code, Android Studio is not deploying changes to app version 4.1.3
Im trying to change the background color of view(Relative layout and rootView) at runtime
but its not working at all here is the code
rootview = findViewById(R.id.rootView)
rootview.setBackgroundColor(resources.getColor(R.color.backgroundColor2))
Layout code/file, I'm using relativeLayout as the main layout here which is overridden by another view completely
<?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:id="#+id/rootView"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/banner_container"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
<at.markushi.ui.CircleButton
android:id="#+id/button"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher_foreground"
app:cb_color="#color/mainButtonColor1"
app:cb_pressedRingWidth="8dip" />
<at.markushi.ui.CircleButton
android:layout_width="64dp"
android:elevation="8dp"
android:layout_height="64dp"
android:src="#drawable/ic_launcher_foreground"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="30dp"
android:layout_marginBottom="30dp"
app:cb_color="#B71C1C"
app:cb_pressedRingWidth="8dip" />
</RelativeLayout>
If I set the background in XML it works fine
I think because you are using a Relative layout. So maybe, your relative layout is overridden or covered by another View (like view 2 is covered by view 1 and view 3 ). And when you change the background of view 2, this function worked but you don't see it because it is being covered by view 1 and view 3. You should try Liner Layout to replay.

Why app namespace doesn't have autocompletion in just one of my Android project layouts?

When I put "app:" in main_activity.xml, doesn't work the autocompletion, it only shows 1 option:
appNs
But when I do in another xml like fragment_owl.xml, it gives me all the attributes of app namespace.
I have xmlns:app="http://schemas.android.com/apk/res-auto in both of them
this are my xmls
activity_main.xml: (that has autocompletion of app namespace attributes)
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/holamundo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="69dp"
android:text="Hola Mundo"
android:textAllCaps="false"
android:textSize="36sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/roll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="134dp"
android:text="GIRAR"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/dice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/empty_dice"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat = "#drawable/dice_1"
/>
<!-- android:src="#drawable/dice_1"-->
</androidx.constraintlayout.widget.ConstraintLayout>
but in this another one:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<fragment
android:id="#+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="#navigation/navigation"
app:defaultNavHost="true"
app <- NO AUTOCOMPLETION :(
/>
</LinearLayout>
</layout>
I've already try invalite cache and delete or override some folders but nothings seems to work for me.
After doing some digging i found out the following
Changing your LinearLayout to a ConstraintLayout solves your problem, but why?
ConstraintLayout is from a library (you import it via your build.gradle androidx.constraintlayout:constraintlayout:*.*.*)
CommonsWare explains it here android.support.constraint is from a library, not the platform.
Taking this into account Android Studio maybe doesnt understand the app namespace for layouts that belong to the Android platform like LinearLayout as they are part of the android namespace.
This is my interpretation, hope it answers your question
Faced same issue here what worked for me
Click Blue stack icon (present in top left corner of layout preview) -> Force Refresh Layout
Set Constraints by dragging constraints in Layout preview window once
Now suggestions should start appearing again.

put the logo webview - Android

I want to put a logo on the corner of the webview. Because I don't want users to download pdf while pdf is loading. So I want to add a logo to the top right corner of the webview. But when I add the logo it stays under the webview and is not visible. How can I show it on top of the webview and in the top right corner?
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="...">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Home" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#color/colorPrimary"
tools:openDrawer="end"
android:layoutDirection="ltr">
</com.google.android.material.tabs.TabLayout>
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:layout_width="100dp"
android:layout_height="100dp" />
<WebView
android:id="#+id/webviewAntreman"
android:layout_below="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Ok so I noticed you already received some answers for your question but both seemed to miss some points I noticed hence decided to post an answer.
First, as #Ryan's answer mentioned you will need to put your ImageView after WebView in order for it to be drawn on top, otherwise it would always be below.
Second, upto this your ImageView should be on top-left, but since you require it to be on the Top-Right corner you will need to add
android:layout_alignEnd="#+id/webviewAntreman"
So your ImageView code written after the WebView woul be something like this.
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:layout_alignEnd="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:layout_width="100dp"
android:layout_height="100dp" />
As a note, android:elevation as in #Rumit's answer requires minimum API level 21, so if your app supports version below Android 5.0 this property won't work on those otherwise it's fine.
In the rare case none of this works, make use of a FrameLayout for what you need to achieve
Put the ImageView tag after the WebView tag in the XML. Views are drawn with the last one on top.
You can try with android:elevation="5dp" property on ImageView to elevate it from WebView.
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:elevation="5dp"
android:layout_width="100dp"
android:layout_height="100dp" />

Bring to Button front while having two ConstraintLayout

I'm trying to implement the following design on Android.
I know that to have the button at that position I should have two constraint layout; one for whole change password form and one for change password form without the Save button and then set the Save button's Top and Bottom constraint to the second ConstraintLayout.
But when I do this, the button goes behind the form, and therein lies the problem:
Here is my XML:
<android.support.design.widget.CoordinatorLayout 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=".ChangePasswordActivity">
<include
android:id="#+id/changePasswordBar"
layout="#layout/top_bar_full"></include>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:id="#+id/changePasswordCTL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activities_constraint_top_bottom"
android:layout_marginEnd="#dimen/activities_constraint_start_end"
android:layout_marginStart="#dimen/activities_constraint_start_end"
android:layout_marginTop="#dimen/activities_constraint_top_bottom"
android:background="#drawable/radius_background_exchange"
android:elevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
// some EditText and TextView views here
</android.support.constraint.ConstraintLayout>
<br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
android:id="#+id/changePasswordBT"
style="#style/customButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/sans_web_medium"
android:text="#string/finish"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="#dimen/signinup_button_font_size"
app:initialCornerAngle="5dp"
app:layout_constraintBottom_toBottomOf="#+id/changePasswordCTL"
app:layout_constraintEnd_toEndOf="#+id/changePasswordCTL"
app:layout_constraintStart_toStartOf="#+id/changePasswordCTL"
app:layout_constraintTop_toBottomOf="#+id/changePasswordCTL"
app:spinning_bar_color="#android:color/white"
app:spinning_bar_padding="6dp"
app:spinning_bar_width="4dp" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
When elevation isn't in the picture, views that are defined later in the XML file will draw "on top" of views defined earlier. However, your password form has android:elevation="5dp", and this will override the normal drawing order.
To fix, add elevation to the button as well. android:elevation="5dp" should be enough, since then they're at the same elevation and the normal rules should apply. But you could give it more elevation to guarantee that it always draws on top of the password form.
There is a 5dp elevation on the form and no elevation on the button, so it is partially obscured. Increase the button elevation to at least 5dp.
android:elevation="5dp"
You could achieve such design by using a CoordinatorLayout.
Example:
<android.support.design.widget.CoordinatorLayout 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="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="180dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:background="#color/primary" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_camera"
app:layout_anchor="#id/header"
app:layout_anchorGravity="bottom|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>
just use the following to anchor the layout of your button to the layout of your library view:
app:layout_anchor= "id_of_password_form_layout"

How can I add a shadow to bottom sheet view?

As of now, with the official bottom sheet component from the Android design library implemented the top edge doesn't show a shadow. But for what I've seen in various mockups and in the Material Design specs, the bottom sheet include a discrete shadow of some sort.
I think the shadow would help distant the bottom sheet from the main layout, especially if there's a peek value set and/or the bottom sheet is always visible. Otherwise it just will blend together with the main layout and its items.
I've tried both ViewCompat.setElevation(bottomSheet, 5); and setting android:elevation="5dp" to the view in the XML, without success.
I know that a shadow shape doesn't have the same appearance as an elevation - but at least give it a try. The trick is to use app:layout_anchor to clip the shadow to the bottom sheet.
activity_main.xml
<android.support.design.widget.CoordinatorLayout 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">
<MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:id="#+id/shadow"
android:layout_width="match_parent"
android:layout_height="16dp"
android:background="#drawable/shape_gradient_top_shadow"
app:layout_anchor="#id/bottom_sheet" />
<FrameLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
</android.support.design.widget.CoordinatorLayout>
shape_gradient_top_shadow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#64000000"/>
</shape>
Looks like this:
EDIT
Get an even better result with a custom ShadowView:
Post from Roman Nurik on this topic: https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
Gist of the ShadowView based on Roman Nurik's solution: https://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd
Then you can do the following:
<ShadowView
android:id="#+id/shadow"
android:layout_width="match_parent"
android:layout_height="16dp"
android:gravity="bottom"
app:layout_anchor="#id/bottom_sheet" />
For API Level 21 and higher, set the following in the parent view. You can also try in the rootview of the bottomsheet (I have not tried it in the root view)
android:background="#android:color/white"
android:elevation="16dp"
If no background then can use
android:outlineProvider="bounds"
For example, I have my sheet inside a nested scroll view
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:elevation="16dp"
android:outlineProvider="bounds"
>
<include layout="#layout/bottomsheet_1" />
</android.support.v4.widget.NestedScrollView>
The trick is to use a CardView as parent and set the elevation in the CardView
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:background="#fff"
android:clickable="true"
android:focusable="true"
app:behavior_hideable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:layout_height="140dp"
app:cardElevation="8sp"
card_view:cardCornerRadius="0dp">
<!--The content of your Bottom sheet-->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
EDIT
This technique is not the best solution if you are supporting Kitkat and below. It's due to the extra margin added by the Cardview.
I think this will help you
first create bottom sheet like bellow then include in your main activity
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="56dp"
android:layout_marginTop="0.5dp" // this margin depend on shadow area
android:background="set you color"
android:elevation="20dp" // chose your custom elevation
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_marginTop="1dp" // this margin depend on max elevation
android:layout_width="match_parent"
android:layout_height="200dp">
</LinearLayout>
</LinearLayout>

Categories

Resources