Android TimePicker - hour line is not align to center - android

I used Android TimePicker in my custom dialog.
The hours line is not align to center.
As you see the xml is look ok for center controller.
Is it possible at all to change the timepicker properties from custom dialog and not from FragmentDialog? How should i center it?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:minHeight="50dp"
android:orientation="horizontal">
<TextView
android:id="#+id/titleDateAndTime"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Today"/>
<ImageView
android:id="#+id/changeDateAndTimeState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:src="#drawable/arrow"/>
</LinearLayout>
<TimePicker
android:id="#+id/time_picker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<Button
android:id="#+id/date_time_set"
style="#style/Button.Buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ripple_or_holo"
android:text="#string/call_reminder_set_button"/>
Custom dialog screenshot

The option to center each of the element inside the TimePicker is not supported.
My last resort was to make custom view for the time picker with my layout.

https://developer.android.com/reference/android/widget/TimePicker.html:
If you look here you will not find such methods or parameters.
Futher more, If you find a bug to setup this value, I do not, based on my experiance, really recommend to use something exapt default behavour. Because of there are a lot of different implementations for TimePicker.
Use the default behaviour or do nothing.
I only solutions: is to write your own timepicker using numberpicker, etc.

Related

Is there a better way to align the text in different buttons in Android?

It is my firs time that I try to design a good UI instead of debugging apps, so I am new to this type of stuff.
I have three buttons under each other and the text should be aligned correctly. So that the "F" of Favorites starts at the same horizontal point as the "E" of Equalizer.
The way I did it, is not satisfying. I worked with paddingEnd and just tried out until it looked almost equal on the horizontal axis.
One other idea was to make the gravity center_vertical|left and instead use drawablePadding. This did not work because the width of the buttons is defined as match_parent. But also when I change the buttons to android:layout_width="wrap_content" and remove android:paddingStart and android:paddingEnd for testing, it does not work.
I got these info out of android:drawableLeft margin and/or padding
There should be a way to make it "easy" to fulfill the design I require. Has someone an idea what I am making wrong and has a solution for me?
The code of the xml layout file and a screenshot of the result are attached.
If something else is required to solve this question, then just ask me straight away.
Screenshot of the buttons
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/menu"
android:layout_width="300dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/border"
android:paddingEnd="0.3dip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/favButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:paddingEnd="15dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_bxs_heart"
android:text="#string/favorites"
android:textColor="#000000"
android:textSize="16sp"/>
<Button
android:id="#+id/eqzButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_equalizer"
android:text="#string/equalizer"
android:textColor="#000000"
android:textSize="16sp"/>
<Button
android:id="#+id/settingsButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:paddingEnd="27dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_settings"
android:text="#string/settings"
android:textColor="#000000"
android:textSize="16sp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Android DatePicker invisible header padding

I have an issue where the Android DatePicker within my layout has this huge top margin/padding/header, which I cannot find a way to remove.
I have tried different styling, margins, paddings, parent layouts - anything I could think of. See the white section in the image below. Please assist!
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gray_color"
android:padding="8dp"
android:orientation="vertical">
<TextView
android:id="#+id/txtV_SelectAppointmentDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
app:MvxBind="Text ScheduleTimeSlotText;" />
<DatePicker
android:id="#+id/scheduling_date_datePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:datePickerMode="calendar"
android:background="#color/gray_color"/>

How to add to an XML programatically by adding another View?

I am making an app similar in design to a Reddit/YouTube/Yahoo News app, it uses the API's to gather information on recent posts.
When you start the app, it displays all the recent posts exactly like this:
http://wpuploads.appadvice.com/wp-content/uploads/2014/07/screen1136x1136-68-576x1024.jpeg
The goal is to make all posts conform to a match_parent width and wrap_content height (max 300 dp height) and - just like the picture linked above - make all the posts conform to one look; Title on the top, body/picture in the middle and number of comments underneath.
Let's say my common View layout is something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#ffffff"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lesson 1"
android:textAllCaps="false"
android:textColor="#8c8c8c"
android:textSize="40dp"
android:gravity="center_horizontal"/>
<ImageButton
android:id="#+id/imageButton1"
android:background="#drawable/lesson1"
android:layout_width="250dp"
android:layout_height="150dp"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="10 Comments"
android:textColor="#000000"/>
</LinearLayout>
I want to replicate this Layout style (Text, Image, Text) every time there is a new post and add it to the existing XML. How would I do this?
You would use a LayoutInflater to inflate the xml file into a View. Then you would add that view to the layout wherever you want it.

how to set single background for two text view

I have a case in which I have to set the text in a design of calendar. on the top section of this calendar I must show the Month and in the middle section I should show the date.
but I have no idea How can I show two different things in one design . here is the design. Please help.
You will have to do something like this.
<LinearLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#mipmap/cal"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/monthTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="27dp"
android:text="Month"/>
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Date"/>
</LinearLayout>
Here #mipmap/cal is the background image of the calendar that you posted above in the question. Also, you might have to adjust the margins as per your needs.

TextView and EditText overflow

I've got a need to display and TextView (label), EditText(Input) and TextView(suffix) in a line.
The issue I have is - if the label TextView is too long it The EditText and Suffix TextView and not drawn.
Here's my code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_weight="0"
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.." />
<TextView
android:padding="5dp"
android:layout_weight="0"
android:text="Suffix.."
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
So what I want is - even if the label is over 2-3 lines, for an EditText to appear followed by another TextView.
Any pointers would be appreciated.
Thanks!
Edit:
I've added some 'diagrams' so you can understand what I want to do a bit better.
The label to the EditText can be arbitrary length(2/3 lines), so whenever the label finishes I want an EditText to start (which is followed by another TextView showing a suffix..)
..
![This shows a 2 line label and TextView..]
Edit 2: Thanks for the responses guys!! I think #questioner has really understood what I want to do i.e. I want your 3 views to move to other lines so that they behave like they were one view - and as he has suggested i'll have to find a library for this!
How about this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="100dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"/>
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.."/>
<TextView
android:padding="5dp"
android:text="Suffix.."
android:layout_gravity="center_vertical"
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="100dp"
android:layout_height="wrap_content"/>
</LinearLayout>
If you want your 3 views to move to other lines so that they behave like they were one view - you should use external library for that.
Why not use a RelativeLayout instead of LinearLayout and then use android:layout_below="#+id/..." or android:layout_above="#+id/..." also android:layout_toRightOf="#+id/..." or android:layout_toLeftOf="#+id/..."
Set
android:layout_weight="1"
for each view so that they all occupy the same amount of horizontal space.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1">
Try this or please expand a little more.

Categories

Resources