Android studio kotlin tablelayout

TableLayout и TableRow

Разметка TableLayout (Табличная разметка) позиционирует свои дочерние элементы в строки и столбцы, как это привыкли делать веб-мастера в теге table. TableLayout не отображает линии обрамления для их строк, столбцов или ячеек. TableLayout может иметь строки с разным количеством ячеек. При формировании разметки таблицы некоторые ячейки при необходимости можно оставлять пустыми. При создании разметки для строк используются объекты TableRow, которые являются дочерними классами TableLayout (каждый TableRow определяет единственную строку в таблице). Строка может не иметь ячеек или иметь одну и более ячеек, которые являются контейнерами для других объектов. В ячейку допускается вкладывать другой TableLayout или LinearLayout.

TableLayout удобно использовать, например, при создании логических игр типа Судоку, Крестики-Нолики и т.п.

Вот несколько правил для TableLayout. Во-первых, ширина каждой колонки определяется по наиболее широкому содержимому в колонке. Дочерние элементы используют в атрибутах значение match_parent. Атрибут TableRow для layout_height всегда wrap_content. Ячейки могут объединять колонки, но не ряды. Достигается слияние колонок через атрибут layout_span.

Если атрибуту android:stretchColumns компонента TableLayout присвоить значение «*», то содержимое каждого компонента TableRow может растягиваться на всю ширину макета.

Создаем таблицу прогноза погоды

Например, для создания таблицы прогноза погоды можно использовать следующий дизайн:

• В первом ряду показать заголовок таблицы
• Во втором ряду показать даты по типу календаря
• В третьем ряду показать наибольшую температуру
• В четвёртом ряду показать наименьшую температуру
• В пятом ряду показать графику (дождь, снег, облачность, солнце)

Показать код (щелкните мышкой)

В альбомной ориентации наша разметка будет выглядеть следующим образом

Программное создание TableLayout

Усадка, усушка, утруска

Если текст в ячейке таблицы слишком длинный, то он может растянуть ячейку таким образом, что часть текста просто выйдет за пределы видимости. Чтобы избежать данной проблемы, у контейнтера TableLayout есть атрибут android:shrinkColumns. Мы рассмотрим программное применение данного атрибута через метод setColumnShrinkable().

Для начала смоделируем ситуацию и поместим в одну из ячеек очень длинный текст, который не поместится на экран:

Теперь напишем код для усадки текста:

Книжная полка

Создадим подобие книжной полки. Нам понадобится изображение одной полки, которая послужит фоном и изображение книги (найдите сами).

Объявим две константы, которые отвечают за количество полок и количество книг на каждой полке.

Откуда на верхней полке появился кот и как он туда забрался я не знаю. Вы уж сами разберитесь с ним.

Источник

Урок 19. Как создать андроид-приложение с вкладками – TabLayout с ViewPager2 на Kotlin

На прошлом уроке мы познакомились с ViewPager2 и создали андроид-приложение, в котором можно листать экраны свайпом вправо или влево. На этом уроке добавим в верхней части экрана вкладки, которые будут содержать заголовки и индикатор экрана, на котором находится пользователь в данный момент, а также рассмотрим некоторые их свойства и способы оформления.

В этом уроке будем использовать проект из прошлого урока, можно скачать его на странице урока 18 по ссылке вверху.

Добавление TabLayout в макет разметки экрана

Чтобы добавить вкладки на экран, нужно открыть макет разметки и добавить компонент com.google.android.material.tabs.TabLayout в верхней части экрана:

Для корректного размещения нужно изменить компонент ViewPager2 – высоту укажем 0dp. Таким образом, высоту компонента будет регулировать корневой ConstraintLayout по заданным ограничениям. А вместо ограничения app:layout_constraintTop_toTopOf=»parent» поставим app:layout_constraintTop_toBottomOf=»@+id/tab_layout» – чтобы верх компонента ViewPager2 был ограничен не верхней границей родительского компонента, а нижней границей компонента TabLayout.

Рассмотрим подробнее компонент com.google.android.material.tabs.TabLayout. Свойство app:tabMode=»scrollable» обеспечивает размещение в видимой части экрана только нескольких вкладок, остальные будут доступны в процессе прокрутки. Если мы не укажем это свойство, то в видимой части экрана будут одновременно отображаться все вкладки, и при большом их количестве визуальное восприятие будет затруднено.

Свойство app:tabIndicatorColor=»@color/teal_200″ указывает цвет, а app:tabIndicatorHeight=»4dp» – толщину индикатора вкладки.

Далее идут свойства ширины – указываем по родителю – и высоты – указываем по содержимому.

Последние три свойства – ограничения верхней части и боковых сторон компонента по родителю.

Реализация вкладок в MainActivity

Открываем класс MainActivity и пишем реализацию вкладок:

Источник

Android.Kotlin – Create a TabLayout

We’ll once again take a break from the cross-platform Xamarin content and look at an example of using the latest Kotlin language from Jetbrains with our native Android applications. In this post, we’ll look at an implementation of a TabLayout with a ViewPager using Kotlin!

I also apologize for the lack of useful highlighting of the Kotlin code in this post. Since it is a new language, WordPress doesn’t support it as well for code snippets…

The source code for this example can be found on my GitHub here:
https://github.com/SuavePirate/KotlinPuppies.

The Layout

This example will use a RecyclerView for the content of each Fragment . So we need to define layouts for our Puppy , Fragment , and our entire Activity that houses the TabLayout and Fragments .

Our puppy item will contain a CardView that has an image and text to contain a picture of the puppy and the pup’s name!

puppy_item.xml

Now let’s look at our Fragment layout that will contain a RecylerView that houses each collection of puppies.

puppy_fragment.xml

Now let’s wrap it all together with our main layout:

activity_main.xml

Now that we have our layouts, let’s create our Fragment , Adapters , and then wrap it all together in our MainActivity .

Building the Recycler Adapter

Let’s first define our RecyclerView adapter and ViewHolder to contain our collections of puppies.

PuppyHolder.kt

This code defines a class that inherits the RecyclerView.ViewHolder with a default constructor that requires a View parameter that is also passed into the base class constructor. It then defines the two subviews we need to populate – the TextView and ImageView of a single puppy. Lastly, we create our updateWithPuppy function that will be called by our Adapter to instantiate the content with the given puppy’s information.

Now that we have our ViewHolder , we can create our Adapter :

PuppyAdapter.kt

This adapter uses another cool feature of Kotlin – Defining a private field in the constructor while also auto-setting it. The class declaration and default constructor of PuppyAdapter(private val puppies: ArrayList) is the equivalent to something like this in Java:

That’s pretty sweet! The rest of the wire up for the Adapter is pretty standard. It sets the ViewHolder using the PuppyHolder we created above and updates it with the puppy by finding it with the given index.

The Puppy Fragment

Now we can create our Fragment that will contain and wire up the RecyclerView for each puppy collection.

PuppyListFragment.kt

In the onCreateView override, we get our puppies by type from our factory class and then instantiate our PuppyAdapter and LinearLayoutManager that get applied to the RecyclerView that we grab from our layout created earlier. Now we can pass in the PuppyListType that the fragment is responsible for displaying which will then set up our RecyclerView to render those particular puppies.

We also set up what is the equivalent of a static function that can instantiate a new instance of a PuppyListFragment by using a nested companion object .

Adding Page Adapter

Now that we have our Fragment and it’s child RecyclerView for puppies all set up, we can now create an adapter that is responsible for handling the different pages within the TabLayout that we are ultimately setting up.

PageAdapter.kt

This is a pretty standard implementation of a PageAdapter . We override the getItem function and return the appropriate instantiated PuppyListFragment by passing in the PuppyListType we want to use by the grouping.

Set up the Activity

The last bit now is the set up our Activity that will house our TabLayout and ViewPager that will contain multiple instances of the PuppyListFragment to show different collections of puppies by category.

MainActivity.kt

Our MainActivity holds a private field for the ViewPager reference, and in the override of onCreate , we set up our view components by finding them in our associated layout file, then wire up the PageAdapter with our TabLayout . Then we set our icons for each given tab after calling the setupWithViewPager on our TabLayout .

View the Results

We can run our application and view our expected results of our tabs and different list of puppy cards!

If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.

Источник

Android — Kotlin

A blog to explore things in Android App Development using Kotlin.

TabLayout in Android with Kotlin

• Get link
• Facebook
• Twitter
• Pinterest
• Email
• Other Apps

1. Create New Project:

2. Adding design library:

build.gradle

3. Drawing layouts:

slide_page.xml

• Design layout to show up in Fragments

fragment_page.xml

android:id=»@+id/info_text»
android:layout_width=»wrap_content»
android:layout_height=»wrap_content»
app:layout_constraintBottom_toBottomOf=»parent»
app:layout_constraintLeft_toLeftOf=»parent»
app:layout_constraintRight_toRightOf=»parent»
app:layout_constraintTop_toTopOf=»parent»/>

4. Resources:

strings.xml

colors.xml

5. Code

Let’s proceed with code now.

• Create adapter for ViewPager. In Kotlin, traditional ‘switch’ functional block in java, will work as ‘when’ block.

SlidingPagerAdapter.kt

class SlidingPagerAdapter(fragmentManager: FragmentManager?) : FragmentPagerAdapter(fragmentManager) <

private val TITLES = arrayOf(«TAB 1», «TAB 2»)
override fun getItem(position: Int): Fragment <
when (position) <
0 -> <
println(«position 0»);
return FirstFragment()
>

1 -> <
println(«position 1»);
return SecondFragment()
>
else ->
return FirstFragment()

>
>

override fun getPageTitle(position: Int): CharSequence <
return TITLES[position]
>

override fun getCount(): Int <
return TITLES.size
>

>

FirstFragment.kt

class FirstFragment : Fragment() <

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? <
return inflater. inflate(R.layout.fragment_page, container, false);
>

override fun onActivityCreated(savedInstanceState: Bundle?) <
super.onActivityCreated(savedInstanceState)

infoText.text = getString(R.string.first_fragment)

>
>

SecondFragment.kt

class SecondFragment : Fragment() <

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? <
return inflater. inflate(R.layout.fragment_page, container, false);
>

override fun onActivityCreated(savedInstanceState: Bundle?) <
super.onActivityCreated(savedInstanceState)

infoText.text = getString(R.string.second_fragment)

>
>

• Create an activity for the TabLayout to be displayed.

SlidingTabActivity.kt

class SlidingTabActivity : AppCompatActivity() <

Источник

Android Tablayout Kotlin With Fragments,ViewPager,Material Design

Whatsapp is using Android Tablayout Kotlin for basic navigation.

In today’s Android Tablayout Kotlin example, we will develop that kind of structure programmatically.

Android Tablayout Kotlin uses fragments, material design and view pager as basic components.

You will be able to make a project where user can swipe left or right to switch between tabs.

This method is used by whatsapp also.

First, watch the output, then we will prepare it.

Download Source Code for android tablayout kotlin example

Step 1: Create a new project in Android Studio.

Consider empty activity as a main activity when you create a fresh new project in android studio.

Step 2: Update build.gradle(Module:app) file

Add below in build.gradle(Module:app) file

Above two lines will give access to necessary classes to use material design in our app.

Whole source code for build.gradle(Module:app)

Step 3: Updating colors.xml

Go to the res->values->colors.xml directory

update colors.xml as below

Step 4: Preparing three fragments

Now we need to make fragment per each tabs.

Means that if you want three tabs than make three fragments, if you want five tabs than make five fragments.

We will add three tabs in this tutorial.

You can update the look and feel of every tab by adding required code to their fragment’s xml or .kt files.

Create three fragments and give them name as “OneFragment,” “TwoFragment,” and “ThreeFragment.”

Add below code in fragment_one.xml

Add following in OneFragment.kt

Copy below source code in fragment_two.xml

Copy following code in TwoFragment.kt

Add below code in fragment_three.xml

Paste below code in ThreeFragment.kt

Step 5: Updating MainActivity

update activity_main.xml as below

Update MainActivity.kt as per following

Java Version

That is all for Android tablayout Kotlin example.

If you like this tutorial then please share it in your social media.

Comment if you have queries or a review. Thank you for reading.

3 thoughts on “Android Tablayout Kotlin With Fragments,ViewPager,Material Design”

Hi, I can not view your java code for this fragment example, could you please share.

I have updated the link. You should try again now.

Источник