Develop Reference

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, how to align text at a specific point over an image?

I am learning android programming and setting myself a task to get to grips with layouts. I am trying to create a virtual "Magic 8 Ball".
My aim is to have some random text appear in the white circle where the 8 would normally appear.
How do go about aligning the text so that on different devices the text always appears in the same relative position to the black ball, so is always within the white circle?
Here is an example of what I am trying to do
Here is my code so far
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
android:layout_gravity="center_vertical|center_horizontal"
tools:context="uk.co.simoncarr.magic8ball.MainActivity">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="49dp"
android:layout_centerHorizontal="true"
android:text="#string/title"
android:textSize="36sp"
tools:layout_editor_absoluteX="107dp"
tools:layout_editor_absoluteY="10dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img8Ball"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center_vertical|center_horizontal"
app:srcCompat="#drawable/magic8ball"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/txtMessage"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="111dp"
android:layout_marginRight="111dp"
android:layout_marginTop="296dp"
android:text="The Anser is Yes"
android:textAlignment="center"
android:textSize="18sp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="447dp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>

Before answering the question I should comment on the fact that the elements inside you ConstraintLayout are not constrained in any way so when you run the app they will not keep the positions you have given them in the layout editor. You should fix this before doing anything else.
One approach you could look at could be to have 2 circle drawables, one with a black background and one with a white one and place one on top of the other. This way you could use the relatively new "Circular Positioning" feature in ConstraintLayout as outlined in this post. This will give you a lot of flexibility and power over choosing the positioning of the white circle in relation to the black.

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.

Android TimePicker - hour line is not align to center

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.

Android how do I set a percentage padding/margin so EditText has 10% margin on either side?

Does android support % or is there a way to approximate. I have two very different screen sizes and I but percentage-wise I want the EditBox in the activity to have same margin for both screen size as a proportion of screen size. How can this be done.

It doesn't really support setting values by percent(except for some of the xml Animation files seem to) If you are dead set on using a percentage the best way I can think of is from java call getWidth and getHeight then multiply those by your decimal and set the result with setMargin(), or setPadding().

This is possible in XML by wrapping your EditText inside of a LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="10"
android:gravity="center"
>
<EditText
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="8"
/>
</LinearLayout>

Edit: The Layouts from this answer are now deprecated. Use the solution that Eugene Brusov proposed. Also, thank you chancyWu for the comment.
There is now a better way that came out with support library version 23.0.0 (about time, right?). You can now use PercentFrameLayout or PercentRelativeLayout.
If you wanted the EditText to be 80% of the screen's width with a 10% margin on either side, the code would look like this:
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
app:layout_marginStartPercent="10%"
app:layout_marginEndPercent="10%"/>
</android.support.percent.PercentRelativeLayout>
You can also take a look at PercentLayoutHelper.PercentLayoutParams

It's possible with Guideline introduced in ConstraintLayout.
For example you can place your EditText top at 25% of screen height and left and right at 20% of screen width:
Here's the layout source:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
app:layout_constraintTop_toTopOf="#+id/top_guideline" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/top_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>

What I did in this situation was put the view inside a horizontal LinearLayout, add an empty view (before or after your main view or layout depending on whether you want the margin to be on the left or on the right) turn both views' width to 0dp and then give the empty view a value of "1" in weight while I gave the View/Layout that needed margin a value of "4" in weight.
This resulted in a 1/5 (20%) left margin.
You can apply this to Top and Bottom margin/padding as well.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="4"
>
<!--Your content goes here -->
</LinearLayout>
</LinearLayout>