タブを中央揃えにし、表示範囲を一番下まで伸ばす。

### 前提

androidについて質問します。
タブレイアウトを作成しようと思い、Tabbed Activityを選びプロジェクトを作成しました。自分がしたいレイアウトはTwitterのプロフィール画面のように、タブが半分よりも下に繰りようにしたいと思っています。(イメージは画像を参考に)
ですが、調べても出てこないし、android:layout_gravityなどの中央揃えをしても、タブの大きさを変えなければ中央に揃ってくれないので困っています。

実現したいこと

該当のソースコード

java
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".MainActivity">
8
9    <com.google.android.material.appbar.AppBarLayout
10        android:layout_width="match_parent"
11        android:layout_height="wrap_content"
12        android:theme="@style/Theme.Tab.AppBarOverlay">
13
14        <TextView
15            android:id="@+id/title"
16            android:layout_width="wrap_content"
17            android:layout_height="wrap_content"
18            android:gravity="center"
19            android:minHeight="?actionBarSize"
20            android:padding="@dimen/appbar_padding"
21            android:text="@string/app_name"
22            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
23
24    </com.google.android.material.appbar.AppBarLayout>
25
26    <androidx.viewpager.widget.ViewPager
27        android:id="@+id/view_pager"
28        android:layout_width="match_parent"
29        android:layout_height="729dp"
30        android:layout_gravity="center"
31        app:layout_anchor="@+id/view_pager"
32        app:layout_anchorGravity="bottom|center"
33        app:layout_behavior="@string/appbar_scrolling_view_behavior">
34
35        <com.google.android.material.tabs.TabLayout
36            android:id="@+id/tabs"
37            android:layout_width="match_parent"
38            android:layout_height="wrap_content" />
39    </androidx.viewpager.widget.ViewPager>
40
41    <com.google.android.material.floatingactionbutton.FloatingActionButton
42        android:id="@+id/fab"
43        android:layout_width="wrap_content"
44        android:layout_height="wrap_content"
45        android:layout_gravity="bottom|end"
46        android:layout_marginEnd="@dimen/fab_margin"
47        android:layout_marginBottom="16dp"
48        app:srcCompat="@android:drawable/ic_dialog_email" />
49</androidx.coordinatorlayout.widget.CoordinatorLayout>

行動規範の内容に同意します

回答1件

ベストアンサー

appBar とか FAB は要らなそうでしたので、画像通り(と思われる)だけでレイアウト・動作させてみました。
TabPagerManager はレイアウト質問の例としてはやり過ぎかもしれませんが…。

MainActivity.java

java
1import androidx.annotation.NonNull;
2import androidx.appcompat.app.AppCompatActivity;
3import androidx.fragment.app.*;
4import androidx.viewpager2.adapter.FragmentStateAdapter;
5import androidx.viewpager2.widget.ViewPager2;
6
7import android.os.Bundle;
8
9import com.google.android.material.tabs.*;
10
11import java.util.*;
12import java.util.function.Supplier;
13
14public class MainActivity extends AppCompatActivity {
15  @Override
16  protected void onCreate(Bundle savedInstanceState) {
17    super.onCreate(savedInstanceState);
18    setContentView(R.layout.activity_main);
19
20    FragmentManager fm = getSupportFragmentManager();
21    fm.beginTransaction().replace(R.id.upper_container, new UpperFragment()).commit();
22
23    TabLayout tabLayout = findViewById(R.id.tabLayout);
24    ViewPager2 viewPager = findViewById(R.id.viewPager);
25    new TabPagerManager(this)
26            .add("tab1", ()-> new TabFragment1())
27            .add("tab2", ()-> new TabFragment2())
28            .add("tab3", ()-> new TabFragment3())
29            .attach(tabLayout, viewPager);
30  }
31}
32
33class TabPagerManager {
34  private static class Entry {
35    final String title;
36    final Supplier<Fragment> supplier;
37    Entry(String title, Supplier<Fragment> supplier) {
38      this.title = title;
39      this.supplier = supplier;
40    }
41  }
42
43  private List<Entry> entries = new ArrayList<>();
44  private FragmentStateAdapter adapter;
45
46  TabPagerManager(@NonNull FragmentActivity activity) {
47    adapter = new FragmentStateAdapter(activity) {
48      @NonNull
49      @Override
50      public Fragment createFragment(int position) { return entries.get(position).supplier.get(); }
51      @Override
52      public int getItemCount() { return entries.size(); }
53    };
54  }
55
56  TabPagerManager add(@NonNull String title, @NonNull Supplier<Fragment> supplier) {
57    entries.add(new Entry(title, supplier));
58    return this;
59  }
60
61  void attach(@NonNull TabLayout tabLayout, @NonNull ViewPager2 viewPager) {
62    viewPager.setAdapter(adapter);
63    new TabLayoutMediator(tabLayout, viewPager, (tab,position)->tab.setText(entries.get(position).title)).attach();
64  }
65}

res/layout/activity_main.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    xmlns:tools="http://schemas.android.com/tools"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    tools:context=".MainActivity">
9
10  <FrameLayout
11      android:id="@+id/upper_container"
12      android:layout_width="0dp"
13      android:layout_height="0dp"
14      app:layout_constraintBottom_toTopOf="@id/tabLayout"
15      app:layout_constraintEnd_toEndOf="parent"
16      app:layout_constraintStart_toStartOf="parent"
17      app:layout_constraintTop_toTopOf="parent" />
18  <com.google.android.material.tabs.TabLayout
19      android:id="@+id/tabLayout"
20      android:layout_width="0dp"
21      android:layout_height="wrap_content"
22      app:layout_constraintBottom_toTopOf="@id/viewPager"
23      app:layout_constraintEnd_toEndOf="parent"
24      app:layout_constraintStart_toStartOf="parent"
25      app:layout_constraintTop_toBottomOf="@id/upper_container" />
26  <androidx.viewpager2.widget.ViewPager2
27      android:id="@+id/viewPager"
28      android:layout_width="0dp"
29      android:layout_height="0dp"
30      app:layout_constraintBottom_toBottomOf="parent"
31      app:layout_constraintEnd_toEndOf="parent"
32      app:layout_constraintStart_toStartOf="parent"
33      app:layout_constraintTop_toBottomOf="@id/tabLayout" />
34</androidx.constraintlayout.widget.ConstraintLayout>

UpperFragment.java

java
1import androidx.fragment.app.Fragment;
2
3public class UpperFragment extends Fragment {
4  public UpperFragment() {
5    super(R.layout.fragment_upper);
6  }
7}

res/layout/fragment_upper.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<TextView xmlns:android="http://schemas.android.com/apk/res/android"
3    android:layout_width="match_parent"
4    android:layout_height="match_parent"
5    android:text="upper"
6    android:textSize="30dp"
7    android:background="#c0c0c0" />