Takahiro Octopress Blog

-1から始める情弱プログラミング

Android Studio2.0: TabLayoutを使ってTabを画面最下部に配置しよう!

| Comments

Tabを最下部に配置する方法について

さて、本日は簡単な話なのですが、案外ハマったので、メモ代わりに書いておきたいと思います。
以前、Android Studio2.0: TabLayoutを使ってみよう!でTabLayoutを使ったTabデザインの実装方法について紹介させて頂きました。
そのときはTabをToolbarのすぐ下に配置していましたが、画面最下部に配置したいことも出てくることでしょう。
その方法について書きたいと思います。

TabLayoutの配置はcontent_main.xmlに下記のように書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// content_main.xml
<?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="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  app:layout_behavior="@string/appbar_scrolling_view_behavior"
  tools:context="com.example.takahiro.tablayoutsample2.MainActivity"
  tools:showIn="@layout/activity_main">

  <android.support.v4.view.ViewPager
      android:id="@+id/pager"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@+id/tabs"/>

  <android.support.design.widget.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      app:tabSelectedTextColor="@color/colorAccent"
      app:tabTextColor="#ffffff"
      android:layout_alignParentBottom="true"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"/>

</RelativeLayout>

ポイントは、

  • android.support.v4.view.ViewPagerandroid:layout_above="@+id/tabs"設定
  • android.support.design.widget.TabLayoutandroid:layout_alignParentBottom, android:layout_alignParentLeft, android:layout_alignParentStartの3つをtrueで設定

です。
これにより、下図のような配置ができているはずです。

Tabを最下部配置

なんてことはない単純な話なのですが、Android Design Support Library に惑わされてしまいました。
もっとAndroidアプリの特にUI・UX周りの開発に精進したいと思います。

と言ったところで本日はここまで。

Comments