I have the app with 5 tabs in TabLayout. I decided to initialize it in MainActivity. Each tab is a fragment and each of them has its own ToolBar, so I decided to initialize toolbars in every fragment separately. But the problem is that my toolbars now are under the TabLaout header. I want to ask how it's possible to move them down or maybe I should organize in some another way?
MainActivity:
<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"
tools:context=".activity.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs" />
</RelativeLayout>
Example of fragment:
<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"
tools:context=".activity.MainActivity">
<View
android:id="#+id/transparent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="90"
android:background="#20000000"
android:visibility="gone" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Your Wi-Fi is online">
<Button
android:id="#+id/btn_pause"
android:layout_width="90dp"
android:layout_height="36dp"
android:layout_margin="17dp"
android:layout_gravity="end"
android:background="#color/white"
android:text="#string/pause"
android:textColor="#color/midPurple"
android:textSize="14sp" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
TabLayout inisialization:
private void initUIComponents() {
mViewPager = findViewById(R.id.viewpager);
mTabLayout = findViewById(R.id.tabs);
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
mViewPager.setAdapter(new MenuCategoryAdapter(getSupportFragmentManager()));
mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
mTabLayout.getTabAt(i).setIcon(R.drawable.homeicon);
}
}
Example of ToolBar initialization:
private void initUIComponents(LayoutInflater inflater, #Nullable ViewGroup container) {
mRootView = inflater.inflate(R.layout.fragment_home, container, false);
mToolbarHome = mRootView.findViewById(R.id.toolbar_home);
mBtnPause = mRootView.findViewById(R.id.btn_pause);
if (mToolbarHome != null) {
((AppCompatActivity) getActivity()).setSupportActionBar(mToolbarHome);
}
mBtnPause.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
pauseWiFi(mToolbarHome, mBtnPause);
}
});
}
How does it looks like:
One way is you set your ViewPager's height to math_parent, and put TabLayout over your ViewPager with 80dp of top margin to reserve space for fragments toolbar
<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"
tools:context=".activity.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</RelativeLayout>
And in your fragment, put fake and empty TabLayout under toolbar to reserve the TabLayout's space and under it you can put your other views
<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"
tools:context=".activity.MainActivity">
<View
android:id="#+id/transparent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="90"
android:background="#20000000"
android:visibility="gone" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Your Wi-Fi is online">
<Button
android:id="#+id/btn_pause"
android:layout_width="90dp"
android:layout_height="36dp"
android:layout_gravity="end"
android:layout_margin="17dp"
android:background="#color/white"
android:text="#string/pause"
android:textColor="#color/midPurple"
android:textSize="14sp" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_home"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/fake_tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<!-- Your other views -->
</LinearLayout>
</RelativeLayout>
Related
I've implemented a tab layout in my app. And have created 3 fragments for each tab. All fragments contain a single TextView and it is a child of NestedScrollView. Everything works as expected until the string passed to the TextView is large enough and needs to be scrolled for viewing it completely. At that time, the text inside TextView hides behind the tabs.
I've tried the answers provided here: Fragment from View Pager hiding behind Tab Bar
to no avail.
Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".PrayerActivity">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.BuddhaPoojapathMarathi.AppBarOverlay">
<!--<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />-->
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And here's one of the fragments:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Fragment_1">
<TextView
android:id="#+id/frag1_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/text_margin"
android:textSize="#dimen/text_medium"
android:layout_gravity="center"
android:textAlignment="center"
android:textColor="#color/black"
android:paddingTop="48dp"
android:text="#string/buddha_vandana_mar" />
</androidx.core.widget.NestedScrollView>
As seen in the image the first part of the text is hiding behind the tabs.
Update:
PrayerActivity.java
public class PrayerActivity extends AppCompatActivity {
private ActivityPrayerBinding binding;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
int num = getIntent().getIntExtra("num", 0);
Bundle bundle = new Bundle();
bundle.putInt("num", num);
Log.d("myInt", String.valueOf(num));
binding = ActivityPrayerBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager(), num);
ViewPager viewPager = binding.viewPager;
viewPager.setAdapter(sectionsPagerAdapter);
TabLayout tabs = binding.tabs;
tabs.setupWithViewPager(viewPager);
}
}
I would suggest you to use RelativeLayout instead CoordinatorLayout. First, Change the layout to RelativeLayout. Second, add attribute id to the AppBarLayout. Last, add attribute layout_below to ViewPager. You can see at below. I did not test the code.
<?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="match_parent"
android:orientation="vertical"
tools:context=".PrayerActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.BuddhaPoojapathMarathi.AppBarOverlay">
<!--<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />-->
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
just put this line in NestedScrollView
android:fillViewport="true"
Please use below code.
<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="match_parent"
android:orientation="vertical"
tools:context=".activity.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:background="#color/black"
android:layout_gravity="center"
android:layout_height="#dimen/_40sdp">
<ImageView
android:id="#+id/back_btn"
android:layout_width="#dimen/_26sdp"
android:layout_height="#dimen/_26sdp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginLeft="#dimen/_8sdp"
android:src="#drawable/back_arrow"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:layout_toRightOf="#+id/back_btn"
android:layout_marginLeft="#dimen/_10sdp"
android:padding="#dimen/_8sdp"
android:text="#string/my_listing_text"
android:textSize="#dimen/_14sdp"/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/_1sdp"
android:background="#color/dark_gray"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
app:tabIndicatorColor="#color/white"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
i have this coordinator layout. Currently, i when i collapse the image, the supportActionBar title gets shown at the top. But, how do I have a textView in the toolbar AND menu options show up in my toolbar, when i collapse the image?
Here is my layout not collapsed.
I want my toolbar textview and my optionsMenu "Edit" button to show up whether the toolbar is collapsed or not.
And this is when i collapse the image.
So my supportActionBar text shows up when image is collapsed. I dont want it appearing infront my image when the image is not collapsed.
Here is my xml code:
<?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"
tools:ignore="RtlHardcoded"
android:focusable="true"
android:focusableInTouchMode="true"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--ViewPager goes here-->
<android.support.v4.view.ViewPager
android:id="#+id/image_viewpager"
android:layout_width="match_parent"
android:layout_height="256dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="parallax"
android:id="#+id/card_info_polished_toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Card Info"
android:textColor="#color/white"
android:textSize="20dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activity_5a_card_info_final_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
And here is my activity java code:
In onCreate i have:
myToolbar = (Toolbar) findViewById(R.id.card_info_polished_toolbar);
setSupportActionBar(myToolbar);
//getSupportActionBar().setDisplayShowTitleEnabled(false);
//IF you use setSupportACtionBar, then you cannot use a textView for the title, the title is hidden. This is the only way to change it...
Spannable text = new SpannableString("Sample Card info");
text.setSpan(new ForegroundColorSpan(Color.WHITE), 0, text.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
getSupportActionBar().setTitle(text);
getSupportActionBar().setHomeButtonEnabled(true);
And then for my edit button on the toolbar i have:
public void editButtonClick(MenuItem item)
{
Intent i = new Intent(CardInfo_Polished.this, EditCardInfo.class);
startActivity(i);
}
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu_card_info,menu);
if(Global_Class.getInstance().getValue().clickedCard.getCreatorName() == null || Global_Class.getInstance().getValue().user.getUsername() == null)
{
menu.getItem(0).setVisible(true);
}
//Code for later.
/*if(Global_Class.getInstance().getValue().cardClicked.getUser_id().equals(Global_Class.getInstance().getValue().currentUserOUTDATED.getUUID()))
{
menu.getItem(0).setVisible(true);
}
else
{
menu.getItem(0).setVisible(false);
}*/
return true;
}
Use like this:
<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">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Toolbar Title"
android:textColor="#ffffff"
android:textSize="22dp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
I actually figured out. All you have to do is add this one line of code. inside toolbar.
app:layout_collapseMode="pin"
What i had was this:
app:layout_collapseMode="collapse"
This is an Example ...U can figure out using this...Hope if u can...else u can ask me
Layout of app bar layout only rest node added
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="#dimen/app_bar_height_new"
android:layout_width="match_parent"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TransparentText"
app:collapsedTitleTextAppearance="#style/WhiteText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_main_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:maxWidth="500dp"/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_centerInParent="true" />
<com.zl.reik.dilatingdotsprogressbar.DilatingDotsProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:radius="5dp"
android:color="#ffffff"
app:dd_numDots="3"
app:dd_scaleMultiplier="1.5"
android:layout_centerInParent="true"
app:dd_animationDuration="500"
app:dd_horizontalSpacing="4dp"
/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="#style/Base.ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
In Activity:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbarLayout.setTitle("Enter the title Here");
Please check below code
<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:background="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/scale_300dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.v4.view.ViewPager
android:id="#+id/mPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bottom_shadow" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical|end"
android:orientation="horizontal"
android:padding="#dimen/scale_10dp">
<!--<android.support.v7.widget.AppCompatTextView-->
<!--android:id="#+id/tvBidPrice"-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_weight="1"-->
<!--android:text="Forging Scrap"-->
<!--android:textColor="#color/white"-->
<!--android:textSize="17sp"-->
<!--android:textStyle="bold" />-->
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tvCountry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:drawableLeft="#drawable/india"
android:drawablePadding="#dimen/scale_10dp"
android:padding="#dimen/scale_5dp"
android:text="#string/CountryHint"
android:textColor="#color/white" />
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/AppTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setTitle("Your Title Here")
I am using Viewpager to browse through the tabs. But my viewpager is overlapping the top of the fragment due to which the top of all the fagments are not visible. Adding padding on the top does the work but is there any better way to do it rather than giving padding on the next view.
Layout
<?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"
tools:context=".Activity.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#ffffff">
</android.support.v4.view.ViewPager>
</RelativeLayout>
Activity
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// ActionBar
final ActionBar actionBar = getSupportActionBar();
actionBar.setDefaultDisplayHomeAsUpEnabled(true);
// ViewPage: Slider that helps to create a page that we can swipe
PagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager());
ViewPager tab = (ViewPager) findViewById(R.id.pager);
tab.setAdapter(pagerAdapter);
//Tablayout : Shows the tab bar that helps to find the ViewPager page
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(tab);
}
Hope this can help you..
<LinearLayout 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:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<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="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
You have used Relative Layout and not defined android:layout_below="#id/appbar_layout" . So I have edited your code. Just copy and paste below code in your xml file. It'll solve your problem.
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appbar_layout"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/appbar_layout"
android:orientation="vertical"
android:background="#ffffff">
</android.support.v4.view.ViewPager>
</RelativeLayout>
I am trying to make this login page.
Here is my code -
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<com.app.findmystay.View.MarqueeToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="112dp"
android:background="#color/color_primary"
android:elevation="4dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ToolBarStyle" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="64dp"
android:elevation="4dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/color_accent"
app:tabIndicatorHeight="5dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#android:color/white"
app:tabTextAppearance="#style/TabText"
app:tabTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
What I am getting is this -
How to align toolbar text with the back button?
How will the layout collapse on scrolling?
First try to enable show layout bounds in developer options in settings.
Check the layout of the title (Log in or sign up in your case).
If it's the layout problem, then set title programmatically by using
Toolbar toolbar = (Toolbar) findViewById(R.id.id_of_toolbar_from_layout);
toolbar.setTitle("Login or SignUp");
And then add toolbar to layout like
setSupportActionBar(toolbar);
Better try that first. and let me know if it does not works. :)
My layout is being overlapped by the Toolbar. I have to include a 56dp padding to push it down below the toolbar, which makes it awkward to work with (and likely also means I can't use AlignParentTop). The fragment screen (activity_login.xml) is pretty much straight up stock Google-provided code.
(Without Padding)
activity_login.xml
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.myProject.LoginActivity"
android:id="#+id/login2LinearLayout"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="#+id/login"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/action_sign_in"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
app_bar_main.xml
<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=".MainActivity">
<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_main" />
<include layout="#layout/login" />
<include layout="#layout/activity_login" />
<include layout="#layout/home" />
<include layout="#layout/my_stats" />
<include layout="#layout/settings" />
<include layout="#layout/winners" />
<include layout="#layout/about" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
Put appbar code and main content code in LinearLayout with vertical orientation. That solved problem for me.
Here is my code
<?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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:layout_margin="10dp"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
This is very straight forward and easy. Just follow what I tried to say below.
You replace any View by using:
**
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
**
//Here, blackFragment is id of FrameLayout View. You replace FrameLayout View with Fragment's Layout. Note: It should be FrameLayout or FrameLayout's derivatives Layout.
My whole code is:
1) SettingsActivity.java
**
public class SettingsActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar2);
mToolbar.setTitle("Settings");
//// remove the left margin from the logo
mToolbar.setPadding(2, 0, 0, 0);//for tab otherwise give space in tab
mToolbar.setContentInsetsAbsolute(0, 0);
setSupportActionBar(mToolbar);
// Display the fragment as the main content
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
}
}
**
2) activity_fragment.xml
**
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:orientation="horizontal">
<!--scroll|snap-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/statusbar"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout
android:id="#+id/blankFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:orientation="horizontal" />
</FrameLayout>
**
You can see my Screen after I replaced FrameLayout's View with Fragment's View
I think the most simple solution in this situation is just add below line to linear_layout inside of activity_login.xml
app:layout_behavior="#string/appbar_scrolling_view_behavior"
consider using this
int horizontalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int verticalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int topMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int) getResources().getDimension(R.dimen.activity_vertical_margin) + 30, getResources().getDisplayMetrics());
LinearLayout layout = (LinearLayout) getListView().getParent().getParent();
getListView().setPadding(horizontalMargin, topMargin, horizontalMargin, verticalMargin);
and then you use setupActionBar method to inflate the toolbar