tab fragment - how to? - java

Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.appmaster.akash.messageplus.HomeScreen"
tools:showIn="#layout/app_bar_main">
<!-- Note : This is the container Frame Layout for all the fragmetns-->
<FrameLayout
android:background="#color/black"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainFrame">
<!--<FrameLayout-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--android:id="#+id/frame">-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="5dp"
android:background="#color/black"
app:tabTextColor="#color/white"
app:tabSelectedTextColor="#color/grey"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_scrollFlags="scroll|enterAlways"
tools:ignore="UnusedAttribute" />
<RelativeLayout
android:layout_below="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"></android.support.v4.view.ViewPager>
</RelativeLayout>
</RelativeLayout>
</FrameLayout>
<!--</FrameLayout>-->
How do i change the background color of the selected tab???
I know how to change the selected text color like in the code... but how do i do it to background color? because im using icons instead of text and i dont think i can change the icon color so i just want to change the background color of the selected tab

Related

send tab layout on top

I want my tab layout to appear on top of my screen. Currently it is on the bottom on the screen. Tried a few ways didn't work. How can I make it go on top of my screen.
Code for the xml file
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".kanbanManagement">
<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">
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="0dp"
android:id="#+id/viewPager2"
android:layout_weight="1" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabGravity="fill"
app:tabIndicator="#drawable/tab_indicator"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorGravity="stretch"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white" />
</LinearLayout>
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment" />
</FrameLayout>
Hello just put the tabs tag on the top of view pager like this :
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabGravity="fill"
app:tabIndicator="#drawable/add_signature_icon"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorGravity="stretch"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white" />
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="0dp"
android:id="#+id/viewPager2"
android:layout_weight="1" />

CoordinatorLayout with full screen background image

I tried to get this result by CoordinatorLayout but unable to set fullscreen image on background which expand on whole screen same like in image. I tried several ways like putting LinearLayout inside CollapsingToolbarLayout but not getting close to layout what i want to get.
I tried several way to achieve this but not getting anywhere.please help
<?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"
android:clickable="true"
android:focusable="true"
android:fitsSystemWindows="true"
android:background="?android:attr/colorBackground"
android:id="#+id/viewuserProfileMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:src="#drawable/baby"
android:scaleType="centerCrop"
app:layout_collapseParallaxMultiplier="0.7"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/diagonal_cut_layerlist">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/primary"
/>
</RelativeLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
What you should do is make another layout set it's background color and have another RelativeLayout in that. Then include you current layout into that one and it will be easy to handle for you.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clickable="true"
android:focusable="true"
android:fitsSystemWindows="true"
android:background="?android:attr/colorBackground"
android:id="#+id/viewuserProfileMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<include layout="#layout/yourCurrentLayout except it's background"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

How to pin linearlayout below toolbar while scrolling

I want to achieve something like the image shown below
I would like to paste a linearlayout under the toolbar and make it appear at a given moment during the scroll
You can try this layout
Original Layout
<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_layout"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
.
.
</LinearLayout>
</ScrollView>
<LinearLayout>
You may use collapsing toolbar or customize according to needs.
Refer links below.
Android: Collapsing Linearlayout instead of Collapsing Toolbar
https://medium.com/#martinomburajr/android-design-collapsing-toolbar-scrollflags-e1d8a05dcb02
https://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
http://www.zoftino.com/collapsing-toolbar-layout-example
Check this, I've added comments in code for your items
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- YOUR ITEMS BETWEEN TABBAR AND APPBAR-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- YOUR CUSTOM TABBAR-->
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- YOU MAIN CONTENT-->
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

How to position Dot Indicators to be at the bottom of the image slider?

I created a image slider using ViewPager and also added dot indicators to make the slider more interactive. However the dot indicators are below the images and I want the dot indicators to be on bottom overlapping the images.
My code is given below and I used the layout:weight element in layouts so the height of images changes according to the screen size.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
tools:context="com.example.navigationdrawerfragments.aboutSLFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="4.5">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:id="#+id/SliderDots"
android:layout_below="#+id/viewPager"
android:orientation="horizontal"
android:gravity="center_vertical|center_horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5.3">
</LinearLayout>
</LinearLayout>
Current Result
Expected Result
Try something like this....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
tools:context="com.example.navigationdrawerfragments.aboutSLFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4.5">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/SliderDots"
android:layout_below="#+id/viewPager"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_width="match_parent"
android:layout_height="30dp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5.3">
</LinearLayout>
</LinearLayout>
This is most optimized XML layout for your case
You should use relative layout and can modify your XML like this, you can avoid using weights. As weight won't work with relative layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="#+id/SliderDots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="25dp"
android:orientation="horizontal"/>
</RelativeLayout>
You can use FrameLayout for this kind of view .You can overlap the slider dot over images .
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="#+id/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="#+id/SliderDots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="25dp"
android:orientation="horizontal"/>
</FrameLayout>

Framelayout doesn't show up in main activity

This is my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<include android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_below="#+id/toolbar">
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>
</LinearLayout>
My toolbar.xml:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
The fragment I send to fragment_content:
<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:orientation="vertical"
android:background="#ffffff">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe_container"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Listview -->
<ListView
android:id="#+id/lvEvent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:divider="#D0D0D0"
android:dividerHeight="0.5dp"
android:showDividers="middle"/>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
Now the toolbar show up, I can do actions with it but there is nothing in my Framelayout? If I delete the include (toolbar) then I can see the content in my Framelayout. Anybody know what I'm doing wrong?
Given that you have set the height of your toolbar to wrap_content, I assume you want a vertical layout, but your top level LinearLayout is set to horizontal. Change the orientation to vertical.

Categories

Resources