What's the proper way to resize DatePicker and TimePicker on Android without leaving much margins? - android-layout

This is a part of activity (RelativeLayout):
<TextView
android:layout_marginTop="30dp"
android:layout_below="#id/tvMerchantAddress"
android:id="#+id/tvWhen"
android:textSize="12sp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text = "When you to come?" />
<DatePicker
android:layout_centerHorizontal="true"
android:id="#+id/datePicker"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleX="0.75"
android:scaleY="0.75"
android:layout_marginLeft="20dp"
android:layout_marginTop="-30dp"
android:layout_marginRight="-50dp"
android:layout_marginBottom="-30dp"
android:calendarViewShown="false"
android:layout_below="#id/tvWhen"
android:datePickerMode="spinner"
android:spinnersShown="true" />
<TimePicker
android:id="#+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/datePicker"
android:layout_centerHorizontal="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="-30dp"
android:layout_marginRight="-50dp"
android:layout_marginBottom="-30dp"
android:scaleX="0.75"
android:scaleY="0.75"
android:timePickerMode="spinner" />
What I want to have is a DatePicker and a TimePicker on the center of the parent, which sizes are smalles then their default ones.
And this is the result:
Yes, both DatePicker and TimePicker are smaller, but leaves much unused margins. And also overlaps each other. Is there any way to do this?

Related

Cannot get a margin between cards in Recycler

I have the following content for my recycler card element
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cardview_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginHorizontal="4dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="6dp"
>
<ImageView
android:id="#+id/imageview_category_icon"
android:layout_width="30dp"
android:layout_height="45dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/ic_own_groceries" />
<TextView
android:id="#+id/textview_item_name"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_plus"
android:layout_toEndOf="#+id/imageview_category_icon"
android:gravity="center_vertical"
android:text="Item Name"
android:textColor="#color/grayDark"
android:textSize="#dimen/small_text_size"
android:textStyle="normal" />
<Button
android:id="#+id/button_plus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_minus"
android:background="#color/greenDark"
android:text="+"
android:textColor="#color/white" />
<Button
android:id="#+id/button_minus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_status"
android:layout_alignParentTop="true"
android:background="#color/redDark"
android:text="-"
android:textColor="#color/white" />
<Button
android:id="#+id/button_status"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_edit"
android:background="#color/grayMedium"
android:gravity="center"
android:text="3"
android:textColor="#color/white"
android:textSize="#dimen/normal_text_size" />
<ImageView
android:id="#+id/button_edit"
android:layout_width="20dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:onClick="goToEditor"
app:srcCompat="#drawable/ic_baseline_edit_24" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
Unfortunately, android:layout_marginTop="4dp" in the root element does not seem to have an effect on the margin between consecutive cards in the app display. In fact, there is no margin at all, no matter to what value I change the "4dp". On the other hand, android:layout_marginHorizontal="4dp" works fine.
Also, app:cardCornerRadius="4dp" has no effect either, though when visualizing in Android Studio only this layout file, the rounded corners do appear.
As suggested by answers to a similar question, I did use "wrap_content" for height wherever possible. To no avail.
What's wrong?
This answer was posted by the author of the question.
The problem persists, but I found a hack by inserting above RelativeLayout an empty TextView with the same height as the desired top margin.

I want to make a TextView height "match_parent" whose parent height is "wrap_content" in XML (Android Studio)

Inside the layout for my activity i have two TextView inside a RelativeLayout.
The one with id "descriptionfromDB" takes the text from a database while the other one will only show the text Description.
What I want is that the second one matches the height of the parent when the text of the one that gets modified become longer.
I tried to do it with android:layout_height="match_parent" for the first TextView (since parent height grows when the other TextView's text become longer) but with no results.
Here's an example of how it looks at the moment:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/description"
android:layout_width="100dp"
android:layout_height="match_parent"
android:textSize="18dp"
android:text="Description"
android:background="#drawable/text"
android:textColor="#color/blue_fontcolor"
android:padding="1dp"
android:textStyle="bold"
/>
<TextView
android:id="#+id/descriptionfromDB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16dp"
android:layout_toRightOf="#+id/description"
android:text=""
android:background="#drawable/text"
android:textColor="#color/blue_fontcolor"
android:padding="3dp"
/>
</RelativeLayout>
You can achieve the behavior you want using horizontal LinearLayout :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/descriptionfromDB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp" />
</LinearLayout>
Using weight would be a better idea since there are many different screen sizes. Below attributes determine that the first TextView should take 30% of the parent width and second one 70% which is the remaining width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/descriptionfromDB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:textSize="16sp" />
</LinearLayout>
If you are going to add more views and nest this LinearLayout into another ViewGroup, since your layout will no longer be flat and also horizontal LinearLayout has double layout taxation, I recommend ConstraintLayout. Same behavior using ConstraintLayout :
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Description"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/descriptionfromDB"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/description"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

EditText wont display at the center of the TextInputLayout

No matter what I do my EditText appears like this :
My XML :
<android.support.design.widget.TextInputLayout
android:id="#+id/text_input_layout_search"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:gravity="top"
android:layout_height="wrap_content">
<EditText
android:background="#null"
android:textColor="#color/black"
android:layout_centerInParent="true"
android:gravity="top"
android:layout_gravity="top"
android:id="#+id/SearchText"
android:textColorLink="#color/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/normatext"
android:inputType="text"/>
</android.support.design.widget.TextInputLayout>
I changed all possible values for gravity and layout_gravity in every possible variation! Any ideas ?
EDIT :
Full Layout :
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="0dp"
android:paddingTop="6dp"
android:paddingBottom="5dp"
android:layout_margin="3dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_height="45dp">
<Button
android:layout_width="43dp"
android:layout_height="wrap_content"
android:background="#drawable/ham"
android:id="#+id/hambtn"
android:textColorHint="#color/black"
android:layout_weight="0"
/>
<android.support.design.widget.TextInputLayout
android:id="#+id/text_input_layout_search"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:gravity="top"
android:layout_height="wrap_content">
<EditText
android:background="#null"
android:textColor="#color/black"
android:layout_centerInParent="true"
android:gravity="top"
android:layout_gravity="top"
android:id="#+id/SearchText"
android:textColorLink="#color/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/normatext"
android:inputType="text"/>
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="55dp"
android:layout_weight="0"
android:layout_height="match_parent"
android:background="#drawable/my_button_bg"
android:text="news"
android:id="#+id/newsbtn"
android:layout_marginLeft="8dp"
android:layout_marginRight="6dp"
android:paddingBottom="5dp"
/>
</LinearLayout>
I think the problem is maybe in your topmost LinearLayout view.
Try removing those lines:
android:layout_marginTop="0dp"
android:paddingTop="6dp"
android:paddingBottom="5dp"
android:layout_margin="3dp"
and add those lines instead to make sure there are no padding and margin at all:
android:padding="0dp"
android:layout_margin="0dp"
If it did solve the problem, you can go ahead and read more about padding and margin here.
If not, I would suspect that your TextInputLayout gets confused because of the inner EditText asking it to be both top and center. remove the "center" part (e.g. remove this - android:layout_centerInParent="true" from your EditText) and check if it solves your issue :)
Never had this problem before but i would make sure explicitly that there is no padding in the parent and no margin in the child. i.e.:
<android.support.design.widget.TextInputLayout
...
android:padding="0dp"
>
<EditText
...
android:layout_margin="0dp"
/>
</android.support.design.widget.TextInputLayout>
Can You remove the background tag of EditText and reply me if it works or not ?
Also provide your full layout file for exact solution.

Android: Fully Justify Two Buttons

I have a linear layout, with layout parameters of fill parent, and wrap content. The orientation is horizontal.
Inside the linear layout I have two buttons. They appear next to each other on the left hand side.
I would like the two buttons to "fully justify". In other words I want each button to take half the width of the linear layout.
Can anybody help?
use weights like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="Button1"
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:text="Button2"
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
define a weight sum for the parent set each children to half
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:text="Button1"
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:text="Button2"
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>

MarginTop between radio buttons for Different Screen Densities in Android

Im trying to make a layout for a survey question, it works fine on my device but the margin between the radio button text decreases on a better screen resolution device.
I have tried creating different DIMENS it works but I'm not sure how to scale the margin based on different sizes.
Kindly suggests what screen size values-swXXX folder I need to create and what should be the scaling factor of the DIMEN I have defined.
Thanks
enter code here
<?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="match_parent" >
<TextView
android:id="#+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="How often do you use it?"
android:textSize="15sp" />
<RadioGroup
android:id="#+id/rg_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_1"
android:layout_below="#+id/tv_1" >
<RadioButton
android:id="#+id/rb_once"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="15dp"
android:button="#drawable/radio_btn"
android:checked="true"
android:text="Once" />
<RadioButton
android:id="#+id/rb_daily"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_once"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Daily" />
<RadioButton
android:id="#+id/rb_weekly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_daily"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Weekly" />
<RadioButton
android:id="#+id/rb_monthly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_weekly"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Monthly" />
</RadioGroup>
<ImageView
android:id="#+id/fb_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:src="#drawable/facebook_share" />
<ImageView
android:id="#+id/history"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/fb_share"
android:layout_marginLeft="10dp"
android:src="#drawable/history" />
<ImageView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/fb_share"
android:layout_marginRight="10dp"
android:src="#drawable/info" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/fb_share"
android:layout_below="#+id/rg_1"
android:layout_centerHorizontal="true" >
<Button
android:id="#+id/send"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#drawable/red_btn"
android:fontFamily="Roboto-Italic"
android:text="SAVE"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
You need to create values-swXXXX folders wrt devices you are targetting for. i.e If you are targetting for a tablet with minimum width of 600, then you need to create values-sw600 and so on.
In layout file, change declaration of RadioButton as below:
<RadioButton
android:id="#+id/rb_once"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/left_margin"
android:layout_marginTop="#dimen/top_margin"
android:button="#drawable/radio_btn"
android:checked="true"
android:text="Once" />
And maintain dimen.xml specific to each targeted dimension under values-swXXXX with dimension keys having same name but values corresponding to respective dimension. Ex:
values/
<dimen name="left_margin">5dp</dimen>
<dimen name="left_margin">10dp</dimen>
values-sw600/
<dimen name="left_margin">20dp</dimen>
<dimen name="left_margin">40dp</dimen>

Resources