I have made a design for TabLayout, but I can't make the size fit with 2 different screens. I use two different screens like tablet and android phone.
How can I fix it?
This is my XML file :
<?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="com.inducesmile.androidmusicplayer
.fragment.LibraryFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/colorMaroon">
<ImageView
android:layout_width="match_parent"
android:layout_height="102dp"
android:src="#drawable/logo1"/>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabTextColor="#color/colorWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorMaroon"
app:tabMode="fixed"
app:tabIndicatorColor="#color/colorGold"
app:tabTextAppearance="#style/custTab"
app:tabSelectedTextColor="#color/colorGold"
android:layout_gravity="top"/>
<android.support.v4.view.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>
I want to make 4 menu/fragments with TabLayout for the details, my XML was worked but the problem is the size not optimize if I run in tablet screen.
You need to make the layout responsive in order to view it in tablet, mobile or any other android based mobile. To make the layout responsive, we use Constraint Layout.
Related
My recycler view lies under my toolbar, as you can see from the first picture. However, I have a scrollbar on the right side of it. I have to give a margin-top to this scrollbar. I have tried with giving style. And I know about clip padding with padding-top and padding-bottom, however, I need this exactly. Are there any ways to make it real?
This is my problem
The result that I want
P.S. I know that it is not the best practice. I would appreciate any help. It is one of my first questions, don't judge me so strong. :)
My main XML file
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:background="?attr/background1"
android:keepScreenOn="true"
tools:context=".ui.main.HomeActivity">
<androidx.viewpager.widget.ViewPager
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/pager" />
<include layout="#layout/toolbar_sura_detail" />
<include layout="#layout/player" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My Fragment XML inside ViewPager
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="?attr/background1">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/kuranDetailList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="false"
android:fitsSystemWindows="true"
android:scrollbarSize="2dp"
android:scrollbarThumbVertical="#drawable/thumbforrecycle"
android:scrollbars="vertical"
android:orientation="vertical" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Try using this structure in your main XML and add scrolling layout behaviour for ViewPager
<androidx.coordinatorlayout.widget.CoordinatorLayout...
<com.google.android.material.appbar.AppBarLayout...
<androidx.appcompat.widget.Toolbar...
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/pager"
app:layout_behavior = "com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
I have a very simple question that for some reason im not being to able to implement.
I have a RecyclerView which is being filled only once upon its activity creation. I want to add another view below it.
If the RecyclerView doesnt fill the entire screen length (usually in portrait mode) the view should be positioned directly below it.
If the RecyclerView exceeds the screen length (usually in landscape mode) the view should still be positioned below it but should also be docked to the screen bottom.
Thats it.
I've tried position them in RelativeLayout, LinearLayout or CoordinatorLayout. With match_parent, wrap_content (with or without setAutoMeasureEnabled). With app:layout_anchor and app:layout_anchorGravity but nothing is working.
Appreciate any help.
This is an example of one of my tries:
<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.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/features_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/features_list"
app:layout_anchorGravity="bottom" />
</android.support.design.widget.CoordinatorLayout>
Try this:
Note: I'm using a ScrollView since you said the height of your RecyclerView can exceed the screen size.
<?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="vertical">
<!-- Required for the content to not exceed the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:measureAllChildren="true">
<!-- Content -->
</ScrollView>
<!-- View that needs to be under the ScrollView or
clipped to the button of the screen based on the ScrollView height -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I am working on a app in which layout structure is as follows -
Activity A - This activity is a Tab Layout Activity which uses viewpager for tabs and code is given below.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_container"
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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_marginTop="24dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</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" />
</android.support.design.widget.CoordinatorLayout>
The fragment that is added to the viewpager has a common layout for all tabs and code is given below.
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="#color/background_app"
tools:context="com.peacecorps.pcsa.safety_tools.SafetyPlanActivity">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/primary_text_default_material_dark"
android:textSize="20sp"
android:textStyle="bold"
android:text="#string/safety_plan_subtitle"/>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/safety_plan_pager"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="320dp" />
<Button
android:id="#+id/actionButton"
style="#style/NavigateButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="#string/see_action"
android:layout_marginTop="10dp" />
</LinearLayout>
As you can see this fragment again contains a viewpager.This viewpager will always be populated by a fragment below.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include android:id="#+id/text_to_show"
layout="#layout/textview"/>
</ScrollView>
where textview is
<?xml version="1.0" encoding="utf-8"?>
<!--This is the common layout used for TextViews-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primary_text_default_material_dark"
android:textSize="#dimen/abc_text_size_medium_material"
android:layout_gravity="center_horizontal"
android:background="#drawable/bg_textview_rounded_rectangle"
android:padding="#dimen/textview_padding"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:autoLink="web|email"
android:textColorLink="#color/text_color_link"
/>
Here textview contains text of different amount which is set dynamically in java for different tabs.
The problem I am facing is that only part of UI is available in landscape mode and some part is lost which is not scrollable too.Please help me, I am stuck on this for a really long time.
The problem you are facing is because you have 2 scrolling behavior. When the phone is on portrait mode it has a lot of space that 320dp height ViewPager won't be able to occupy all the spaces available, but when the phone is on landscape mode 320dp height ViewPager will occupy the whole screen so the layout will only scroll the second view pager, that means that the whole screen on landscape mode will only have access on the second ViewPager.
Remember that the ones on the bottom are the first to be accessed. That means that a view that is on the bottom have a higher z-index - Code Reference not the actual view.
While my application has been working fine on Android 4.3 - Android 6, on Android 7 the same design is not working anymore.
What should happen:
What actually happens on Nougat:
If the TextView has a margin of its height, it would show as expected on Nougat, however it wouldn't be on the bottom pre-Nougat.
This only occurs if this fragment is in a ViewPager. Otherwise it shows just fine.
XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="48dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CONTENTS HERE"/>
</ScrollView>
<TextView
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:visibility="gone"
android:text="YOU CANNOT SEE ME"/>
</FrameLayout>
Note: It does not happen on Android Studio's design view, only on the real device. This screenshots are a replica of what happens on a real device.
Anyone has an idea?
Found a fix.
I was using
<android.support.v4.view.ViewPager
android:id="#+id/vpTabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white" />
By removing the layout behavior, it was fixed.
<android.support.v4.view.ViewPager
android:id="#+id/vpTabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" />
Hi I am a beginner for android and in my app I have to show SlidingPaneLayout at the right side but using my below code it's coming from left side.
Please help me.
How can I make it be at right side?
And second my requirement is my SlidingPaneLayout must be overlapped on Action bar but using my below xml code SlidingPaneLayout showing like my below image
please suggest me how can resolve this two problem
toolbar_layout:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
activity_sliding:-
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right">
<ListView
android:id="#+id/MenuList"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#101010"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/android_robot" />
</LinearLayout>
</android.support.v4.widget.SlidingPaneLayout>
main_layout:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<include
android:id="#+id/SlidingPanel"
layout="#layout/activity_sliding">
</include>
</LinearLayout>
In your manifest, add the following attribute to the opening <application> tag.
android:supportsRtl="true"
Then add this attribute to the opening SlidingPaneLayout tag in your layout.
android:layoutDirection="rtl"
And finally, move the tool_bar <include> element into the main content LinearLayout within the SlidingPaneLayout, and adjust the ImageView's height and weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#101010"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/android_robot" />
</LinearLayout>
Please note that the child Views of the SlidingPaneLayout will inherit the rtl layoutDirection. This may cause problems in child Views if their layout behavior is affected by the direction. For example, a horizontally-oriented LinearLayout will lay out its children starting from the right. This is easily remedied by setting android:layoutDirection="ltr" on the affected Views.
Also note that this example hard codes the direction in the layout. If you need to support both LTR and RTL layouts application-wide, you'll need to do this programmatically, accounting for the device's default direction.