Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 67680aa3 authored by Nihar Thakkar's avatar Nihar Thakkar
Browse files

Improve category and home UI, fix carousel bug

parent dae8a3de

app/src/main/java/io/eelo/appinstaller/categories/CategoriesFragment.kt

+40 −10
Original line number Diff line number Diff line
@@ -4,23 +4,32 @@ import android.arch.lifecycle.Observer 
import android.arch.lifecycle.ViewModelProviders

import android.os.Bundle

import android.support.v4.app.Fragment

import android.text.TextUtils

import android.util.DisplayMetrics

import android.util.TypedValue

import android.view.Gravity

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.GridLayout

import android.widget.LinearLayout

import android.widget.ProgressBar

import android.widget.TextView

import io.eelo.appinstaller.R

import io.eelo.appinstaller.categories.viewmodel.CategoriesViewModel

import kotlin.math.roundToInt



class CategoriesFragment : Fragment() {



    private lateinit var categoriesViewModel: CategoriesViewModel

    private lateinit var applicationsCategoriesList: LinearLayout

    private lateinit var gamesCategoriesList: LinearLayout

    private lateinit var applicationsCategoriesList: GridLayout

    private lateinit var gamesCategoriesList: GridLayout

    private lateinit var categoriesContainer: LinearLayout

    private lateinit var progressBar: ProgressBar

    private lateinit var itemParams: LinearLayout.LayoutParams

    private var itemWidth = 0

    private var itemPadding = 0

    private var itemMargin = 0



    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        val view = inflater.inflate(R.layout.fragment_categories, container, false)
@@ -36,6 +45,21 @@ class CategoriesFragment : Fragment() { 
        progressBar = view.findViewById(R.id.progress_bar)

        progressBar.visibility = View.VISIBLE



        // Do some math and figure out item width, padding and margin

        val metrics = DisplayMetrics()

        activity!!.windowManager.defaultDisplay.getMetrics(metrics)

        val logicalDensity = metrics.density



        itemWidth = Math.ceil(160 * logicalDensity.toDouble()).roundToInt()

        itemPadding = Math.ceil(8 * logicalDensity.toDouble()).roundToInt()

        itemMargin = Math.ceil(4 * logicalDensity.toDouble()).roundToInt()



        itemParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)

        itemParams.topMargin = itemPadding

        itemParams.bottomMargin = itemPadding

        itemParams.marginStart = itemPadding

        itemParams.marginEnd = itemPadding



        // Bind to the list of applications categories

        categoriesViewModel.getApplicationsCategories().observe(this, Observer {

            showApplicationsCategories()
@@ -53,13 +77,16 @@ class CategoriesFragment : Fragment() { 
        applicationsCategoriesList.removeAllViews()

        categoriesViewModel.getApplicationsCategories().value!!.forEach {

            val textView = TextView(context)

            textView.layoutParams = itemParams

            textView.width = itemWidth

            textView.setPadding(itemPadding, itemPadding, itemPadding, itemPadding)

            textView.text = it.title

            val scale = resources.displayMetrics.density

            val medium = (8 * scale + 0.5f).toInt()

            val large = (16 * scale + 0.5f).toInt()

            textView.setPadding(medium, large, medium, large)

            textView.textSize = 16.0f

            textView.gravity = Gravity.CENTER

            textView.maxLines = 1

            textView.ellipsize = TextUtils.TruncateAt.END

            textView.isClickable = true

            textView.foreground = activity!!.getDrawable(R.drawable.app_category_border)

            val outValue = TypedValue()

            context!!.theme.resolveAttribute(android.R.attr.selectableItemBackground, outValue, true)

            textView.setBackgroundResource(outValue.resourceId)
@@ -76,13 +103,16 @@ class CategoriesFragment : Fragment() { 
        gamesCategoriesList.removeAllViews()

        categoriesViewModel.getGamesCategories().value!!.forEach {

            val textView = TextView(context)

            textView.layoutParams = itemParams

            textView.width = itemWidth

            textView.setPadding(itemPadding, itemPadding, itemPadding, itemPadding)

            textView.text = it.title

            val scale = resources.displayMetrics.density

            val medium = (8 * scale + 0.5f).toInt()

            val large = (16 * scale + 0.5f).toInt()

            textView.setPadding(medium, large, medium, large)

            textView.textSize = 16.0f

            textView.gravity = Gravity.CENTER

            textView.maxLines = 1

            textView.ellipsize = TextUtils.TruncateAt.END

            textView.isClickable = true

            textView.foreground = activity!!.getDrawable(R.drawable.app_category_border)

            val outValue = TypedValue()

            context!!.theme.resolveAttribute(android.R.attr.selectableItemBackground, outValue, true)

            textView.setBackgroundResource(outValue.resourceId)

app/src/main/java/io/eelo/appinstaller/home/HomeFragment.kt

+3 −1
Original line number Diff line number Diff line
@@ -42,7 +42,9 @@ class HomeFragment : Fragment() { 
        categoryList.layoutManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)

        progressBar.visibility = View.VISIBLE



        if (homeViewModel.getBannerApplications().value!!.isEmpty() && homeViewModel.getCategories().value!!.isEmpty()) {

            homeViewModel.loadCategories(context!!)

        }



        // Bind image carousel adapter to banner images in view model

        homeViewModel.getBannerApplications().observe(this, Observer {

app/src/main/res/layout/fragment_categories.xml

+12 −8
Original line number Diff line number Diff line
@@ -17,31 +17,34 @@ 
            android:id="@+id/categories_container"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical"

            android:padding="@dimen/layout_padding_large">

            android:orientation="vertical">



            <TextView

                android:id="@+id/applications_categories_title"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginStart="@dimen/layout_margin_large"

                android:layout_marginTop="@dimen/layout_margin_large"

                android:maxLines="1"

                android:text="@string/applications_categories_title"

                android:textColor="@android:color/black"

                android:textSize="18sp"

                android:textStyle="bold" />



            <LinearLayout

            <GridLayout

                android:id="@+id/applications_categories_list"

                android:layout_width="match_parent"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center_horizontal"

                android:layout_marginTop="@dimen/layout_margin_medium"

                android:orientation="vertical"

                android:columnCount="2"

                app:layout_constraintTop_toBottomOf="@id/applications_categories_title" />



            <TextView

                android:id="@+id/games_categories_title"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginStart="@dimen/layout_margin_large"

                android:layout_marginTop="@dimen/layout_margin_large"

                android:maxLines="1"

                android:text="@string/games_categories_title"
@@ -50,12 +53,13 @@ 
                android:textStyle="bold"

                app:layout_constraintTop_toBottomOf="@id/applications_categories_list" />



            <LinearLayout

            <GridLayout

                android:id="@+id/games_categories_list"

                android:layout_width="match_parent"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center_horizontal"

                android:layout_marginTop="@dimen/layout_margin_medium"

                android:orientation="vertical"

                android:columnCount="2"

                app:layout_constraintTop_toBottomOf="@id/games_categories_title" />



        </LinearLayout>

app/src/main/res/layout/fragment_home.xml

+3 −8
Original line number Diff line number Diff line
@@ -14,22 +14,17 @@ 
            android:layout_height="wrap_content"

            android:orientation="vertical">



            <ImageView

                android:id="@+id/app_store_banner"

                android:layout_width="match_parent"

                android:layout_height="?attr/actionBarSize"

                android:contentDescription="@string/app_store_banner_content_description"

                android:src="@drawable/app_store_banner" />



            <android.support.v4.view.ViewPager

                android:id="@+id/image_carousel"

                android:layout_width="match_parent"

                android:layout_height="168dp" />

                android:layout_height="160dp"

                android:layout_marginTop="@dimen/layout_margin_large" />



            <android.support.v7.widget.RecyclerView

                android:id="@+id/category_list"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="@dimen/layout_margin_large"

                android:nestedScrollingEnabled="false"

                android:scrollbars="none" />

app/src/main/res/layout/home_category_list_item.xml

+9 −0
Original line number Diff line number Diff line
@@ -5,6 +5,14 @@ 
    android:layout_height="wrap_content"

    android:orientation="vertical">



    <View

        android:id="@+id/divider"

        android:layout_width="match_parent"

        android:layout_height="@dimen/default_divider_height"

        android:layout_marginStart="@dimen/layout_margin_medium"

        android:layout_marginEnd="@dimen/layout_margin_medium"

        android:background="@color/colorDivider" />



    <TextView

        android:id="@+id/category_title"

        android:layout_width="wrap_content"
@@ -23,6 +31,7 @@ 
        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="@dimen/layout_margin_medium"

        android:layout_marginBottom="@dimen/layout_margin_large"

        android:scrollbars="none" />



</LinearLayout>
 
 No newline at end of file