Develop Reference

Topmost bar with battery and network not showing up

The topmost bar that has battery and network is coming as plain white bar.
Please help in fixing this.
Thanks
It's coming like this
It should be like this
here is my xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="?attr/actionBarTheme"
android:minHeight="?attr/actionBarSize"
android:id="#+id/toolbar2"
android:layout_weight="1" />
</android.support.design.widget.AppBarLayout>
<!-- Editext for Search -->
<EditText android:id="#+id/inputSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search products.."
android:inputType="textVisiblePassword"/>
<!-- List View -->
<ListView
android:id="#+id/list_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>

A fix that has worked for me is to switch to CoordinatorLayout. ie
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your contents here -->
</android.support.design.widget.CoordinatorLayout>
Move your layout contents inside the CoordinatorLayout. Also android:fitsSystemWindows="true" is necessary, couldn't get it work without fitSystemWindows set to true. Hope it helps.

LinearLayout isn't shown when included in content layout

I have a activity_pic.xml layout which includes content_pic.xml to define the layout of my app. The activity_pic.xml is below:
<?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.example.olivia.myapplication.PicActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_pic" />
</android.support.design.widget.CoordinatorLayout>
content_pic.xml is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
When I include the line <include layout="#layout/content_pic" /> within the AppBarLayout (that is, I move it up two lines) the button appears, and all the functionality of the button works. However when I put it after that, the button does not appear, and all I can see is the 'App Bar' bit of the layout.
Ok so the picture below shows how I would like it to look (and how the design view shows content_pic.xml)
And here is what it actually looks like
However, when I put the <include layout="#layout/content_pic" /> into the AppBarLayout I can see the button, as shown in the image below.
I have tried taking the content of content_pic.xml and including it directly instead of using the include statement, this still does not appear.
I've run out of ideas here - can anyone suggest what might be going wrong?

AppBarLayout works good if you us NestedScrollView or RecyclerView
so I suggest you change your content_pic.xml TO.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
I hope this will Help.
EDIT
You Just need to Change your content_pic.xml to this
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
<!-- Importent -->
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

How to get a border at the bottom of my toolbar?

I want to add a gray border at the bottom of my white toolbar so that it's distinctly separated from the main content. I'm setting up my toolbar like this:
<?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"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/pick_root_layout">
<android.support.v7.widget.Toolbar
android:id="#+id/pick_toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/Toolbar.White"
android:background="#color/white">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/conversation_list">
</ListView>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
I need to add a small gray line at the bottom of the toolbar that also scrolls with it when I move. How can I do this? I'd like to avoid making a custom layout if possible.

If you are trying to add a drop shadow type effect that will stay attached to the toolbar an easy way to get this is to wrap your SwipeRefreshLayout with a FrameLayout and place a foreground on the FrameLayout.
<?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"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/pick_root_layout">
<android.support.v7.widget.Toolbar
android:id="#+id/pick_toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/Toolbar.White"
android:background="#color/white"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="#drawable/bottom_shadow">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/conversation_list" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
</LinearLayout>
Shadow 9 patch ->

Remove extra padding top gridview

I'm an activity that holds a gridview with movie posters and some overlay text with the movie title.
I made an extra layout for tablets that also displays details about the selected movie in the same activity.
The problem is that when I use the tablet in landscape mode, for some reason the first row of elements expands vertically, occupying all the available space.
Here's a picture so you know what the problem is:
http://postimg.org/image/rgwakvlq3/
This is my layout file for tablets:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/container"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity" tools:ignore="MergeRootFrame">
<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.example.madelenko.movierating.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<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="match_parent"
android:baselineAligned="false"
android:divider="?android:attr/dividerHorizontal"
android:orientation="horizontal"
tools:context="com.example.madelenko.movierating.MainActivity">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:numColumns="#integer/column_count"
android:gravity="center"
android:verticalSpacing="#dimen/grid_vert_spacing"
android:stretchMode="columnWidth"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:id="#+id/movie_detail_container"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
And this is the relative layout that contains the elements in each movie poster:
<?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:id="#+id/grid_element_parent">
<!-- View to be populated with a movie poster-->
<ImageView
android:id="#+id/image_thumbnail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!--View to be populated with the movie's title and rating-->
<TextView
android:layout_width="#integer/image_width"
android:layout_height="#dimen/text_overlay_height"
android:background="#00000000"
android:textColor="#00000000"
android:gravity="center"
android:layout_centerHorizontal="true"
android:id="#+id/overlay_text"/>
</RelativeLayout>
The correct UI should look like this:
http://postimg.org/image/939s90085/
(But with 3 cols instead of 2)
How can I fix this?
Thank you very much.

Add this line to your ImageView:
android:adjustViewBounds="true"

How to set Custom ActionBar to fixed top position inside ScrollView layout?

How do I set this action bar in a way even when scroll the long data screen it keeps visible on the top of the screen?
toolbar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
Guys please see my update:
I tried everything but it seems that next component after actionBar is not being set after actionBar but behind it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/background_telas"
android:orientation="vertical" >
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<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/actionBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/actionBarBackgroundColor"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp" >
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#A0A09F" />
Project (eclipse):
Screen stopped:
Screen scrolled up:
Java:
Toolbar actionBar = (Toolbar) findViewById(R.id.actionBar);
actionBar.setTitle("ProTaxi Passageiro");
actionBar.setSubtitle("Cadastro");
actionBar.setTitleTextColor(Color.parseColor("#846A1A"));
setSupportActionBar(actionBar);

If you don't want the Toolbar to scroll with the content, then you have to put it outside the ScrollView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<ScollView
...>
you content here..
</ScollView>
</LinearLayout>

You can also set the layout_scrollFlags to enterAlways to get rid of the toolbar scrolling.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>

I had a similar problem with the layout behind the toolbar, setting fixed height to the Toolbar helped me, try android:layout_height="?attr/actionBarSize". Also use the layout #Floern adviced you.

To fix the layout above the bar, try doing the following. Wrap the whole activity in a relative layout. Then give an id to the Top Action Bar Relative layout. Afterwards on your scroll view, add this line layout_below/#id/top_profile_bar to have the layout scroll below the bar.
<RelativeLayout 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">
<!--Top Action Bar-->
<RelativeLayout
android:id="#+id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="50dp">
<include layout="#layout/top_actions_bar" />
</RelativeLayout>
<!--Add a layout_below/#id/top_profile_bar to have it below the bar-->
<ScrollView
android:layout_below="#id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Some Content-->
</ScrollView>
then in your top_actions_bar.xml add app:layout_scrollFlags="enterAlways" to the tool bar.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/profileToolBar"
app:layout_scrollFlags="enterAlways"
android:background="#drawable/bg_white_grey_border_bottom">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivBack"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<TextView
android:layout_toRightOf="#+id/ivBack"
android:id="#+id/top_actions_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textSize="20sp"
android:textColor="#color/colorBlack"
android:layout_marginLeft="15dp"
android:text="Scoper Settings"
/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
Hope this helps!