Develop Reference

Android Layout not display properly

I post my code below ,in the following layout there is a space from the top displayed in the layout. I just want to remove the top space and trying to show title at the top. But i am confused how to set it. please suggest me solution.Thanks in advance.
XML File
<?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:layout_gravity="top"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/folder_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="30dip"
android:textSize="15dp"
android:layout_weight="1"
android:textColor="#115c28"/>
<TextView
android:id="#+id/folder_count"
android:layout_width="0dp"
android:layout_height="60dp"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#115c28"
android:gravity="center"
android:paddingRight="30dip"
android:paddingLeft="35dip"
android:layout_weight="1" />
</LinearLayout>
<ListView
android:id="#+id/folder_display_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

if you are just asking about the two text alignment on top without space than below code will work for you
<?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"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="horizontal" >
<TextView
android:id="#+id/folder_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_weight="1"
android:gravity="top|center"
android:textColor="#115c28"/>
<TextView
android:id="#+id/folder_count"
android:layout_width="0dp"
android:layout_height="60dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#115c28"
android:gravity="top|center"
android:layout_weight="1" />
</LinearLayout>
<ListView
android:id="#+id/folder_display_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

Please check the margin values from your style.xml file inside the values directory.
It might be occupies with your Theme params.

xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<!--THIS ONE FOR THE CHANGE THE COLOR OF THE APPBAR STARTS -->
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#CECFCE</item>
<item name="android:textAlignment">center</item>
</style>
<!--THIS ONE FOR THE CHANGE THE COLOR OF THE APPBAR STARTS -->
<!-- Theme : Green-->
<style name="ThemeSelector" parent="android:Theme.Light">
<item name="android:windowTitleStyle">#style/headerTextStyle</item>
<item name="android:windowBackground">#color/white</item>
<item name="android:windowTitleSize">20dip</item>
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
<style name="headerTextStyle" >
<item name="android:textSize">10sp</item>
<item name="android:textColor">#color/black</item>
<item name="android:paddingLeft">10sp</item>
</style>
<style name="WindowTitleBackground">
<item name="android:background">#color/light_grey</item>
</style>
<style name="myOptionMenu">
<item name="android:background">#color/white</item>
<item name="android:textColor">#color/black</item>
</style>
<!-- color -->
<color name="green">#05781e</color>
<color name="white">#ffffff</color>
<color name="black">#000000</color>
<color name="red">#f71350</color>
<color name="grey">#666666</color>
<color name="light_grey">#bfbfbf</color>
<!-- end -->
</resources>

Android status bar is the same color as Toolbar

I am running an android project. My toolbar and status bar are all green in my activity_main layout. If i change toolbar color to other color the status bar will change to the new one too.
I have an activity with activity_hotel_detail.xml layout. The status bar and toolbar colors are different color which is i need.
Why does the same configuration for Toolbar makes the status bar color are different?
How can i make my main_activity layout is the same one as my activity_hotel_detail layout?
I am new on android, any help thanks!
activity_main.xml
<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:fitsSystemWindows="true"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".ViewController.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
style="#style/ThemeOverlay.AppCompat.Dark"/>
</RelativeLayout>
activity_hotel_detail.xml
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/Blue"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
style="#style/ThemeOverlay.AppCompat.Light"/>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:fillViewport="true"
android:background="#color/cell">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/white"
android:padding="0dp"
android:stretchColumns="1">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="#string/img_description"
fresco:placeholderImage="#drawable/test_image"
fresco:actualImageScaleType="fitStart"
android:id="#+id/hotel_image_view" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/hotel_name"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="New Text New Text New Text New TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew Text"
android:id="#+id/hotel_description"/>
<fragment
class="com.example.william.willhotel.ViewController.HotelDetailFragment"
android:layout_width="match_parent"
android:layout_height="30dp"
android:id="#+id/fragement">
</fragment>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="back"
android:background="#color/BlueViolet"
android:id="#+id/back_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next"
android:background="#color/DarkRed"
android:id="#+id/next_button" />
</LinearLayout>
</ScrollView>
EDIT: styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/DarkRed</item>
<item name="colorPrimaryDark">#color/IndianRed</item>
<item name="colorAccent">#color/yellow</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
styles.xml(v21)
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
EDIT2 replace 'transparent1 by #color/IndianRed in styles.xml(v21) didn't work.
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/IndianRed</item>
</style>
</resources>
EDIT
my activity extend from AppCompatActivity, i see the source code only sdk version larger than 23 can get the system theme.
public class MainActivity extends AppCompatActivity
So if i run under sdk 23, the status bar appears correct as expect.
if (delegate.applyDayNight() && mThemeId != 0) {
// If DayNight has been applied, we need to re-apply the theme for
// the changes to take effect. On API 23+, we should bypass
// setTheme(), which will no-op if the theme ID is identical to the
// current theme ID.
if (Build.VERSION.SDK_INT >= 23) {
onApplyThemeResource(getTheme(), mThemeId, false);
} else {
setTheme(mThemeId);
}
}

Use following code in your activity's onCreate() method
if (Build.VERSION.SDK_INT >= 21) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(ContextCompat.getColor(this, R.color.primary_dark));
}
Where primary_dark color is your toolbar's color

Add this in your values-v21/styles.xml.
<item name="android:statusBarColor">#color/IndianRed</item>
Your theme should Look like this remove Transparent.
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/IndianRed</item>
</style>

This may help you.
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">#color/accent</item>
Reference: https://developer.android.com/training/material/theme.html#StatusBar
Note: as per the google doc"the toolbar uses the 500 version of indigo, while the status bar uses the 700 version." Doc Link: https://www.google.com/design/spec/style/color.html#color-color-schemes

<item name="android:windowBackground">#color/cardview_dark_background</item>
<item name="android:statusBarColor">#color/cardview_dark_background</item>
it works for me if you have multiple theme

Property "android:textSize" not applied when in custom style

I have following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10sp"
android:paddingBottom="10sp">
<ImageView
android:id="#+id/newsImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:contentDescription="#string/hello_world"
android:src="#drawable/ic_program_blue" />
<RelativeLayout
android:id="#+id/textLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/newsImage">
<TextView
android:id="#+id/titleText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world"
style="#style/newsListItemTitle" />
<TextView
android:id="#+id/shortText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:text="#string/hello_world"
style="#style/newsListItemShort" />
</RelativeLayout>
</RelativeLayout>
And this style definition:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="#android:style/Theme.Holo.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<!-- NAVIGATION DRAWER -->
<!-- Items -->
<style name="navDrawerItem">
<item name="android:minHeight">48dp</item>
<item name="android:textSize">22sp</item>
<item name="android:textColor">#686868</item>
<item name="android:paddingRight">40dp</item>
<item name="android:gravity">center_vertical</item>
</style>
<!-- NEWS -->
<!-- Item title -->
<style name="newsListItemTitle">
<item name="android:singleLine">true</item>
<item name="android:background">#66ffffff</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:textColor">#000000</item>
<item name="android:textSize">23sp</item>
</style>
<!-- Item short -->
<style name="newsListItemShort">
<item name="android:singleLine">true</item>
<item name="android:background">#66ffffff</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:textColor">#686868</item>
<item name="android:textSize">15sp</item>
</style>
</resources>
Everything gets applied to the TextViews, except the "textSize". No text does appear in the configured textSize height. Any idea, why this is not working?
No compile errors.
When I apply the property "textSize" with the TextView directly everythink works fine.
Thanks

I made the corrections to the wrong "styles.xml" file. I have a styles file for API larger than 16. And this file gets used. But I edited the standard "styles.xml".

Try to add in the below folder structure:
res/values/dimens.xml
res/values-small/dimens.xml
res/values-normal/dimens.xml
res/values-xlarge/dimens.xml
Example:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_size">18sp</dimen>
</resources>

how to call a another layout file inside a styles in android?

i custom the Theme in android Widget.TabWidget android:tablayout
and overide the style of tabwidget in my ownway not using #android because
i want to custom my style of API 10 below same like API11+
<resources>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="AppBaseTheme" parent="android:Theme">
<!-- Window -->
<item name="android:windowNoTitle">true</item>
<item name="android:tabWidgetStyle">#style/MyTabWidget</item>
</style>
<!-- TabWidget -->
<style name="MyTabWidget" parent="android:style/Widget.TabWidget">
<item name="android:textAppearance">#style/MyTabWidgetTextAppearance</item>
<item name="android:gravity">center|center</item>
<item name="android:tabLayout"> HOW TO CALL api_1_10_indicator.xml LAYOUT FROM MY RES LAYOUT </item>
</style>
<!-- TabWidget TextAppearance -->
<style name="MyTabWidgetTextAppearance" parent="android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">#color/select_tabwidget_text_color</item>
</style>
</resources>
my res/layout/api_1_10_indicator.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="48dip"
android:layout_weight="1"
android:layout_marginStart="-3dip"
android:layout_marginEnd="-3dip"
android:background="#color/api_1_10_tab_indicator">
<ImageView android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="?android:attr/tabWidgetStyle"
/>
</RelativeLayout>
if i use <item name="android:tablayout">#layout/api_1_10_indicator</item>
its not working icant call my own tablayout for the tabwidget that i custom.
HOW TO DO IT?

How can I modify this theme to prevent Button text from overlapping the TextView text?

I have a layout that appears as follows when there is no style applied to it (other than hard-coded styles, e.g. colour & font that apply to both instances):
But it appears like this when I apply a style:
The layout is defined as:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/txtBlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[Block Name]"
android:textSize="15sp"
android:layout_gravity="center" />
<Button
android:gravity="left|bottom"
android:background="#null"
android:text="[Block Status]"
android:id="#+id/btnStatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imgAlarm"
android:layout_alignParentLeft="true" />
<ImageButton
android:id="#id/imgAlarm"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alarm"
android:layout_centerVertical="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
and my styles.xml is defined as:
<resources>
<!-- Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices. -->
<style name="AppBaseTheme" parent="android:Theme.Light">
<!-- Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here. -->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="FullscreenTheme" parent="android:Theme.NoTitleBar">
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowBackground">#null</item>
</style>
<style name="ButtonBar">
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingRight">2dp</item>
<item name="android:paddingBottom">0dp</item>
<item name="android:background">#android:drawable/bottom_bar</item>
</style>
<style name="ButtonBarButton" />
<style name="keypad_button" >
<item name="android:layout_width" >fill_parent</item>
<item name="android:layout_height" >wrap_content</item>
<item name="android:textColor" >#ffffff</item>
<item name="android:gravity" >center</item>
<item name="android:textSize" >15sp</item>
<item name="android:width">65dp</item>
</style>
<!--<style name="CustomTheme" parent="#android:style/Theme">
<item name="android:tabWidgetStyle">#style/CustomTabWidget</item>
</style>
<style name="CustomTabWidget" parent="#android:style/Widget.TabWidget">
<item name="android:textAppearance">#style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText" parent="#android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">50sp</item>
<item name="android:textStyle">bold</item>
</style>-->
</resources>
What do I need to do to prevent the text from overlapping?

Change youe xml like this:
<Button
android:gravity="left|bottom"
android:background="#null"
android:text="[Block Status]"
android:id="#+id/btnStatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#id/txtBlock"
android:layout_toLeftOf="#+id/imgAlarm"
android:layout_alignParentLeft="true" />
Just added android:layout_below="#id/txtBlock" to your xml

Try Linear layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtBlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[Block Name]"
android:textSize="15sp"
android:layout_gravity="center" />
<Button
android:gravity="left|bottom"
android:background="#null"
android:text="[Block Status]"
android:id="#+id/btnStatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imgAlarm"
android:layout_alignParentLeft="true" />
</LinearLayout>
<ImageButton
android:id="#id/imgAlarm"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alarm"
android:layout_centerVertical="true"
android:layout_alignParentRight="true" />
</LinearLayout>