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>

How to put ProgressBar inside of EditText and keep the bar right in it?

I want to have a ProgressBar inside of an EditText, but I want it to be right inside it and, preferably, in the center of the EditText. All the solutions I've come across so far do not really allow the bar to be inside of the borders. Also, I'm looking for as clean solution as possible, not just putting over 9000 constraints in ConstraintLayout.
It should look like this (picture is taken from android progressbar inside edittext):
But the actual result is either this:
or this (if I use smaller style for the bar):
My code is:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center_vertical"/>
</FrameLayout>
Of course, I could just put some hardcoded values for height, but it's definitely a bad fix of the problem. Also, if I change the style of the bar to the smaller one, it's not a fix, since I want to have some control over it (and it doesn't look perfect, either). I'm planning to add something like error and success icons also, so the solution that fulfills this requirement is extremely welcome! So, if you have any clue about how to put it properly inside of the input field, I'll be grateful.
Thanks in advance, guys!

You can try:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<EditText
android:id="#+id/edit_text"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ProgressBar
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

You can achive like this, Whenever you want to position children inside a layout FrameLayout is not a good layout to use. consider using RelativeLayout or better ConstraintLayout
<?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="wrap_content"
android:padding="10dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#null"
android:hint="Phone number goes here" />
<ProgressBar
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:padding="5dp" />
</RelativeLayout>
Happy coding!!

Why does the last line of a multiline Android TextView not display?

My Problem: I am unable to get the last line to appear on some of my TextViews which expand to random sizes based upon content. One particular one which this always occurs is the Comment TextView.
What I have tried: I have read and tried a number of similar posts here and throughout the web but none seem to resolve the issue. A number of solutions include setting android:gravity="fill" and android:baselineAligned="false" which have not had an impact and have removed or changed back to a previous value (noted in code below).
Below I have provided the code specific to the comment TextView and an image to help understand the layout which it is apart. This is the only TextView not to the right of its label and baseline aligned. It seems to be a quite common setup, so I'm not sure why the issue exists.
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorWhite"
android:padding="5dp"
android:hint="#string/hint_comment"
android:textSize="12sp"
android:gravity="start|top"
android:ems="10"
android:id="#+id/viewComment"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lbl_View_Comment"
android:layout_marginTop="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"/>

Change android:layout_height="0dp" to android:layout_height="wrap_content".
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:padding="5dp"
android:hint="#string/hint_comment"
android:textSize="12sp"
android:gravity="start|top"
android:ems="10"
android:id="#+id/viewComment"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lbl_View_Comment"
android:layout_marginTop="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"/>

Android button's text always ellipsized

I have a layout with 4 buttons (which I am trying to get of equal size). The problem is I don't want the text on my first button to be ellipsized. I have tried many things: setting the ellipsize attribute to "none", setting the singleLine attribute to false, cutting off the paddings, none of them worked.
Everything looks fine in eclipse graphical layout, but when I try it on a real device, the said issue occurs, no matter how large the screen is.
At first, I thought it was because the paddings ( I define a custom background for the button in an .xml and I use paddings on that shape). However, removing them did not work.
<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="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:gravity="center"
android:background="#drawable/gradient_bkg"
tools:context=".StartActivity" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow android:layout_weight="1.0">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:gravity="center">
<Button
android:id="#+id/random_words"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_weight="1.0"
android:background="#drawable/button_sexy"
android:text="Random two words"
android:drawableLeft="#drawable/drinks"/>
<Button
android:id="#+id/no_data"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_weight="1.0"
android:background="#drawable/button_sexy"
android:text="No data"
android:drawableLeft="#drawable/body_data" />
</LinearLayout></TableRow>
<TableRow android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center" >
<Button
android:id="#+id/result"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="15dp"
android:layout_weight="1"
android:background="#drawable/button_sexy"
android:text="Result"
android:drawableLeft="#drawable/results" />
<Button
android:id="#+id/reset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:background="#drawable/button_sexy"
android:text="Reset"
android:drawableLeft="#drawable/reset"/>
</LinearLayout>
</TableRow>
</TableLayout>
</RelativeLayout>

Your code is amazing and perfect. The problem you indicated will occur only for lower APIs, because you added a Theme.Holo in your manifest, which acts strange for older APIs.
Simplest solution, since you are using a custom LAF anyway, : replace Theme.Holo with Theme.Black in your manifest.

I think the problem is related to the usage of wrap_content on so many levels of your layout. I have seen that this causes the individual items trying to be smart sometimes and are auto adjusting incorrectly or at leas in an unexpected way. Try to put your buttons on top level layout to test if you can get the correct behaviour when using match_parent instead.
But in the end, playing around with combinations of wrap_content and match_parent can consume quite lot of time. A fast way forward may be to set the buttons to fixed size, but then please make sure you set them somewhat bigger than you think is enough to make sure it will work on many different screen sizes.

Android TextView text cut off only in Gingerbread

The layouts in my application are built using SDK 16 and I've tested and confirmed they work fine on ICS and JB but GB has the following issue:
In the code below, I'm just trying to create a simple layout with only text. The text keeps getting cut off on Gingerbread at the end of the first line though, instead of going on to the next line. I've tried setting singeLine to false, played around with lines, maxLines, marquee, layoutWeight, changing layoutHeight and layoutWidth to every imaginable combination, etc. This issue truly baffles me.
Code:-
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text keeps overflowing"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33B5E5"
android:paddingTop="6dp"
/>
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text gets cut off when I input a long string like this one"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF"
/>
</LinearLayout>
</ScrollView>
Also, if I change the theme of the layout to Gingerbread, I get the error:
Failed to find style 'scrollViewStyle' in current theme
Failed to find style 'textViewStyle' in current theme
android.content.res.Resources$NotFoundException
Thanks in advance.

Fixed it myself. Couldn't find out why it was happening but I fixed it by adding the following lines to the code for TextViews:-
android:ellipsize="none"
android:maxLines="10"
android:scrollHorizontally="false"