I want to have seven tabs in a tabLayout. They won't be scrollable. So, I want them to be in multiple lines. But, in fixed mode, they are all arranged in a single row. I have found some answers which are not a direct answer rather a workaround. Is there a way to do this?
A snapshot of my XML:
<com.google.android.material.tabs.TabLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorGrayStandard"
app:tabTextColor="#color/colorWhite">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/device" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/wikipedia" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/wikia" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/youtube" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/goodreads" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/imdb" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/yelp" />
</com.google.android.material.tabs.TabLayout>
Here is the documentation for TabLayout: https://developer.android.com/reference/com/google/android/material/tabs/TabLayout
TabLayout provides a horizontal layout to display tabs.
That is the first line written in the documentation and it is your answer to this question.
This is not possible with TabLayout. You can make them scrollable and that's it. There is a lot of workarounds you can create and use without problems.
In the documentation above, you can find anything that's actually possible with TabLayout. If you want to create workarounds just create fixed tabs by yourself, create listeners, and use fragments to change views you want when the tab changes.
Related
I'm trying to change the background color of a TabLayout, but so far everything I've tried doesn't work.
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#FF0000"
app:tabSelectedTextColor="#FF0000"
app:tabTextAppearance="#style/TabTextAppearance"
app:tabTextColor="#FFFFFF">
<com.google.android.material.tabs.TabItem
android:id="#+id/tab_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 1" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 2" />
I've tried using a drawable (selector) as advised here: https://stackoverflow.com/a/33230289/12221284
I've tried using a custom style extending the TabLayout style.
I've tried setting the XML attributes in my layout file directly.
Maybe I did something wrong, but nothing has worked so far and I don't understand why.
I am trying to hide a tab dynamically using databinding.
the code is
<com.google.android.material.tabs.TabItem
android:id="#+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab1" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab2" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="#{vm.flag ? View.VISIBLE : View.GONE}"
android:text="#string/tab3" />
but this is not working and all three tabs are always visible.
I tried setting it in the code as tablayout.getindex(2).visibility but this gives me NPE.
How do I do this?
You need to modify the adaterList that you pass to the viewpager. Delete the third element and it will disappear
When you need the third tab to appear, simply update the adapterList/viewPager. Check out this post
I am certainly newbie to Andorid Development, and have a knowledge of basic stuff, Relative Layout, Linear Layout, Intent, File Handling etc....
I need to build a project similar to some E-commerce app.
Here's an image of what I want.
How do I achieve the given view of products, as like in blogs or other websites.
Do I have to use List View?
And Please tell what do I have to use to make that "Add Filter Tags" section and how to achieve what I have shown in the picture.
Below is the code which will create skeleton for your UI requirement. You can modify it according to your need.
Your Activity/Fragment xml will look like :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<com.google.android.material.chip.ChipGroup
android:id="#+id/entry_chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_parent">
</com.google.android.material.chip.ChipGroup>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/entry_chip_group"
/>
</android.support.constraint.ConstraintLayout>
You Adapter xml for RecyclerView will look like:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv_product"
android:layout_width="100dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Name"
app:layout_constraintStart_toEndOf="#id/iv_product"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Information"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_name" />
<TextView
android:id="#+id/tv_more_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More info"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_info" />
<TextView
android:id="#+id/tv_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_more_info" />
<TextView
android:id="#+id/tv_tags"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tags"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_data" />
</android.support.constraint.ConstraintLayout>
You should use Chips for your Filter tag. You can add them dynamically to your chip group. Below is the link for reference.
How to use Android Chips
A ListView would be the "default" way. I would also have a look at RecyclerView (a newer incarnation of the same idea). It handles scrolling and recycling the list elements as you scroll, which are all things you don't really want to do on your own.
You'll probably have a separate layout for the individual cards, probably mostly LinearLayouts (horizontal for image -> content, and then a vertical one to hold the content, and maybe a third horizontal one to list the tags).
For the tags, you might want to take a look at Material Design "chips", but honestly that's the part of this mockup that would have me the most concerned. You can make it look however you want, but I'm not sure what your designer means there exactly. Is that a static list of filtering options? Is that on a new page? In a dialog?
EDIT: And as for the top bar, check out the standard App Bar before reinventing the wheel there.
I would definitely go with Recyclerview or this tutorial for your products(images and the product description...) and FrameLayout for the top that includes logo and stuff and finally a regular RelativeLayout for the tags.
When you switch the order of the elements, place Button after ImageButton, the z-index is not affected. I tried with other types of Views and they are positioned correctly on top of one another depending on their order in the parent FrameLayout.
I tried programmatically with View.bringToFront() without success.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</FrameLayout>
I tried to reproduce the issue: it is reproduced for me on Lollipop+ devices and isn't reproduced on pre-Lollipop.
Could you please check this?
If it is exactly the case, then the solution might be to use android:translationZ attribute (which is available since Lollipop)
Something like:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp"
android:translationZ="1dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:translationZ="2dp"/>
</FrameLayout>
And that fact that translationZ isn't available on pre-Lollipop would not matter (and attribute would be ignored), as there is no such issue.
Hope it helps
How make action float menu with android.support.design
I maked layout with these buttons, and then include to fragment layout. But maybe i make something wrong... And you have some ideas to help me.
fab.xml
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab_menu"
android:layout_margin="16dp"
android:src="#drawable/ic_add" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab_done"
android:layout_margin="16dp"
android:src="#drawable/ic_done" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab_cancel"
android:layout_margin="16dp"
android:src="#drawable/ic_cancel" />
And how make animation, when I click at the button to show another buttons?
There are lots of cool libraries that were designed to make it easy to create different FABs.
library by futuresimple
library by Clans
and library by makovkastar