Develop Reference

How Can We Configure TabLayout For a Fixed Visible Number of Scrollable Tabs?

In a project, we are using the Material Design Components' TabLayout with a ViewPager. There are 14 tabs, and we want 7 of those tabs to be visible at a time in the TabLayout. The tab content is narrow enough that we are sure that 7 will not be too many, and the design team wants a consistent number of tabs showing up regardless of screen width (tabs represent days of the week).
None of the pre-defined tab modes seem to match this:
MODE_FIXED and MODE_AUTO control the number of visible tabs... by showing all of them
MODE_SCROLLABLE allows the tabs to scroll... but then we do not have control over the number of visible tabs
Is there a way of accomplishing this that does not involve non-maintainable hacks, such as using reflection to tinker with tabPaddingStart at runtime, or iterating over the tab widgets and adjusting their LayoutParams?
I have seen this question, but the explanation is lacking — in particular, it is unclear how to use app:tabMaxWidth for what should be a dynamic value at runtime. Also, that question is about the older Design Support Library, which may differ somewhat with MDC's implementation.

There several ways to show a fixed number of tabs irrespective of screen width that could work, but the desired functionality is really locked down. Most notably, if getTabMinWidth() in TabLayout were not private, an easy solution would be to override that method in a custom TabLayout view.
The following is along that lines of, and maybe exactly, what Eugen Pechanec suggested in a comment above which involves a custom view for the tabs.
First the base layout.
activity_main.xml
tabMinWidth, tabPaddingEnd and tabPaddingStart are all set to 0dp. tabMinWidth has a default value that is probably too large for our needs. The padding could be set to other than zero, but I would rather deal with that in the custom views for the tabs.
Nothing really happens with the ViewPager.
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabMinWidth="0dp"
app:tabMode="scrollable"
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp" />
</androidx.viewpager.widget.ViewPager>
</androidx.appcompat.widget.LinearLayoutCompat>
custom_tab.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Tab x"
android:textAppearance="#style/TextAppearance.AppCompat.Body2" />
<!-- If an icon is needed. -->
<!-- <ImageView-->
<!-- android:id="#android:id/icon"-->
<!-- android:layout_width="48dp"-->
<!-- android:layout_height="48dp"-->
<!-- android:scaleType="centerCrop"-->
<!-- android:src="#drawable/ic_launcher_foreground" />-->
</LinearLayout>
MainActivity.kt
Tabs are loaded into the TabLayout one-by-one setting the custom views as we go. The minimum width of the custom views is set to 1/7 of the width of the TabLayout. Setting the minimum width suffices since it is given that the width needed will always be less than or equal to 1/7 of the total width.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val tabLayout = findViewById<TabLayout>(R.id.tabs)
tabLayout.doOnLayout {
val tabWidth = tabLayout.width / 7
for (i in 1..14) {
tabLayout.newTab().run {
setCustomView(R.layout.custom_tab)
customView?.minimumWidth = tabWidth
setText("Tab $i")
tabLayout.addTab(this)
}
}
}
}
}
If custom tabs are used anyway, I think that this is a reasonable solution. However, it is little better (IMO) than iterating over the TabLayout children and setting widths.
Finally, a couple of pictures:

I had to do the same and I investigated the problem with the special attention. Spoiler: I failed - currently what you want to achieve is not possible via stock TabLayout and clean Android way.
There are hacks though)
The most adequate one is to use library that allows that - for example this
Although you mentioned it and do not wan't to do it - iterating TabLayout children changing their LayoutParams is the next by adequacy way to do it. This method utilizes the public methods Android provides and does not require usage of some not very good techniques. Speaking of which...
*Reflection start
Change tabPaddingStart or requestedTabMinWidth along with requestedTabMaxWidth. It is bad. I won't even start why. It is the most inadequate one way in this list. It is still a way to fix it though.
This one is the combination of clean Android way and TabLayout parameters app:tabMaxWidth and app:tabMinWidth and reflection. The reflection is a bit different in this case - it is almost normal(as much as a reflection can be). I propose to create an integer android resource in integers.xml called tabWidth or something (I'm sure you already know where I am going) and on application start you replace it via reflection with the value of your screenWidth divided by 7(or less depending on your paddings).
*Reflection finish
There is one more way and it is Android clean but quite inadequate nevertheless. You can use a combination of ViewPagers and/or fragments. The easiest one is a ViewPager of two ViewPagers and two TabLayouts each with 7 pages and 7 tabs accordingly. You might need to adjust gestures handler though. And there can be many more combinations.
I will not include a way of you writing the TabLayout by yourself with help of RecyclerView and SnapHelper because it always is an option to write something by yourself in Android... and waste tremendous amount of time.
I know that it is not an answer. Moreover it is rather list of how NOT to do stuff in Android but sometimes we need to choose the dark side...
Hope it helps though.

Android ViewPager - How to show three panels at a time

I have an android project that my client is requiring me to have a ViewPager similar to the image below.
Showing three panel at a time. The current selected panel will show full at the center, the panel before the selected one (if there is) will be shown half, and the panel after the selected one will be shown in half as well.
Do you guys have any idea in how to do this? Still new in Android an im slowly getting lost when it comes to this kind of stuff?
Here is the code that i have so far that will only show one panel.
ViewPager viewPagerShopPortfolio = (ViewPager)
mShopPortfolioImageAdapter = new ShopPortfolioImageAdapter(getChildFragmentManager(), portfolioListingModelList);
viewPagerShopPortfolio.setAdapter(mShopPortfolioImageAdapter);
And this is how my app looks like right now which only shows one panel.

Well, i found a second solution for this using the following codes:
XML:
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerShopPortfolio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:clipToPadding="false"
android:paddingLeft="60dp"
android:paddingRight="60dp"
android:background="#color/colorFontWhite" />
Java:
ViewPager viewPagerShopPortfolio = (ViewPager) view.findViewById(R.id.viewPagerShopPortfolio);
viewPagerShopPortfolio.setPageMargin(30);
Here is the following result:

You can override getPageWidth method of PageAdapter. For example return 0.7f to have all child pages span only 70% of the ViewPager's width.
Or you can use library:
https://github.com/Pixplicity/MultiViewPager
More information about that lib you can find in [that][2] answer.

Android - White space on the right and the left of a LinearLayout

When I add element into a layout(in this case a LinearLayout), there is a white space on the two side of the element, but the attribute layout_width is "match_parent". Why?
Here's a screenshot:
http://s32.postimg.org/o4vr8kzbp/device_2016_07_30_001720.png
The code:
<?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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#color/blue"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>

I found this lines somewhere on this site and it might be worth checking;
This is possibly because you are using the auto-generated layout files in Android Studio when starting a new project, which by default adds a margin of 64dp to tablet screens (the value found inside values-w820dp\dimens). – PPartisan 6 hours ago
Maybe you should check your layout's parent's layout in the host activity for one more time.

It is possible that the root layout does not fill the parent or that the child you are adding has a margin, to know exactly whats going on use the android tool called DDMS or Android Device Monitor (you can launch it from Eclipse or Android Studio) then click on Dump View Hierarchy. This will give you details on the size, padding, margin and other properties of every view on the view hierarchy

You should to check your code, may be you update margins of layout at your classes.
And try to check layouts of home activity, may be they are contains layout_marginLeft(layout_marginStart) and layout_marginRight(layout_marginEnd).
Also parent layouts may contains any white views on the sides or parameter layout_weight with specific value.

How to make a swipe view screens without tab layout in android?

I am trying to figure out how to make a swipe view without a tab layout.
In the figure above,
1. I want to make a swipe view that can navigate page left and right.
2. Icon 1 is a global menu that needed to be there all the time while swipping.
3. Icon 3 is a bottom bar. How can I make like that way?
Any kind of suggestions and tutorial links would be appreciated. Thanks in advance.

i don't have any links for the same,but still i will tell you the very simple logic to create:
1.First remove the title bar using
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
2.Use the following Structure
<RelativeLayout>
<ViewPager android:layout_height="fill_parent"
android:layout_width="fill_parent"> //full screen
<RelativeLayout android:id="#+id/header"> -->for header
android:layout_alignParentTop="true"
</RelativeLayout>
<RelativeLayout> -->for inicators
android:below="#+id/header"
</RelativeLayout>
<RelativeLayout> --> for footer
android:layout_alignParentBottom="true"
</RelativeLayout>
</ViewPager>
</RelativeLayout>
3.now make the images for header and footer and set as background.
4.for view pager indicator go Through This Post.just download it and import in your eclipse and set as a lib in your project. how to use circle pager indicator Check My Answer.
and you are done now!!

You can simply use for example a ViewPager as explained in the official documentation because it's not mandatory to have tabs.
http://developer.android.com/training/animation/screen-slide.html
There's a full example available in that link.
If you need also to display dots for your slides, you can take advantage of this library as pointed out by other users: http://viewpagerindicator.com/

Check this library I think this is what you need
and you can customize it as per your needs
https://github.com/pakerfeldt/android-viewflow

ActionBar overlay with GridView padding or custom GridView to show entire first image?

I have an activity with a GridView inside it. The ActionBar is set to overlay mode.
Right now, you can only see half of the first image because the ActionBar cuts it in half.
How do I add padding to the interior of the GridView so that it initializes in such a way that you can see the entire first image? Or is there another way? For example, how would I go about extending GridView to create one that has a built-in configurable, dynamic gap at the front?
example (although ListView instead of GridView): reddit is fun app: https://play.google.com/store/apps/details?id=com.andrewshu.android.reddit
edit: I'm hiding the ActionBar whenever the user scrolls down at a certain rate or past a certain level.

Use a ViewTreeObserver.OnGlobalLayoutListener in your Activity or Fragment to determine the number of columns your GridView will display (presuming it varies based on screen size and orientation), then use that number in your Adapter implementation. In getView(), if position is less than the number of columns, return an empty view whose height matches the Action Bar, otherwise bind your data as you would normally.
There is an excellent example that does exactly what you want in Google's "Displaying Bitmaps Efficiently" sample application: https://developer.android.com/training/displaying-bitmaps/display-bitmap.html
Here is the relevant source code:
https://android.googlesource.com/platform/development/+/master/samples/training/bitmapfun/src/com/example/android/bitmapfun/ui/ImageGridFragment.java

Try adding android:layout_marginTop="?android:attr/actionBarSize" to the parent of your GridView, or the GridView itself if it doesn't have one.
This will push your layout down so that it rests below the ActionBar.
Edit
You may want to conside using a ListView instead of a GridView. Reason being, you can easily achieve that effect by creating a fake header and then calling ListView.addHeaderView. You can't do the same with a GridView. What you're talking about can definitely be done with a GridView, but it will require you to subclass it and modify it quite a bit.
Header
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize" />

Having ActionBar in overlay mode, the following works for me:
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize"
android:clipToPadding="false"
android:numColumns="auto_fit"
android:columnWidth="120dp"
android:verticalSpacing="8dp"
android:horizontalSpacing="8dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:id="#+id/gridLibrary" />
The most important lines here are: android:paddingTop and android:clipToPadding.
In my application, when I open an activity with the gridview above, the first row is fully visible. Then, when I scroll down, the ActionBar hides and the gridview fills up all the screen.