How to bring ImageView over the CardView? Please see details - android

I'm developing an app and I have made the below shown layout:
There is a CircleImageView and a CardView.
Here's the XML code:
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.playrapp.playr.Profile"
tools:showIn="#layout/activity_profile">
<android.support.v7.widget.CardView
android:id="#+id/profileCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:contentPadding="10dp">
</android.support.v7.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/userImageProfile"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="50dp"
android:src="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Here, the CardView is over the ImageView. I want ImageView to be over the CardView. How can I do that?
Please let me know.

Elevation of CardView is more higher than CircleImageView. So, you have to set higher elevation to CircleImageView to show it over CardVew.
Set CardView elevation as app:cardElevation="4dp" and set CircleImageView elevation as android:elevation="8dp"
Here is the working XML code. Try this:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.CardView
android:id="#+id/profileCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="16dp"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="false" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_marginTop="75dp"
android:padding="24dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hammad Nasir"
android:textSize="32sp"
android:textColor="#727272"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="\#hammadnasir"
android:textSize="24sp"
android:textColor="#727272" />
</LinearLayout>
</android.support.v7.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/userImageProfile"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="75dp"
android:layout_centerHorizontal="true"
android:src="#mipmap/ic_launcher"
android:elevation="8dp" />
</RelativeLayout>
OUTPUT:
Hope this will help~

The CardView has an elevation set by default set app:elevation="0dp"in the xml file.

CardView -> app:cardElevation ="4dp"
ImageView -> android:translationZ="6dp"

Related

ImageView displays above the ListView

I have a layout which consists of a ListView and an Image. I want to place the Image above Listview (in top left corner), but on running the app only Listview is visible and Image goes behind the Listview.
I want to show image instead of first item of the list. Any suggestions?
Below is the layout file:
<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#android:color/background_light"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="100">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/back"
android:id="#+id/back_button"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:focusable="true"
/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="multipleChoice">
</ListView>
</FrameLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#android:color/background_light"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/back"
android:id="#+id/back_button"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:focusable="true"
/>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="multipleChoice">
</ListView>
</LinearLayout>
<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#android:color/background_light"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="100">
<FrameLayout
android:id="#+id/frameLayoutImagevIew"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/back"
android:id="#+id/back_button"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:focusable="true"
/>
</FrameLayout>
<FrameLayout
android:layout_below="#id/frameLayoutImagevIew"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="multipleChoice">
</ListView>
</FrameLayout>
</RelativeLayout>
</LinearLayout>
Try to set an elevation value in the ImageView. For example: android:elevation="5dp". This should solve your problem. Hope it helps.
You can use headerview to add the image at the top like
listview.addHeaderView(view);// view which contains that image
Try this.

Android-how to set image in particular layout starting center point?

I want to set like below image :
pls help me to solve out this layout..
Thanks in advance.
BASIC
CardView have higher elevation than ImageView. So just set higher
elevation for ImageView.
Here we go ..
<?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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activity.Splash"
tools:showIn="#layout/activity_splash"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:elevation="5dp"
android:stateListAnimator="#anim/button_elevation"
android:id="#+id/one"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
>
<RelativeLayout
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_horizontal_margin"
android:background="?attr/selectableItemBackground"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is just for test"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<ImageView
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cross"
android:id="#+id/two"
android:layout_centerVertical="true"
android:elevation="10dp"
/>
</RelativeLayout>
</RelativeLayout>
And the screen shot ....

Why are the views not being elevated using android:elevation

I am trying to use the android:elevation attribute but it has no effect on the views. What I am doing wrong?
Here is the xml code with one FrameLayout and one Button but none of them is showing any shadow.
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.vaibhav.uielements.MainActivity">
<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:elevation="15dp"
android:background="#android:color/white"
android:layout_centerHorizontal="true" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="10dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="45dp"
android:id="#+id/button" />
</RelativeLayout>
[

Dynamically adjust position of Button in Android Studio

I have a Button in Linear Layout when I see in the Design view of Activity xml ,it looks like it is perfectly positioned but when I see in GenyMotoin avd it is farly placed from what I expected.
How to dynamically adjust the position of button on different screen sizes?
My xml file:
<?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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.xxx.MainScreen"
android:background="#b6b6b6">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="match_parent"
android:layout_height="263dp"
android:id="#+id/textView"
android:textSize="50dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="264dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next Act"
android:id="#+id/button"
android:layout_marginTop="100dp"
android:layout_marginLeft="20dp" />
</LinearLayout>
</RelativeLayout>
Use Linear Layout for the outermost layout.
It's not clear what your trying to achieve but If you want to position your views at the center on all devices. Try to use RelativeLayout instead of LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:background="#b6b6b6"
android:padding="#dimen/activity_vertical_margin"
android:weightSum="2"
android:orientation="vertical"
tools:context="com.offtogeek.motivatemyself.MainScreen">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="left"
android:textSize="50dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:text="Next Quote" />
</RelativeLayout>
</LinearLayout>

LinearLayout Beneath LinearLayout full width?

I have an ImageView and a TextView that are the only items in my Android UI. Currently the TextView is in the same LinearLayout as the ImageView, so the text sometimes runs to 2 lines. I want to get the text on its own line, with the full width of the parent element so it will be the whole width of the screen. So far everything I've tried moves the ImageView outside the window or makes it very small.
<LinearLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:weightSum="4"
android:gravity="center"
tools:context=".MainActivity"
android:baselineAligned="false">
<LinearLayout
android:layout_width="0dp"
android:orientation="vertical"
android:layout_weight="2"
android:gravity="center_vertical"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/activity_main_imageview_gototags"
android:src="#drawable/img_main_gototags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:onClick="imageViewGoToTagsOnClickOnClick"
android:adjustViewBounds="true"/>
<TextView
android:id="#+id/activity_main_textview_tagline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/activity_main_textview_tagline"
android:textColor="#color/dark_blue"
android:gravity="center"
android:textSize="30sp"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
May be this is what you want
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:gravity="center"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/activity_main_imageview_gototags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:onClick="imageViewGoToTagsOnClickOnClick"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5" />
</LinearLayout>
<TextView
android:id="#+id/activity_main_textview_tagline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:singleLine="true"
android:gravity="center"
android:text="lfhjdhkjfhkjdhkjfhkdhkjfhdkshfkhskahdfkjdhkhkjfhdk"
android:textColor="#android:color/holo_blue_bright"
android:textSize="30sp" />
</LinearLayout>
I hope it helps.let me know if it did not.
Don't give the parent(LinearLayout) of your ImageView a width of 0dp make it match_parent instead and the same for your TextView also there's a property on text views android:maxLines that corresponds to how many lines at max can it go to, set it to 1 and if you need truncation you can also use android:ellipsize on the text view.

Categories

Resources