Is There anyway to prevent repeating code in android layout xml?
for example I have layout that has a TabLayout I want to show Tablayout in in
Right to Left Direction so I use android:layoutDirection="rtl"
But as you know this is not supported under API 17 so I have to override my Code for API 17. But each time I want to modify my layout I have to repeat same actions in both xml file is there any easy and better way?
Layout for API 17:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_background_color">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<android.support.design.widget.TabLayout
android:id="#+id/promotion_type_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="center"
app:tabTextAppearance="#style/AppTabTextAppearance"
app:tabIndicatorColor="#color/cardview_light_background"
app:tabTextColor="#FFF"
android:layoutDirection="rtl"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/promotion_view_pager"
android:background="#color/main_background_color" />
</android.support.design.widget.CoordinatorLayout>
and Layout for Under API 17:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_background_color">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<android.support.design.widget.TabLayout
android:id="#+id/promotion_type_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="center"
app:tabTextAppearance="#style/AppTabTextAppearance"
app:tabIndicatorColor="#color/cardview_light_background"
app:tabTextColor="#FFF"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/promotion_view_pager"
android:background="#color/main_background_color" />
</android.support.design.widget.CoordinatorLayout>
You could export the layouts in their own file and <include/> them in the Activity/Fragment layout e.g.
<include layout="#layout/base_table" />
See the developer guide Re-using Layouts with include
Related
I'm fixing an app after the AndroidX migration, and I had a very odd bug that my ListView was not being loaded on the onCreate/onStart/onResume events:
A ListView is not displaying any data on OnCreate/OnStart after AndroidX migration
By matter of chance, I decided to "simplify" my layout and removed a LinearLayout that contained the ListView. After this change, the data was loaded properly because it seems LinearLayout was somehow blocking the getView event. However, after this change, the SearchView is being overlapped by the ListView, and I don't know how to put them in the right order (first the SearchView followed by the ListView).
This is how it looks now:
This is my code:
other_ruins.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/search_container" />
<ListView
android:id="#+id/lstOtherRuins"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:nestedScrollingEnabled="true"
android:layout_margin="8dp"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:choiceMode="singleChoice"
android:layout_below="#id/toolbar_container"
android:layout_gravity="left|start" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:adSize="SMART_BANNER"
app:adUnitId="#string/banner_ad_unit_id" />
</LinearLayout>
search_container.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<FrameLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
Regarding, the search_container I tested also using the AppBarLayout and crashed the app; therefore, it's not a solution.
Any idea how can I fix it? And why is this happening? If you know how to fix the previous issue and somehow call the getView event on the onCreate/onStart/onResume events is another solution.
You need to replace the FrameLayout in the search_container.xml with AppBarLayout as the AppBarLayout should wrap the Toolbar when you're using the Toolbar within the CoordinatorLayout
<?xml version="1.0" encoding="UTF-8" ?>
<com.google.android.material.appbar.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.appbar.AppBarLayout>
In my case, I needed to wrap my FrameLayout with a AppBarLayout make it work properly, when I didn´t do it, it duplicates the toolbar creating an strange shadow. This is the final change:
<?xml version="1.0" encoding="UTF-8" ?>
<com.google.android.material.appbar.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
</com.google.android.material.appbar.AppBarLayout>
Only one of them breaks the app.
Android Studio 3.5.1. Working with the Tabbed Activity template. I really don't understand the CoordinatorLayout stuff.
<?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=".ChecklistActivity">
<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/AppTheme.AppBarOverlay">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This works great. Using Tabs with ListView on each tab, etc.
But, at the bottom of the screen, I want to add a row of TextViews that contain different status info. (e.g. Time since start, Counts, etc.) So I put a LinearLayout at the bottom of the XML. And added a few TextViews. It shows in Design View in Studio. But at the TOP. But when I launch the App on my phone, I don't see it anywhere.
So in short, how do I work with this XML (CoordinatorLayout) to add such a 'status bar' to my view at the bottom of the screen?
Use a RelativeLayout as the first child inside the CoordinatorLayout. Have the property android:layout_height="wrap_content" and android:layout_alignParentBottom="true" to the TextViews. The rest, i.e. ViewPager and TabLayout can remain as they are.
<?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=".ChecklistActivity">
<!-- You could even use a ScrollView -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
app:tabMode="scrollable"
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"
android:layout_above="#id/lilayTextViews"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<LinearLayout
android:id="#+id/lilayTextViews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<!-- TextViews go here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 1"/>
</LinearLayout>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
HI I have main activity XML as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:background="#FFFFFF"
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="#dimen/abc_action_bar_default_height_material"
android:background="#color/fcolor"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="text"
android:textColor="#color/scolor" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="2dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/drawer_view" />
As you can see I add my main content inside the CoordinatorLayout using Include Tag
<include layout="#layout/content_main" />
in content main XML, I have
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/actvity_main" tools:context=".Main">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"/>
</RelativeLayout>
then I used different XML layout have Mapview within RelativeLayout to show in the page viewer
my problem that always there's empty space in the bottom of the screen left from the CoordinatorLayout as the below image
As you can see there's white space in the bottom, the reason why I know it's from CoordinatorLayout because when I change the CoordinatorLayout background it changes the space color
it seems like my include tag not scale in hight for all the screen, even when I set
<include
layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
still the same, what I need is to make my Mapview scale and fill the bottom of the screen
In main.xml, remove android:paddingBottom="3dp".
Try this .
try in your java code
mapView.setBuiltInZoomControls(true);
int level = mapView.getZoomLevel();
MapController mc = mapView.getController();
mc.setZoom(level + 3);
and your xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
Let me know if it works for you.
look like the problem was that I adding padding value inside the java code
Thanks for everyone help me to review the padding inside my code
In content main try removing from the RelativeLayout:
android:paddingBottom="3dp"
From the ViewPager, moving:
android:layout_below="#id/tab_layout"
to the
<include layout="#layout/content_main" />
and in the ViewPager, changing:
android:layout_height="fill_parent"
to
android:layout_height="match_parent"
My Webview is implemented in Tab Fragment. I would like to scroll web view to the bottom in fragment. Now i can't scroll down the webview in fragment. I'm using android studio to develop it. Below is my code:
Fragment XML:
<?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">
<WebView
android:id="#+id/webview"
android:layout_width="371dp"
android:layout_height="516dp"
tools:layout_editor_absoluteX="-12dp"
tools:layout_editor_absoluteY="-3dp" />
</android.support.constraint.ConstraintLayout>
Activty:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#ffffff"
android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>
<include layout="#layout/fragment_schedule" />
Alright try using RelativeLayout it will be shown full. You are facing this problem due to constraintLayout:
<?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:paddingBottom= "5dp">
<WebView
android:id="#+id/webview"
android:layout_width="371dp"
android:layout_height="516dp"
tools:layout_editor_absoluteX="-12dp"
tools:layout_editor_absoluteY="-3dp" />
</RelativeLayout >
#Umair answer pointed me int the right direction but it missed a point. I did not have to change to relative layout to fix it, my webview was throwing a warning, that it is not correctly constrained (see the red underline)
After I changed width and height to
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="1dp" />
the problem got fixed right away. Now it is possible that this problem shows up only in fragments but this is one way to fix it.
My main activity has a Toolbar within an AppBarLayout and an include below that:
<?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.zhephyr.somedaytoday.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/colorPrimaryDark"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_chrono_tab"/>
</android.support.design.widget.CoordinatorLayout>
The included layout is a RelativeLayout with a TabLayout connected to a ViewPager:
<?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"
tools:context=".ChronoSwipeViewActivity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorVariant"
android:weightSum="1">
<android.support.design.widget.TabLayout
android:id="#+id/chrono_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
app:tabMode="fixed"
android:background="#color/colorVariant"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_dialog_email"
android:layout_margin="#dimen/fab_margin"
app:fabSize="normal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"/>
<android.support.v4.view.ViewPager
android:id="#+id/chrono_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tabs" />
</RelativeLayout>
The issue I am currently running into is that The included layout sits on top of my main layout filling the entire screen. I cannot see the Toolbar because it is being covered. I want the included layout to fill only the area below the toolbar. I've tried placing app:layout_behavior="#string/appbar_scrolling_view_behavior" in both layouts and in the include with no avail. Anyone know what's going on?
Update
The activity being shown is this:
This activity should be shown within this one and with out the app title:
Change the root of your included layout to android:layout_height="wrap_content"
Currently, it is match_parent so it will take the height of the parent filling the entire screen.
You will also want to add to your <include>, android:layout_below="#id/toolbar" to place it below the toolbar. By default, RelativeLayout places Views in the top-left so adding this property will tell it to start your included layout below the toolbar.
Note the last two lines in the below code.
<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"
tools:context=".ChronoSwipeViewActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content">
in include tag of main layout
<include layout="#layout/activity_chrono_tab"
android:layout_below="#id/toolbar"/>