how we can take print of XML layout - android

I want to take print of XML layout but I Have no idea to print the Xml Layout I am trying from many days but I does not found any help because my data is retrieve from sqlite databse in listview I have no mutch knowledge so requested you give som ideas [enter image description here]
[1]
[1]: https://i.stack.imgur.com/jn7hi.jpg
//XML Code is given below
<?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:id="#+id/printbil"
android:orientation="vertical"
tools:ignore="MissingClass">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5"
android:layout_marginTop="20dp"
android:id="#+id/ltt">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sr.No"
android:layout_marginStart="5dp"
android:layout_weight="0.5"
android:gravity="start"
android:textColor="#color/black"
android:layout_marginLeft="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:gravity="start"
android:layout_weight="2"
android:textColor="#color/black"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="start"
android:text="Quantity"
android:textColor="#color/black"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="start"
android:text="Price"
android:textColor="#color/black"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ltt"
>
<!-- <ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/scrol">-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/lvid">
<ListView
android:id="#+id/itemsalelist"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<!-- </ScrollView>-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tp"
android:layout_marginTop="10dp"
android:layout_below="#id/lvid"
android:layout_alignParentEnd="true"
android:text="0.0"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:textColor="#color/black"
android:layout_alignParentRight="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tptv"
android:layout_marginTop="10dp"
android:layout_below="#id/lvid"
android:layout_toStartOf="#id/tp"
android:text="Total price"
android:textColor="#color/black"
android:layout_toLeftOf="#id/tp" />
<Button
android:id="#+id/btnPrint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#id/lvid"
android:layout_marginTop="30dp"
android:text="Print Bill" />
</RelativeLayout>
</RelativeLayout>


Check this out:
https://github.com/intsab/LayoutToImage
You have to convert your layout to a bitmap > Then print the output bitmap.

Related

Scroll View- Not able to scroll to down

I,m designing one layout file which contain education information , earlier information was not fitting into screen so I have added Scroll view. I'm able to scroll down the screen but not completely. I tried putt scrollView top of all the relative layout, but it not scrolling completely, i tried enter link description here but not able to resolve my problem.
need help?
fragment_education.xml
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/slide_title"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="#dimen/slide_title"
android:background="#color/Blue"
android:paddingLeft="#dimen/slide_title">
<RelativeLayout
android:id="#+id/be_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/be_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2016"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:id="#+id/college"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/be_year"
android:text="SKIT,Banglore"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/college"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/be_year"
android:text="#string/course_detail"
android:textColor="#color/lighter"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/th12_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/be_details"
android:layout_marginTop="#dimen/slide_title">
<TextView
android:id="#+id/th12_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2012"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:id="#+id/th12_college"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/th12_year"
android:text="SLIC,Rampur"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/th12_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/th12_college"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#id/th12_year"
android:text="#string/th12_details"
android:textColor="#color/lighter"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/school_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/th12_detail"
android:layout_marginTop="#dimen/slide_title">
<TextView
android:id="#+id/scl_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2010"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:id="#+id/scl_school"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/scl_year"
android:text="SRHS,Tanda"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/scl_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/scl_school"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#id/scl_year"
android:text="#string/school_details"
android:textColor="#color/lighter"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
where am doing wrong?

Remove android:layout_marginBottom="#dimen/slide_title" and android:layout_marginTop="#dimen/slide_title"from first RelativeLayout after ScrollView and it will work

The only things to be done for the solution just add a nested scroll view within the scrollview here is the working code :
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/slide_title"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="#dimen/slide_title"
android:background="#color/Blue"
android:paddingLeft="#dimen/slide_title">
<RelativeLayout
android:id="#+id/be_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/be_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2016"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:id="#+id/college"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/be_year"
android:text="SKIT,Banglore"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/college"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/be_year"
android:text="#string/course_detail"
android:textColor="#color/lighter"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/th12_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/be_details"
android:layout_marginTop="#dimen/slide_title">
<TextView
android:id="#+id/th12_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2012"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:id="#+id/th12_college"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/th12_year"
android:text="SLIC,Rampur"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/th12_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/th12_college"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#id/th12_year"
android:text="#string/th12_details"
android:textColor="#color/lighter"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/school_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/th12_detail"
android:layout_marginTop="#dimen/slide_title">
<TextView
android:id="#+id/scl_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2010"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:id="#+id/scl_school"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#+id/scl_year"
android:text="SRHS,Tanda"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/scl_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/scl_school"
android:layout_marginLeft="#dimen/slide_title"
android:layout_toRightOf="#id/scl_year"
android:text="#string/school_details"
android:textColor="#color/lighter"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</ScrollView>

Layout is reversed?

Please view the image below:
The first image is the layout I did and it show normally on my device and another test devices. The second image is the layout showed on my friend device, it is reversed. I do not know why, and it just happened on few devices.
This is my layout code on xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:auto="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.ComposeSmsActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_action" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/padding_5">
<com.hnib.smslater.views.FlowLayout
android:id="#+id/layout_name_recipient"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:fontFamily="sans-serif-light"
android:orientation="horizontal">
</com.hnib.smslater.views.FlowLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/padding_10">
<com.hnib.smslater.views.ClearableAutoContactCompleteTextView
android:id="#+id/et_recipient"
android:layout_width="#dimen/width_et_contact"
android:layout_height="#dimen/height_et_default"
android:layout_centerVertical="true"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/drawable_radius_gray_gray"
android:fontFamily="sans-serif-light"
android:hint="#string/to_"
android:imeOptions="actionDone"
android:padding="#dimen/padding_5"
android:textColorHint="#color/gray"
android:textSize="18sp"
android:textStyle="bold"
auto:displayPhotoIfAvailable="false"
auto:styleOfTypedLetters="bold"
auto:typeOfData="phone"
auto:typedLettersHaveDifferentStyle="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_5"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:fontFamily="sans-serif-light"
android:text="#string/message"
android:textColor="#color/gray"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_message_length"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:fontFamily="sans-serif-light"
android:text="160/1" />
</RelativeLayout>
<com.hnib.smslater.views.ActionEditText
android:id="#+id/et_text_content"
android:layout_width="match_parent"
android:layout_height="#dimen/height_et_big"
android:layout_marginLeft="#dimen/margin_5"
android:background="#drawable/drawable_radius_gray_gray"
android:ems="10"
android:fontFamily="sans-serif-light"
android:gravity="top"
android:inputType="textMultiLine"
android:maxLines="10"
android:padding="#dimen/padding_5"
android:scrollbars="vertical" />
<RelativeLayout
android:id="#+id/layout_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="#dimen/padding_10"
android:showDividers="middle">
<TextView
android:id="#+id/tv_title_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#drawable/drawable_radius_acent_gray"
android:fontFamily="sans-serif-light"
android:padding="#dimen/padding_5"
android:text="#string/time"
android:textAllCaps="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/tv_title_time"
android:divider="?android:attr/dividerVertical"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="#dimen/padding_10"
android:showDividers="middle">
<TextView
android:id="#+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_textview"
android:fontFamily="sans-serif-light"
android:gravity="center_horizontal"
android:text="12/06/2016"
android:textColor="#color/gray"
android:textSize="27sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_textview"
android:fontFamily="sans-serif-light"
android:gravity="center_horizontal"
android:text="09:10"
android:textColor="#color/gray"
android:textSize="27sp"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="#dimen/padding_10">
<TextView
android:id="#+id/tv_title_repeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:background="#drawable/drawable_radius_acent_gray"
android:fontFamily="sans-serif-light"
android:padding="#dimen/padding_5"
android:text="#string/repeat"
android:textAllCaps="true" />
<Spinner
android:id="#+id/spinner_repeat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></Spinner>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_choose_sim"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="#dimen/padding_10">
<TextView
android:id="#+id/title_choose_sim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:background="#drawable/drawable_radius_acent_gray"
android:fontFamily="sans-serif-light"
android:padding="#dimen/padding_5"
android:text="#string/choose_sim"
android:textAllCaps="true" />
<Spinner
android:id="#+id/spinner_choose_sim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></Spinner>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_confirm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="#dimen/padding_10">
<TextView
android:id="#+id/tv_title_confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:background="#drawable/drawable_radius_acent_gray"
android:fontFamily="sans-serif-light"
android:padding="#dimen/padding_5"
android:text="#string/ask_before_send"
android:textAllCaps="true" />
<CheckBox
android:id="#+id/checkbox_confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/tv_title_confirm" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Please have a help on this issue. Thanks.

The language on your friend's phone is probably different from yours, leading to the app giving a read from right to left, rather than your left to right. Does your friend have his phone's settings on language set to Hebrew or Arabic?
Edit: please take note of the answers below mine, those are the viable options for your friend's phone, besides for changing the language of course.

You should remove android:supportsRtl="true"
from the <application> element in your AndroidManifest.xml file.

You should ADD : android:supportRTL="false"
In the manifest

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>

GridLayout - Aligning Element

I am trying to reduce the space between 2 columns, have tried using negative margins, but did not work. Is there a way to bring the 2 elements in the image closer ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:layout_gravity="center"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:background="#color/orange"
android:textSize="12sp"
android:columnCount="8">
<ImageButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_gravity="left"
android:src="#drawable/settings" />
<TextView
android:id="#+id/currentCityName"
android:layout_column="2"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City name"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<ImageButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="7"
android:layout_columnSpan="1"
android:layout_gravity="right"
android:src="#drawable/reload" />
<ImageView
android:id="#+id/currentWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="8"
android:layout_rowSpan="3"
android:layout_gravity="center_horizontal"
android:src="#drawable/cloud" />
<ImageView
android:id="#+id/humidityIcon"
android:layout_width="20dp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginRight="0dp"
android:layout_gravity="left"
android:background="#000000"
android:src="#drawable/humidity" />
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"
android:layout_gravity="left"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/temperature"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:textSize="49sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windSpeedIcon"
android:layout_width="30dp"
android:layout_marginRight="1dp"
android:paddingRight="1dp"
android:layout_gravity="right"
android:src="#drawable/wind" />
<TextView
android:id="#+id/windSpeed"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<!-- android:layout_width="40dp" -->
<TextView
android:id="#+id/precipitationIcon"
android:textSize="28sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/precipitation"
android:layout_column="0"
android:textSize="13sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/windDirection16Point"
android:textSize="13sp"
android:layout_width="80dp"
android:layout_columnSpan="2"
/>
<TextView
android:id="#+id/weatherDescription"
android:layout_gravity="center_horizontal"
android:layout_row="7"
android:layout_columnSpan="8"/>
<TextView
android:id="#+id/section_label"
android:layout_margin="5dp"
android:layout_columnSpan="8" />
<EditText
android:minLines="4"
android:maxLines="4"
android:id="#+id/edit"
android:layout_columnSpan="8"/>

I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.

You are tackling the wrong problem – you are asking how to reduce the space between columns in a grid layout, but maybe you should’t have used such a layout in the first place!
What you should have been using for your specific layout, is a combination of relative positioning and compound drawables (here, with android:drawableStart).
<?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="80dp"
android:background="#d89018"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="25 ℃"
android:textColor="#fff"
android:textSize="49sp"
/>
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/humidity"
android:gravity="center_vertical"
android:text="83 %"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windSpeed"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/wind"
android:gravity="center_vertical"
android:text="19 km/h"
android:textColor="#fff"
/>
<TextView
android:id="#+id/precipitation"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/precipitation"
android:gravity="center_vertical"
android:text="0.1 mm"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windDirection16Point"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#id/windSpeed"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/windDirection"
android:gravity="center_vertical"
android:text="NNW"
android:textColor="#fff"
/>
</RelativeLayout>
Not only this layout is simpler, you also let Android take care of all the spacing for you. To change the spacing between the compound drawable and the text, use android:drawablePadding in the layout’s code above; in Java code, that would be TextView.setCompoundDrawablePadding).
Icons used for the sample: water, windsock, rainy-weather and wind-rose.

I think what's happening is that your Views are being stretched because they are trying to match the width of another view in their columns.
Try decreasing the columnSpan of your Views or separate your layout into two separate GridLayouts.
Or, consider using a different layout altogether. I would recommend RelativeLayout here instead of GridLayout, but I don't know how this fits into a larger window.

try this:
<?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="100dp">
<LinearLayout
android:id="#+id/col1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col1_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83%"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col1_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.0mm"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/col2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.0"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25'"
android:textSize="50dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col3_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19Km"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NNW"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

I think you should change usedefaultMargins to false and give your own margins to the elements.
android:useDefaultMargins="false";

Categories

Resources