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>

TextView below Image not showing up in Android

I am trying to put a text below an image but they are not showing up in android layout.
Here is the screenshot:
I dont' see any text below image.
And my code: inside a relative layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_footer"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/panelcolor" >
<ImageView
android:id="#+id/searchicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingRight="60dp"
android:src="#drawable/search_white" />
<TextView
android:id="#+id/searchText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/searchicon"
android:text="Search" />
<ImageView
android:id="#+id/homeicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingRight="60dp"
android:layout_toRightOf="#+id/searchicon"
android:src="#drawable/ic_home" />
<TextView
android:id="#+id/hometext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/homeicon"
android:text="Home" />
<ImageView
android:id="#+id/wishicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/homeicon"
android:src="#drawable/ic_favorite" />
<TextView
android:id="#+id/wishtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/wishicon"
android:text="Wish List" />
<ImageView
android:id="#+id/viewicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="60dp"
android:layout_toRightOf="#+id/wishicon"
android:src="#drawable/ic_eye" />
<TextView
android:id="#+id/viewtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/wishicon"
android:text="Viewed" />
</RelativeLayout>
Not sure what is wrong?

Assuming you follow Googles Design guidelines
(Tabs with icons and text Height - 72dp;
Icon - 24 x 24dp)
Change 'match_parent' to 'wrap_content' for the ImageViews

The problem is you have put android:layout_height="match_parent" for image views and android:layout_height="wrap_content" for text views. Either use wrap_content for image view or use use a LinearLayout with android:weight property. Using LinearLayout would also solve your problem of alignment if it occurs!

Try setting android:layout_alignParentBottom="true" instead of android:layout_below="#+id/homeicon".
This aligns the text at the bottom of the parent. You might also need to set android:layout_alignLeft="" and align it to the corresponding imageView.
This method will only work, if there is enough padding below the image. This is because the text will now overlap the image.
EDIT:
Another way would be, to set the relative layout to a fixed height you know (like 60dp) and set the imageView to a fixed height (like 40dp). Then the TextView will also show up below the ImageView.

Android TextView with maxwidth

I have an TextView with a variable width, but maximum is 250dp. But somehow Android sets it always to maxwidth.
With a shorter text and without maxwidth it works, but then the text is long enough that the field exceeds the screen width, it overlaps the arrow.
I already tried this two variants, which give the same result as in the picture
<TextView
android:id="#+id/bubbleText"
style="#style/MarkerText"
android:maxWidth="250dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:layout_marginEnd="#dimen/defaultSpacing" />
<TextView
android:id="#+id/bubbleText"
style="#style/MarkerText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/defaultSpacing"
android:layout_weight="1"
android:background="#FF0000"
android:maxWidth="250dp"
android:singleLine="false" />
I want it to look like this:
Additional infos:
Complete XML
<LinearLayout
android:id="#+id/markerTextBubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="invisible" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/marker_text_background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="#dimen/tinySpacing"
android:paddingEnd="#dimen/defaultSpacing"
android:paddingStart="#dimen/defaultSpacing"
android:paddingTop="#dimen/tinySpacing" >
<TextView
android:id="#+id/bubbleText"
style="#style/MarkerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/defaultSpacing"
android:background="#FF0000"
android:maxWidth="250dp" />
<mypackage.IconTextView
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MarkerTextIcon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/icon_map_arrow" />
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="-5dp"
android:layout_marginTop="-1dp"
android:src="#drawable/marker_text_background_rectangle" />
</LinearLayout>
<style name="MarkerText" parent="android:Widget.Holo.Light.TextView">
<item name="android:textColor">#color/myWhite</item>
<item name="android:textSize">#dimen/markerTextSize</item>
</style>
<dimen name="markerTextSize">22sp</dimen>
The problem occurs in this independent snippet too:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:maxWidth="250dp"
android:text="1. Willkommen bei meiner APP"
android:textSize="22sp" />

Not 100% sure, but I think the problem is that it is a multi-line text.
Does the view behave as expected when the text is shorter? i.e. "1. Welcome"
What I think happens is the following:
The view tries to make it on one line, then it expands until its maximum width, given that is not enough for rendering, makes it a multi-line, but does not stretch the view.
You could try with "1. Willkommen bei\nmeiner APP" to see if it shows the expected behaviour.
Hope this helps.

Using the maxWidth won't be causing it to stretch.
It would most likely be in your code for:
android:layout_marginEnd="#dimen/defaultSpacing"
and check any dimensions:
style="#style/MarkerText"
As setting the maxWidth alone will not cause this.
There must be some figure that is putting padding between your text and the right side textview, or possibly some peculiar margin mess up.
Using maxWidth should not force it out to the right like that, as I showed you in the image, I think it's the nested layouts and there is a lot of coding defining margins and padding within your layouts and elements, this could be forcing your texview to move to the right, and the text will automatically wrap, as it cannot fit in the first row, but the textview itself is still being pushed to the right.

UI bug android - screen not matched on top edge

I'm working on this app and I have implemented a photo slider through ViewPager. There is an imported circle page slider indicator, a project on github. It looks like this: (Sorry for the blured text, I'm not able to share the content until release. The app will be free)
My problem is that thin blue line on the top of the screen. Blue color comes from the background and it is set in the root layout of the activity. No matter what I do to the any of the layouts (changing margins or padding to negative values) this line remains there.
So I figured that it has to do with the chosen theme for the screen. Theme is set to a custom theme which has Theme.NoTitleBar as it's parent. The code is below:
This is the style file. Taken from http://viewpagerindicator.com/ by Jake Wharton.
<style name="Theme.PageIndicatorDefaults" parent="android:Theme.NoTitleBar">
<!--<item name="vpiIconPageIndicatorStyle">#style/Widget.IconPageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/Widget.TabPageIndicator</item>-->
<item name="vpiCirclePageIndicatorStyle">#style/Widget.CirclePageIndicator</item>
</style>
This is my activity layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/accountRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradientbg"
android:orientation="vertical"
android:gravity="bottom">
<RelativeLayout
android:id="#+id/titleBar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
/>
<io.colomb.android.colombio.customviews.CirclePageIndicator
android:id="#+id/slideIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#id/viewPagerSlider"
android:layout_marginBottom="20dp"
android:paddingRight="5dp"
android:paddingLeft="5dp"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivSoftboardLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/logosoftboard"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/app_name"
android:layout_marginTop="10dp"
android:visibility="gone"
android:layout_marginBottom="15dp"
/>
<LinearLayout
android:id="#+id/InputFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.001"
android:layout_marginTop="-15dp"
>
</LinearLayout>
Any thoughts are appreciated.

OK solved. The thing that was bothering the adapter was the line gravity="bottom"in the root element. Also the pictures needed to be cropped more

Android: how to make two TextViews placed in different lines if there is not enough space in one line

I'm trying to organize two TextViews to behave like that:
So, if there is enough space for both TextViews in line, android should place them in line.
If there is not enough space, the second TextView must be placed on the next line with right alignment.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/takeoffCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/flightItem" />
<TextView
android:id="#+id/landingCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/flightItem" />
</LinearLayout>
<style name="flightItem" parent="#android:style/TextAppearance">
<item name="android:textSize">14dip</item>
<item name="android:textColor">#color/flightItemFont</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:textStyle">bold</item>
</style>

To accomplish what you are looking for you could change you're layout to a RelativeLayout and add android:layout_alignParentLeft="true" to your TextViews, however, this doesn't set these TextViews to act dynamically. Meaning if they can fit side-by-side then they should be in-line but the bottom TextView will still align to the right.
I don't think what you are looking for is technically possible. However this may be a good alternative:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/takeoffCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
style="#style/flightItem" />
<TextView
android:id="#+id/landingCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
style="#style/flightItem" />
</RelativeLayout>