ConstraintLayout TextView is not shown - android

I got the following problem in my ConstraintLayout
Layout File:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?android:attr/actionBarSize"
android:orientation="horizontal"
android:paddingEnd="8dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/layout_titlemode"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textAlignment="center"
android:textColor="#color/colorUnactive"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Styles (using AppTheme):
<resources>
<style name="AppTheme" parent="Theme.MultiBackStack">
<item name="android:textColorPrimary">#color/colorTextPrimary</item>
</style>
<style name="Theme.MultiBackStack" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimary</item>
<item name="android:textColorPrimary">#color/colorTextPrimary</item>
</style>
</resources>
This is what I expected due to preview:
I excepted that the TextView would take all the available space (like match_parent) and that the text is shown in the center of the view.
This is what is actually shown:
Instead, nothing is shown actually (I guess because of the layout_width="0dp")
The newest version of the constraint support library is added:
'com.android.support.constraint:constraint-layout:1.0.2'
What I tried in addition:
I added to the TextView app:layout_constraintWidth_default="wrap"
This let the TextView shown up, but it starts on the left and is not centered. How can I achieve to center the view ?
I can't determine why nothing is shown.
Thank you in advance for your helping!

try using theme.
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorPrimaryDark">#color/colorPrimaryD</item>
</style>

Try using this theme in style.xml file
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">

Related

Android ActionBar height using a custom layout

I can set my ActionBar height in my styles.xml resource file:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarSize">40dp</item>
</style>
This way, my action bar is a bit smaller than the default one. But a white gap appears below the ActionBar. The content starts at the same position as if the ActionBar had the same height.
EDIT:
My layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainMenuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top">
<FrameLayout
android:id="#+id/mmContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/mmBottomNavigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/mmBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation_menu"
app:itemBackground="#color/white"
app:itemIconTint="#color/btn_nav_itam_color"
app:itemTextColor="#color/btn_nav_itam_color" />
</RelativeLayout>
EDIT 2:
I tried it on a blank Application. The actionBarSize attribute works as expected. Also there's no white gap.
My app uses a custom layout for the action bar - custom_action_bar.xml:
<?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="0dp" android:layout_margin="0dp"
android:background="#color/colorPrimary" >
<TextView
android:id="#+id/titleTvLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/app_name"
android:textColor="#color/actionBarText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/titleTvRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:text="#string/title_bar_loggedin"
android:textColor="#color/actionBarDarkText"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
And this layout is set in the Activity:
public static void setCustomTitle(AppCompatActivity apc, String userName) {
if (apc.getSupportActionBar() != null) {
apc.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
apc.getSupportActionBar().setDisplayShowCustomEnabled(true);
apc.getSupportActionBar().setCustomView(R.layout.custom_action_bar);
View view = apc.getSupportActionBar().getCustomView();
TextView tvLeft = (TextView) view.findViewById(R.id.titleTvLeft);
TextView tvRight = (TextView) view.findViewById(R.id.titleTvRight);
tvLeft.setText(apc.getResources().getString(R.string.app_name));
String rightTitle = apc.getResources().getString(R.string.title_bar_loggedin) + " " + userName;
tvRight.setText(rightTitle);
}
}
Add standard height in your style or layout, example added for style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:actionBarSize">40dp</item>
<item name="android:background">#color/colorPrimary</item>
</style>
Set the parent layout height to "match_parent" in your layout resource file.
This is a hack but for the parent container of the content area, you can add a top margin of -8dp.
android:layout_marginTop="-8dp"
This will pull the contents up.

TextInputLayout and AutoCompleteTextView background looks fine in preview, but on device it is always white

To keep it as short as possible.
This is my style for TextInputLayout
<style name="TextLabel" parent="Widget.AppCompat.AutoCompleteTextView">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/pure_white</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/pure_white</item>
<item name="colorControlNormal">#color/pure_white</item>
<item name="colorControlActivated">#color/pure_white</item>
<!-- When everything else failed I tried this but with no effect -->
<item name="android:background">#android:color/transparent</item>
</style>
And this is the implementation in the layout
<android.support.design.widget.TextInputLayout
android:theme="#style/TextLabel"
android:layout_margin="#dimen/activity_margin_basic_double"
android:layout_centerInParent="true"
android:id="#+id/team_name_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/new_team_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_team_create"
android:maxLines="1" />
</android.support.design.widget.TextInputLayout>
And this is what I get on the device (both physical and emulated):
But this is what I actually want and Android Studio preview actually shows it correctly, it just won't compile this way:
Any ideas how to get this sorted please? I've wasted few days trying to figure this one out but just can't figure the problem
Many thanks in advance!
Sloba
The issue is in your styles. You are applying Widget.AppCompat.AutoCompleteTextView to TextInputLayout with the results that you are seeing. You can change this parent style to AppTheme or move android:theme="#style/TextLabel" to the AutoCompleteTextView and not change the parent. I show the first way below.
This little video shows the changes I made to get what I think is what you want. I added a few things to better show how it is working. It may not be 100% of what you need, but it should get you over the threshhold.
Demo video
Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#FFcc9c00"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/team_name_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:theme="#style/TextLabel">
<AutoCompleteTextView
android:id="#+id/new_team_name"
android:layout_width="match_parent"
android:hint="Choose a Team Name"
android:layout_height="wrap_content"
android:maxLines="1" />
</android.support.design.widget.TextInputLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/team_name_container"
android:layout_margin="8dp"
android:hint="EditText hint" />
</RelativeLayout>
And styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="TextLabel" parent="AppTheme">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#android:color/white</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#android:color/white</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="colorControlActivated">#android:color/white</item>
</style>
</resources>

Android: Unwanted White Box at Top of Screen (toolbar?)

How do I get rid of the white box at the top of the android view? I cannot see anywhere in my code where I called something that created the toolbar, nor did I code it myself. It also exists above the view, not in it. I'm guessing there is some setting in the design view of the xml file that can toggle it? Thanks in advance!
** I should also include that it is only on this activity, and my other activities do not have this white bar at the top. Furthermore, the actionbar is the thin blue bar above the white car, so any code that involves manipulating the actionbar will not change the white bar's status. **
EDIT: XML Code is below
<?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="match_parent"
android:background="#drawable/bucket"
android:theme="#+id/BucketTheme2"
android:backgroundTint="#70FFFFFF"
android:backgroundTintMode="src_over">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="100dp"
android:text="Find a place to go around you!"
android:textColor="#ff000000"
android:textSize="18dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:onClick="randomButtonPressed"
android:text="RANDOMIZE"
android:textSize="20dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/bucketBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:onClick="bucketButtonPressed"
android:text="Bucket List"
android:textSize="20dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/searchLocationBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:onClick="searchButtonPressed"
android:text="Search by Location"
android:textSize="20dp" />
</TableRow>
</TableLayout>
</RelativeLayout>
EDIT 2: style.xml code for BucketTheme2 is below (I did not post it initially because it only sets colors):
<style name="BucketTheme2" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Set theme for application or activity in Manifest.xml to remove action bar:
android:theme="#android:style/Theme.Holo.Light.NoActionBar"
Or add the following code in Activity in the onCreate method and import android.support.v7.app.ActionBar:
ActionBar actionBar = getSupportActionBar();
actionBar.hide();
Add the following theme to the style.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then set this theme to the activity in manifest:
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar"/>
UPDATE: You can also set the theme as below:
<style name="BucketTheme2" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Hope this helps.
Change your activity theme in manifest to Theme.AppCompat.Light.NoActionBar and you should be sorted
Add NoActionBar style in style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowContentOverlay">#null</item>
</style>
And add this theme to your activity from manifest,
<activity android:name=".YourActivity"
android:theme="#style/AppTheme"
>
</activity>
try
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
it should be before setContentView
Just try this in your style
<style name="BucketTheme2" parent="android:Theme.Holo.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
I ran into this same issue when using a template project that Android studio already set up. I noticed that in the activity_main.xml file there was unnecessary padding at the top once I changed to a theme of *.NoActionBar. If you remove android:paddingTop="?attr/actionBarSize" it should go away.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"></androidx.constraintlayout.widget.ConstraintLayout>

Android change color of home arrow in android.support.v7.widget.Toolbar

I am trying to change color of home arrow indicator in custom toolbar.
There is list of examples that I found but nothing worked for me.
Here is my layout
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/title_bar_toolbar_id"
app:theme="#style/ToolbarColoredBackArrow"
app:popupTheme="#style/AppTheme"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
android:colorControlNormal="#color/hamburger_color"
android:background="#color/custom_theme_color" >
<LinearLayout
android:id="#+id/base_title_bar_toolbar_id_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/activity_calendar_toolbar_change_view_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/select_semester_view"
android:layout_gravity="center_vertical"
android:padding="10dp" />
<TextView
android:gravity="center"
android:layout_gravity="center"
android:id="#+id/base_title_bar_toolbar_header"
android:layout_weight="0.1"
style="#style/CustomToolBarTitleStyleBase"
android:text="#string/calendar" />
<ImageView
android:padding="13dp"
android:id="#+id/activity_calendar_toolbar_save_date_to_calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/save_date_to_calendar"
android:layout_gravity="center_vertical|start" />
<ImageView
android:id="#+id/activity_calendar_toolbar_select_semester_to_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/select_semester_to_show"
android:layout_gravity="center_vertical|start"
android:padding="13dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
The styles are:
<style name="ToolbarColoredBackArrow" parent="AppTheme">
<item name="android:textColorSecondary">#color/hamburger_color</item>
<item name="android:textColorPrimary">#color/hamburger_color</item>
<item name="colorControlNormal">#color/hamburger_color</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">#style/MyActionBarTabText</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTabTextStyle">#style/MyActionBarTabText</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/custom_theme_color</item>
<item name="android:titleTextStyle">#style/MyActionBar.TitleTextStyle</item>
<!-- Support library com`enter code here`patibility -->
<item name="background">#color/custom_theme_color</item>
<item name="titleTextStyle">#style/MyActionBar.TitleTextStyle</item>
</style>
I tried all possibilities that I found in examples,
but nothing worked for me.
Haha, this is one of the most frustrating styling issues in Android right now...
Try creating a style like this
<style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorSecondary">#000000</item>
</style>
and using it in your Activity (you will probably want to merge it with your current style, as it is just the parent and this one param that matters) and of course replace the #000000 with some other color.
First of all you don't need a separate ImageView for your arrow navigation button. Just use the one from support design resources which will resize automatically according to the screen size.
Drawable upArrow = getResources().getDrawable(android.support.v7.appcompat.R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
toolbar.setNavigationIcon(upArrow);

SwitchCompat color on Lollipop

I have a SwitchCompat in the action bar (v7.Toolbar) of my activity. I want it be colorStructure when off and colorAccent when on. It works fine on pre-Lollipop, but on Lollipop the activated switch is drawn in a color which I did not define anywhere. It looks like "material_deep_teal_200". Thats my only style definitions:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Default" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!--<item name="android:windowNoTitle">true</item>-->
<item name="windowActionBar">false</item>
<item name="colorSwitchThumbNormal">#color/colorStructure</item>
<item name="colorControlNormal">#color/colorPrimary</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<!--<item name="selectBarStyle">#style/DefaultSelectBar</item>-->
</style>
</resources>
And that's the begin of the activity xml:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/Widget.AppCompat.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/colorPrimary"
android:paddingRight="#dimen/abc_dropdownitem_text_padding_right">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/abc_action_bar_icon_vertical_padding_material">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/helpButton"
android:src="#drawable/ic_help_large"
android:background="#00000000"
android:layout_gravity="center"/>
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/master_switch"
android:clickable="true"
android:checked="true"
android:gravity="center"
android:layout_gravity="right"
/>
</FrameLayout>
</android.support.v7.widget.Toolbar>
So what do I need to change to make the switch have the same custom colors on KitKat and Lollipop?
Thanks
Actually the code as presented above works fine - also on Lollipop. I must have done a mistake during validation after cleaning up the problematic code.
Originally the problem was when I also had a configuration in values-v21. I assume that there was a typo or something like that which got lost when I was simplifying all into the default xml file.
So in short, the code as presented works, and I assume that having configurations in values-v21 would not cause a problem either.

Categories

Resources