-1

I want to have the following look: enter image description here

I am confused whether I need to do it using TabLayout with images as the page title, or it should be done via a custom App Bar? (Or it can be achieved by either way?).

Currently I have the following:

enter image description here

But you can see it's too simple, I want it to be more "designed". You can see in my example, not only does it have image instead of title, but also the image gets colored. (There is no page title with the app name, so there is more space for the rest of the stuff)

I am confused with all the PagerAdapter and TabLayout and LayoutManager. I would love to see a working example of what I'm trying to achieve. I know I did not provide any code, it's because I really don't know how to start to get it done

sixcookies
  • 357
  • 1
  • 7
  • 22
pileup
  • 1
  • 2
  • 18
  • 45

1 Answers1

0

First, this article might help. It will show you how to make a tab layout with just icons. It is very useful because it shows you step by step how to create it. Follow Section 1 carefully. For Section 2 (Fixed Tabs) and Section 3 (Scrolling Tabs), you'll have to pick one. Then jump down to Section 5: Tabs with only icons.

Then, because you don't want the title, you could make it a No Action Bar Layout in the values/styles.xml file. The key bit is to change the ActionBar to NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...

Ensure that the style of your activity follows that particular style.

Then, you'll need to change the background colour of the tab layou. The background of the tabs can also be a different colour by setting the attribute in the xml file with your tabs to a different colour. 

<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>

Then in the selector res/drawable/tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

Refer to this article to see how to change the background colour.

sixcookies
  • 357
  • 1
  • 7
  • 22