Android ActionBar height using a custom layout - android

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.

Related

ConstraintLayout TextView is not shown

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">

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>

How to bring ImageView under the transparent Status Bar

In the images below,I am trying to bring the ImageView under the StatusBar. But its not happening.
Image Screenshot on Android API 19
Image Screenshot on Android API 22
I went on Android transparent status bar and actionbar (this question) and tried to implement the same but its not working.
The xml layout of the activity is
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/category_layout_top"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:fitsSystemWindows="true"
android:layout_width="390dp"
android:layout_height="390dp"
android:id="#+id/category_Image_View"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/def_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#00FFFFFF"
android:layout_alignParentTop="true" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/category_linearlayout">
<TextView android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:id="#+id/category_textView"
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
I tried the below code in the onCreate() method also
setStatusBarTranslucent(true);
protected void setStatusBarTranslucent(boolean makeTranslucent) {
if (makeTranslucent) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
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>
</style>
style-v21.xml
<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>
AppTheme is the style used in the activity.
EDIT 1
I used a color in the background of FrameLayout to check whether it was under the status bar or not. And it is not.
So the problem is not with Layout, I guess.
EDIT 2
this is the desired result

In style-v21 you are overriding the style AppTheme.NoActionBar, but you said the style you use in your activity is the AppTheme style.
You need to override the AppTheme layout in style-v21 or define AppTheme.NoActionBar in you activity.

Theme Style don't work on custom LiestView Items

I want to build a theme for my app. But it seems like my LiestView item don't apply the values.
This is the styles.xml:
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:textViewStyle">#style/TextView</item>
</style>
<style name="TextView" parent="android:Widget.TextView">
<item name="android:layout_margin">8dp</item>
<item name="android:padding">0dp</item>
<item name="android:textColor">#87000000</item>
<item name="android:textSize">18sp</item>
</style>
in my activity i use a Listview with Custom Adapter but the TextViews from my item.xml did'nt have a margin:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:orientation="vertical"
tools:context="de.resper.enigma2chromecast.mainLive" >
<TextView
android:id="#+id/channelName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="#string/hello_world" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:id="#+id/channelLine1"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
</LinearLayout>

what ever you designed xml, put in android manifest file in application theme
<application android:theme="#style/CustomTheme">

Dividers style does not work

The code below is a layout that I am inflating to the main layout (attached on the root):
getLayoutInflater().inflate(R.layout.event_buttons, (ViewGroup) helperView, true );
setContentView(helperView);
However although having style="?android:attr/buttonBarStyle" the dividers are not displayed and they are transparent. There are "gaps" between the buttons but their color is transparent. If I configure the background of the linearlayout to a solid color, that color visible inside the gaps. Now it has a default background is #null as shown in the Graphical Layout.
<!-- This is my layout/event_buttons.xml -->
<?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:id="#+id/eventDisplayButtons"
style="?android:attr/buttonBarStyle" // the style
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom"
android:divider="?android:attr/dividerHorizontal" // this is not really necessary
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/open_link_button"
style="?android:attr/buttonBarButtonStyle" // child style
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/btn_white"
android:drawablePadding="-2dp"
android:drawableTop="#drawable/ic_menu_link"
android:paddingTop="3dp"
android:text="#string/open_link"
android:textColor="#color/darkGrey"
android:textSize="#dimen/event_buttons_text_size" />
//two more buttons here
</LinearLayout>
I was thinking if my style/theme affects the dividers and they become transparent:
<style name="MyTheme.TranslucentActionBar" /* the parent of MyTheme is android:Theme.Holo.Light */>
<item name="android:actionBarStyle">#style/MyTheme.ActionBar.Transparent</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="MyTheme.ActionBar.Transparent" parent="#android:style/Widget.Holo.Light.ActionBar>
<item name="android:background">#android:color/transparent</item>
<item name="android:icon">#android:color/transparent</item>
</style>
Assuming I have this theme how can solve this problem with the dividers?

Categories

Resources