Android Appbar with Tablayout makes app outside the screen?

Question

I followed this to Add Tablayout to My activity

In the Same one I have Changed HomeActivity

from public class HomeActivity extends Activity To public class HomeActivity extends AppCompatActivity

Now I am getting Like this

I want to Display Options menu in action bar But I am getting Two Action/App Bar layout

And the Complete layout is missing

1. All I need that Action bar and App Bar should combine
2. Some text Is missing I mean Its going out side of the Screen Even When I remove android:fitsSystemWindows="true"If I keep this Every thing Is fine It is inside the Screen But its beside the Status bar But If I remove this Bottom Part of App is Missing

In my Previous apps everything is fine But due to Tablayout I am getting Lot of Issues... Can Any one suggest me on this kind...

Update

With Reference of user@sanatchandravanshi I haved added <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> and Also I have Added

I have Added This in my Code

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Now Every thing Is fine But My app is overlapping outside the screen...

This is my XML in that If I keep this android:fitsSystemWindows="true"

I am getting Full app screen But Top page is Hiding beside status bar like this

But If I remove android:fitsSystemWindows="true" Bottom side is overflowing outside the screen....

Like the above Image

Can Any one suggest me How to Get app to fit the same screen with Statusbar,Appbar,Tablayout...

Answer 1

Please keep your code as

public class HomeActivity extends AppCompatActivity

and just add below line to your style.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

then best practice is to use Toolbar and customize your actionbar as you want.

Edit:

User like this:

public class DetailActivity extends AppCompatActivity {
Toolbar mToolbar;
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gallery_detail);
    mToolbar = (Toolbar) findViewById(R.id.upload_gallery_app_bar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_SHOW_TITLE);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);}

create menu and use Menu like this:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_gallery_detail, menu);
    return true;
}}

Update

Put a LinearLayout (instead of CoordinatorLayout ) And Change your XML file like this

Answer 2

You need to put no AppTheme.NoActionBar theme in manisfest for AppCompatActivity Like this :

AndroidMenifest.xml

           <activity
                android:name="view.activities.HomeActivity"
                android:launchMode="singleTask"
                android:screenOrientation="portrait"
                //Change Theme to this
                android:theme="@style/AppTheme.NoActionBar">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />

                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>

Put this theme in style

style.xml

  <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>