Develop Reference

Text Clipping in Textview

I am adding Text in textview but it clipping at start and I have tried adding padding, margin start and textalignment center or end.
XML CODE
<LinearLayout 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:background="#eb2f06"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.CardView
android:id="#+id/c1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dim_2"
android:visibility="invisible"
app:cardBackgroundColor="#ffeb3b"
app:cardCornerRadius="#dimen/dim_7"
app:cardElevation="#dimen/dim_5"
app:cardUseCompatPadding="true">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="#dimen/dim_5">
<TextView
android:id="#+id/txtquote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/dim_4"
android:fontFamily="#font/dancingbold"
android:padding="#dimen/dim_10"
android:textColor="#000000"
android:textSize="35sp" />
<TextView
android:id="#+id/txtauthor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/dim_3"
android:layout_marginTop="#dimen/dim_3"
android:fontFamily="#font/dancingbold"
android:gravity="end"
android:padding="#dimen/dim_5"
android:textColor="#000000"
android:textSize="30sp" />
</LinearLayout>
</ScrollView>
</android.support.v7.widget.CardView>
Setting Content in java
Java Code
txtquote.setText("\"" + arrquote.get(count).quote + "\"");
txtauthor.setText("~" + arrquote.get(count).author);
I have tried using hair space and \u0020
Firstly I thought it is because of my phone small screen but when I tried this in many different screen size phones, It still has the same problem

This is about the font properties(italic) and how android can measure/handle them. With that font afaik you won't be able get rid of clipping.

Try puting this instead of your scroll view, it will add a little space and i think it will not cut your text.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp">

Try adding
android:clipToPadding="false"
android:clipChildren="false"
To the parent layouts of your TextViews.

Android, can't make text vertically center in TextView

I have a problem with making verticaly center text in TextView.
Android Studio in preview showing text correctly, in center like I want:
But when I will put app to device (Htc One m8, Android 6) then text is bottom (not in center of orange box (I set TextView to orange for better see where is problem).
Below text of xml layout, can see find where is a problem? ( I removed part of code, just added main relative and linear and line where is a problem)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="#dimen/main_relative_layout_height_medium"
android:layout_margin="#dimen/main_relative_layout_margin_medium"
android:orientation="vertical"
android:background="#color/widget_relative_layout_background_color"
android:paddingTop="#dimen/main_relative_padding_top_medium">
<!--android:updatePeriodMillis="86400"-->
<LinearLayout
android:id="#+id/contentContainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/main_linear_layout_padding_medium"
android:paddingTop="#dimen/main_linear_layout_padding_top_medium"
android:paddingBottom="#dimen/main_linear_layout_padding_bottom_medium"
android:background="#color/widget_linear_layout_background_color"
android:weightSum="15"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
...
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="0dp">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="#dimen/times_row_size_medium"
android:paddingTop="0dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="#dimen/icon_width_size_medium"
android:layout_height="wrap_content"
android:id="#+id/firstWidgetImageView"
android:layout_column="1"
android:src="#drawable/ic_time_to_departure_white"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:text="02:41"
android:layout_column="0"
android:textColor="#color/widgetTextColor"
android:id="#+id/firstTimeTextView"
android:textSize="#dimen/first_time_text_size_medium"
android:background="#color/application_button_color" />
</LinearLayout>
...
</LinearLayout>
</FrameLayout>

You have used center_horizontal in your TextView change it to center and you should be fine.
Code example:
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="02:41"
android:layout_column="0"
android:textColor="#color/widgetTextColor"
android:id="#+id/firstTimeTextView"
android:textSize="#dimen/first_time_text_size_medium"
android:background="#color/application_button_color" />

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="02:41"
android:layout_column="0"
android:textColor="#color/widgetTextColor"
android:id="#+id/firstTimeTextView"
android:textSize="#dimen/first_time_text_size_medium"
android:background="#color/application_button_color" />
Please take a look at the above code . You need to replace gravity from center_horizontal to center .

2 Images On Top of Each Other - XML - Android

So I want to use 2 images. One should be on top of the other but smaller, so that the border of the image that's behind is only shown.
Take a look at these 2 photos.
Image that's behind (The border Image)
[IMG]http://i66.tinypic.com/25zgguh.jpg[/IMG]
Image that should be inside the border
[IMG]http://i67.tinypic.com/10mpgt4.jpg[/IMG]
XML CODE
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<ImageView
android:id="#+id/fragment_poi_list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
I was thinking if I could add an android:background="First Image" and make my Image view center but leaving some space on the edges for the background to be shown.
Would have posted 2 more images showing how the app is and how it should look, but the site won't let me post more than 2 links cause my reputation is lower than 10 -_-
Thanks in advance for the help!!!

Do it like this:
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_image"
tools:context=".MainActivity">
<ImageView
android:id="#+id/view"
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/foreground_image" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>

hope I got it clear, you could simply use two layout and adjust margin for the small one.
put your images as RelativeLayout background or use ImageView in layouts
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="25dp"></RelativeLayout>
</RelativeLayout>

App Starting Page UI Questions

I have a couple of simple UI questions in regards to the initial app screen I am designing:
(a) How can I make the gray box surrounding the 'Join...' and 'Sign...' buttons transparent?
(b) Are there varying degrees of transparency?
(c) When I change between portrait and landscape orientation, my buttons disappear. How can I keep them visible?
Portrait UI...
Landscape UI...
(d) How do I add 'Company XYZ' to the TextView and have it centered above my two buttons inside the gray box?
Below is my current code...
My activity_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
tools:context="com.companyxyz.companyxyz_0002.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>
My content_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="48dp"
android:paddingRight="48dp"
android:paddingTop="368dp"
android:paddingBottom="48dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.companyxyz.companyxyz_0002.MainActivity">
<LinearLayout
android:background="#eee"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="40dp"
android:paddingBottom="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:text="Join Free"
android:layout_width="fill_parent"
android:layout_weight="1"/>
<Button
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:text="Sign In"
android:layout_width="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

Problem is with your paddingTop of 368dp which you have given it to the LinearLyaout in content_main. When you rotates to screen from vertical to horizontal this padding push the view out side of the visible region. You need to adjust this padding for the landscape mode with different layout or you can adjust it with the RelativeLayout as suggested in other answers.

A & B: The format for the android:background is hex ARGB, (alpha-red-green-blue), so what you currently have is the same as #FFeeeeee, which is full alpha and grey. Knock that FF (256) down to 00 (0), and it will be fully transparent. So, yes, there are "varying degrees of transparency".
C & D: I've striped all the padding and extra stuff from your content_main.xml, changed to a RelativeLayout and I got this. Let me know if you wanted something different. I also added the login fields to demonstrate the layout anchoring features of RelativeLayout.
Note, you'll need to add stuff back-in like xmlns:tools=... and tools:showIn="#layout/activity_main"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#fff"
android:layout_width="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_height="match_parent">
<!-- Sign in Form -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:layout_alignParentTop="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username"
android:labelFor="#id/edit_username"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_username"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password"
android:labelFor="#id/edit_password"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_password"/>
</LinearLayout>
<!-- Button Bar -->
<LinearLayout
android:background="#77eeeeee"
android:layout_width="match_parent"
android:gravity="bottom"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TextView
android:text="Pick an action"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout android:layout_width="match_parent"
android:id="#+id/registrationButtonRow"
android:layout_height="wrap_content">
<Button
android:layout_height="wrap_content"
android:text="Join Free"
android:id="#+id/btn_register"
android:layout_width="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_height="wrap_content"
android:text="Sign In"
android:id="#+id/btn_sign_in"
android:layout_width="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

wrap content for numbers

I want to use wrap_content on TextView where I keep only numbers (and coma), but I have noticed that this takes more space than needed (as if reserved space for letters).
Shown here:
image link http://img802.imageshack.us/img802/3784/wrap.jpg
Current situation - blue lines, desired - gray lines.
If it's not possible to do this with numbers and coma, maybe it is possible only with numbers?
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="5dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp" >
<LinearLayout
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sampleText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/image" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:inputType="phone"
android:text="0,00"
android:textSize="50dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
For example, MyTextView works as I wrote. The thing is that I want to center vertical my image, but it's not properly centered due to fact MyTextView takes more space than needed.

Set android:includeFontPadding to false, it is true by default. It will reduce the padding significantly although it does not remove it completely. Be sure to test this on a real device, since it had no effect for me in the layout preview. Set a background color to see the difference.
<TextView
...
android:includeFontPadding="false" />

Try it using textView.setTextSize(15dp);
I am using numbers in textView. I didnt feel it as a big issue.

Set height and width of the textview as wrap_content.Like,
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

are you using a custom font? If so, one possibility is that the padding you see is built into the font.

You can add this to your TextView: android:inputType="phone"