Shadow in Android - android

enter image description here
As you can see there is a shadow around the ticket. I cannot make this because I am using the library (TicketView) and there is a problem with Scallops
HERE IS MY CODE
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#f3f6f9">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginTop="52.5dp"
android:layout_marginEnd="18dp"
android:orientation="vertical"
android:elevation="14dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="37.5dp"
android:background="#drawable/gradient_tickets">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:elevation="2dp"
android:text="Bus 79"
android:textColor="#fefefe"
android:textSize="12sp"
tools:layout_editor_absoluteX="37dp"
tools:layout_editor_absoluteY="69dp" />
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:scaleX="0.6"
android:scaleY="0.6"
android:src="#drawable/arrow_list" />
<TextView
android:id="#id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/text1"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:text="11/03/2017"
android:textColor="#a4158a"
android:textSize="12sp" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/img1"
android:layout_alignParentRight="false"
android:layout_alignParentBottom="false"
android:layout_marginTop="40dp"
android:text="$0.30"
android:textColor="#a4158a"
android:textSize="12sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.vipulasri.ticketview.TicketView
android:id="#+id/ticketView"
android:layout_width="wrap_content"
android:layout_height="142dp"
app:ticketBackgroundColor="#FFFFFF"
app:ticketDividerColor="#16191c"
app:ticketDividerDashGap="4dp"
app:ticketDividerDashLength="3dp"
app:ticketDividerPadding="1.5dp"
app:ticketDividerType="dash"
app:ticketDividerWidth="0.5dp"
app:ticketOrientation="horizontal"
app:ticketScallopPositionPercent="25.7"
app:ticketScallopRadius="7dp"
app:ticketShowBorder="false"
app:ticketShowDivider="true"
/>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20.5dp"
android:layout_marginTop="16.5dp"
android:elevation="2dp"
android:text="12/03/2017"
android:textColor="#a4158a"
android:textSize="10sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/ticketView"
android:layout_alignRight="#+id/ticketView"
android:layout_marginTop="16.5dp"
android:layout_marginEnd="17dp"
android:layout_marginRight="17dp"
android:elevation="2dp"
android:text="$0.30"
android:textColor="#a4158a"
android:textSize="10sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="31dp"
android:layout_marginTop="47dp"
android:layout_marginRight="31dp"
android:layout_marginBottom="45dp"
android:elevation="3dp"
android:src="#drawable/barcode_img" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
I need to have a shadow there but I cannot manage to do it. Also I used the TicketView which is for making the form of the ticket. Could u please say what I need to add there in order to have such a shadow?

You can use CardView. There is a parameter which app:cardElevation.
But if it's not possible, You can create a drawable and you can create shadow with using gradient.

Related

List View inside relative layout and scroll view not covering screen

I have below layout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/searchScreenBG">
<RelativeLayout
android:id="#+id/title_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="#dimen/_7sdp">
<ImageButton
android:id="#+id/ib_hamburger"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="#dimen/_16sdp"
android:layout_marginRight="#dimen/_16sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#android:color/transparent"
android:contentDescription="#null"
app:srcCompat="#drawable/ham_burger" />
<com.rod.com.rod.ui.views.CTextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ib_hamburger"
android:layout_centerHorizontal="true"
android:text="#string/basic_details"
android:textColor="#color/colorGreen" />
<ImageButton
android:id="#+id/ib_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/ib_hamburger"
android:layout_marginLeft="#dimen/_16sdp"
android:layout_marginStart="#dimen/_16sdp"
android:background="#android:color/transparent"
android:contentDescription="#null"
app:srcCompat="#drawable/left_arrow" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reg_no_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_5sdp"
android:layout_below="#+id/title_bar"
android:background="#color/colorWhite">
<TextView
android:id="#+id/tv_reg_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp"
android:textColor="#color/colorLightGrey" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/reg_no_layout"
>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:layout_marginRight="#dimen/_10sdp"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/basic_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/_10sdp"
android:background="#drawable/list_item_bg"
android:paddingBottom="#dimen/_10sdp">
<TextView
android:id="#+id/tv_district_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="11dp"
android:text="#string/district"
android:textColor="#color/colorBlack"
android:textSize="#dimen/_13sdp" />
<TextView
android:id="#+id/tv_district"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_district_label"
android:layout_alignStart="#+id/tv_district_label"
android:layout_below="#+id/tv_district_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_tehsil_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/tv_district"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="75dp"
android:layout_marginRight="75dp"
android:text="#string/tehsil"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_tehsil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tv_district"
android:layout_alignLeft="#+id/tv_tehsil_label"
android:layout_alignStart="#+id/tv_tehsil_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_date_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_district"
android:layout_alignStart="#+id/tv_district"
android:layout_below="#+id/tv_district"
android:layout_marginTop="13dp"
android:text="#string/date"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_date_label"
android:layout_alignStart="#+id/tv_date_label"
android:layout_below="#+id/tv_date_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_jild_no_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tv_date_label"
android:layout_alignLeft="#+id/tv_tehsil"
android:layout_alignStart="#+id/tv_tehsil"
android:text="#string/jild_no"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_jild_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_jild_no_label"
android:layout_alignStart="#+id/tv_jild_no_label"
android:layout_below="#+id/tv_jild_no_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
<TextView
android:id="#+id/tv_party_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_date"
android:layout_alignStart="#+id/tv_date"
android:layout_below="#+id/tv_date"
android:layout_marginTop="13dp"
android:text="#string/party"
android:textColor="#color/colorBlack" />
<TextView
android:id="#+id/tv_party"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_party_label"
android:layout_alignStart="#+id/tv_party_label"
android:layout_below="#+id/tv_party_label"
android:text="TextView"
android:textColor="#color/colorLightGrey" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:layout_below="#+id/basic_details"
android:layout_marginTop="13dp"
android:background="#drawable/list_item_bg">
<TextView
android:id="#+id/tv_member_details_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="14dp"
android:text="#string/member_details"
android:textColor="#color/colorBlack"
android:textSize="#dimen/_16sdp" />
<ListView
android:id="#+id/lv_members"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tv_member_details_label"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginRight="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="16dp"
android:divider="#color/colorLightGrey"
android:dividerHeight="#dimen/_1sdp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
</FrameLayout>
I want to make the relative layout below basic_layout cover the whole of the rest screen. How can I achieve that. After searching I had found that I should put a linear layout inside my scroll view, and then relative layouts should added. But that's of no help.
I want hierachy something like below:
----RelativeLayout
-------TitleBar
-------TextView
-------ScrollView (rest of screen)
----------RelativeLayout (upper portion of scroll view)
------------TextViews
----------RelativeLayout (rest of scrol view)
-------------TextView
-------------ListView
Any help please?
Actually the problem is that you are using 2 layouts in your scrollview so the listview won't take the scroll of itself and it will limit the list height as well. To go around this you need to pass fix value to your listview then it will show completely within that specified height. And the rest of the layout if you want to get exactly as you have shown in the picture you need to use cardview instead.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:layout_below="#+id/basic_details"
android:layout_marginTop="13dp"
android:layout_marginBottom="10dp"
android:background="#drawable/list_item_bg">
<TextView
android:id="#+id/tv_member_details_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="14dp"
android:text="#string/member_details"
android:textColor="#color/colorBlack"
android:textSize="16dp" />
<ListView
android:id="#+id/lv_members"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tv_member_details_label"
android:layout_marginLeft="#dimen/_40sdp"
android:layout_marginRight="#dimen/_40sdp"
android:layout_marginStart="#dimen/_40sdp"
android:layout_marginTop="16dp"
android:divider="#color/colorLightGrey"
android:dividerHeight="#dimen/_1sdp" />
</RelativeLayout>

Image, text/text and image in Android

I am trying to get the following design. Consider that it is a list item.
But my following design, it does not give me that design.The textviews come on the top of left image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black_24dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:id="#+id/userimage" />
<TextView
android:text="Text1"
android:layout_toRightOf="#id/userimage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/username"/>
<TextView
android:text="Text2"
android:layout_below="#id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_keyboard_arrow_right_black"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout >
Instead of a LinearLayout use a RelativeLayout, and for the TextViews use:
android:layout_toRightOf="#id/userimage" and
android:layout_alignTop="#id/userimage" or
android:layout_alignBottom="#id/userimage"
Here you go:
<?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="wrap_content"
android:background="#FFFFFF"
android:orientation="horizontal">
<ImageView
android:id="#+id/userimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_person_black_24dp"
tools:background="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#id/userimage"
android:layout_toEndOf="#id/userimage"
android:layout_toStartOf="#id/arrow"
android:orientation="vertical">
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
tools:text="Text1" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
tools:text="Text2" />
</LinearLayout>
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_keyboard_arrow_right_black"
tools:background="#mipmap/ic_launcher" />
</RelativeLayout>
Try to play with different layouts when you have time, it will help you greatly in the future.
Edit:
Better solution for centering TextViews.
Your problem in text2 use it , it would work
<TextView
android:text="Text2"
android:layout_below="#id/username"
android:layout_toRightOf="#id/userimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip" >
<ImageView
android:id="#+id/userimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_person_black_24dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_keyboard_arrow_right_black" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#id/secondline"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/userimage"
android:layout_toLeftOf="#id/icon"
android:singleLine="true"
android:gravity="center_vertical"
android:text="Example username"
android:textSize="16sp" />
<TextView
android:id="#+id/secondline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/userimage"
android:layout_toLeftOf="#id/icon"
android:singleLine="true"
android:text="Description"
android:textSize="12sp" />
</RelativeLayout>
I used some dp sizes that you did not use and added a few other things, but I guess you can change it so that it suits your desire. I did try use the same names as you did. Overall this should work if you tweak it a bit.

Picture not aligning top?

So in my program i have a layout implemented in which i want the image to alignTop of the parent. I used to exact same layout code for another activity (with minor changes) and it works perfectly but when using it in this activity it does not. My image still aligns to the center fo the view. Here is the layout xml
<?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:background="#color/darkGray"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.intellidev.fuzionvapor.HomeDetails"
tools:showIn="#layout/activity_home_details">
<ImageView
android:id="#+id/homeDetailsActivityImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/homeDetailsActivityTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/homeDetailsActivityImage"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/homeDetailsActivityPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/homeDetailsActivityImage"
android:textColor="#color/fuzionRed"
android:textSize="20sp"
android:textStyle="bold" />
<View
android:id="#+id/homeDetailsActivityRuler"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_below="#+id/homeDetailsActivityTitle"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:background="#color/white" />
<TextView
android:id="#+id/homeDetailsActivityDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/homeDetailsActivityRuler"
android:textColor="#color/white"
android:textSize="15sp" />
<LinearLayout
android:id="#+id/homeDetailsFooter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/homeDetailsActivityButton"
android:layout_centerHorizontal="true"
android:orientation="horizontal">
<fr.ganfra.materialspinner.MaterialSpinner
android:id="#+id/homeDetailsActivitySizeSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="1dp"
android:layout_weight="1"
app:ms_arrowColor="#color/fuzionRed"
app:ms_arrowSize="16dp"
app:ms_baseColor="#color/fuzionRed"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelColor="#color/fuzionRed"
app:ms_floatingLabelText="#string/sizeFloatingLabel"
app:ms_highlightColor="#color/fuzionRed"
app:ms_hintColor="#color/fuzionRed"
app:ms_hint="Size"
app:ms_multiline="false"
app:ms_thickness="1dp" />
<fr.ganfra.materialspinner.MaterialSpinner
android:id="#+id/homeDetailsActivityNicotineSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_weight="1"
app:ms_arrowColor="#color/fuzionRed"
app:ms_arrowSize="16dp"
app:ms_baseColor="#color/fuzionRed"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelColor="#color/fuzionRed"
app:ms_floatingLabelText="#string/nicotineFloatingLabel"
app:ms_highlightColor="#color/fuzionRed"
app:ms_hintColor="#color/fuzionRed"
app:ms_multiline="false"
app:ms_hint="Nicotine"
app:ms_thickness="1dp" />
</LinearLayout>
<Button
android:id="#+id/homeDetailsActivityButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#color/fuzionRed"
android:text="Add To Cart"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="25sp"
android:textStyle="bold" />
</RelativeLayout>
change
<ImageView
android:id="#+id/homeDetailsActivityImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:scaleType="fitCenter" />
to
<ImageView
android:id="#+id/homeDetailsActivityImage"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:adjustViewBounds="true"
android:scaleType="fitStart" />

How do I make the Android Cardview appear like Android now? (align bottom)

I am trying to make an android view where there is an image at the top, with text at the bottom, similar to the Android now cards.
I'm having issues taking the "command" buttons and aligning them below all the text, ideally separated by a HR line.
Here is the code I've been working with, and unable to make it look like the android Now cards -
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<LinearLayout
android:id="#+id/card_view_inner_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">
<TextView
android:textColor="#0000FF"
android:id="#+id/personaTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/image_view"
android:layout_toStartOf="#+id/image_view"
android:textAppearance="?android:textAppearanceLarge"
android:text="Some text here" />
<TextView
android:textColor="#00FFFF"
android:id="#+id/personaTextView2"
android:layout_below="#+id/personaTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/image_view"
android:layout_toStartOf="#+id/image_view"
android:text="Some text here" />
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#android:drawable/btn_radio" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/cardAction1"
android:textColor="#00FFFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Action 1"
android:layout_toLeftOf="#+id/cardAction2"
style="?android:attr/borderlessButtonStyle"
/>
<Button
android:id="#+id/cardAction2"
android:textColor="#00FFFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Action 2"
style="?android:attr/borderlessButtonStyle"
/>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
The problem I'm (now) having is that I can't get the action buttons to work
You have to add a flat button like this in your view (see this link):
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your text"
style="?android:attr/borderlessButtonStyle"
/>
Then, of course, is up to you to design your View.
Something like this?
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<LinearLayout
android:id="#+id/card_view_inner_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">
<TextView
android:id="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/image_view"
android:layout_toStartOf="#+id/image_view"
android:textAppearance="?android:textAppearanceLarge"
android:text="Some text here" />
<TextView
android:id="#+id/text_view2"
android:layout_below="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/image_view"
android:layout_toStartOf="#+id/image_view"
android:text="Some text here" />
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#android:drawable/btn_radio" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Some random text" />
</LinearLayout>
</android.support.v7.widget.CardView>

Android RelativeLayout align element on another elements border

Im trying to make a text view to align to the left border of another imageview in a RelativeLayout, but I'm having trouble and I cannot achieve this. Can anyone tell me how can I achieve this?
Here is my current XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/main_item_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/blackalha"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="100" >
<TextView
android:id="#+id/main_item_cont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/main_item_nmb"
android:paddingLeft="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/main_item_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/app_purple"
android:src="#drawable/bacal" />
<TextView
android:id="#+id/main_item_nmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/main_item_ic"
android:background="#drawable/saric"
android:gravity="center"
android:textColor="#333333" />
</RelativeLayout>
<TextView
android:id="#+id/main_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/main_item_bg"
android:layout_margin="5dp"
android:maxWidth="200dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
</RelativeLayout>
Try this
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/main_item_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dip"
android:gravity="center"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/main_item_cont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:paddingLeft="5dp"
android:text="dsgffdufsdfdfsdfdsfsdfsdfdsfdf"
android:inputType="textMultiLine"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/main_item_ic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dip"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/main_item_cont"
android:background="#android:color/black"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/main_item_nmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/main_item_cont"
android:layout_toRightOf="#+id/main_item_cont"
android:background="#android:color/white"
android:text="10"
android:textColor="#android:color/white" />
</RelativeLayout>
<TextView
android:id="#+id/main_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/main_item_bg"
android:layout_margin="5dp"
android:maxWidth="200dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
As #Salauyou mentioned, try with android:layout_alignLeft because it "Makes the left edge of this view match the left edge of the given anchor view ID"
and android:layout_toLeftOf means "Positions the right edge of this view to the left of the given anchor view ID."
Now, this is what I achieved:
I used this picture in drawable-mdpi (as the badge) - note the trick of the dual background:
and the standard launcher icon, since I didn't have a wine glass icon handy.
This is my layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_margin="0dp"
android:padding="0dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:padding="4dp"
>
<TextView
android:id="#+id/txtIcon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:padding="4dp"
android:background="#6b2339"
android:drawableRight="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/txtBadge"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_toLeftOf="#id/txtIcon"
android:gravity="center"
android:padding="4dp"
android:background="#drawable/wines_crossing_badge"
android:text="8"
android:textColor="#312c23"
android:textSize="16sp"
/>
<TextView
android:id="#+id/txtDesc"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/txtBadge"
android:background="#312c23"
android:gravity="left|center_vertical"
android:padding="4dp"
android:text="Available Androids in stock for rental"
android:textColor="#fff"
android:textSize="16sp"
/>
</RelativeLayout>
</RelativeLayout>

Categories

Resources