Separate edit UI into tabs

This commit is contained in:
Sylvia van Os
2021-01-16 15:02:14 +01:00
parent 18b95e96eb
commit 6382c54d1a
4 changed files with 207 additions and 139 deletions

View File

@@ -1,5 +1,11 @@
# Changelog
## Unreleased
Changes:
- Separate edit UI in tabs to make it feel more spacious
## v1.6.2 (2021-01-04)
Changes:

View File

@@ -32,6 +32,7 @@ import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.google.android.material.tabs.TabLayout;
import com.google.zxing.BarcodeFormat;
import com.jaredrummler.android.colorpicker.ColorPickerDialog;
import com.jaredrummler.android.colorpicker.ColorPickerDialogListener;
@@ -44,6 +45,8 @@ public class LoyaltyCardEditActivity extends AppCompatActivity
{
private static final String TAG = "Catima";
TabLayout tabs;
ImageView thumbnail;
EditText storeFieldEdit;
EditText noteFieldEdit;
@@ -107,6 +110,7 @@ public class LoyaltyCardEditActivity extends AppCompatActivity
db = new DBHelper(this);
importUriHelper = new ImportURIHelper(this);
tabs = findViewById(R.id.tabs);
thumbnail = findViewById(R.id.thumbnail);
storeFieldEdit = findViewById(R.id.storeNameEdit);
noteFieldEdit = findViewById(R.id.noteEdit);
@@ -179,6 +183,25 @@ public class LoyaltyCardEditActivity extends AppCompatActivity
@Override
public void afterTextChanged(Editable s) { }
});
tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
showPart(tab.getText().toString());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
showPart(tab.getText().toString());
}
});
tabs.selectTab(tabs.getTabAt(0));
}
@Override
@@ -622,4 +645,19 @@ public class LoyaltyCardEditActivity extends AppCompatActivity
thumbnail.setMinimumWidth(thumbnail.getHeight());
}
private void showPart(String part) {
View cardPart = findViewById(R.id.cardPart);
View barcodePart = findViewById(R.id.barcodePart);
if (getString(R.string.card).equals(part)) {
cardPart.setVisibility(View.VISIBLE);
barcodePart.setVisibility(View.GONE);
} else if (getString(R.string.barcode).equals(part)) {
cardPart.setVisibility(View.GONE);
barcodePart.setVisibility(View.VISIBLE);
} else {
throw new UnsupportedOperationException();
}
}
}

View File

@@ -26,6 +26,20 @@
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/card"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/barcode"/>
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<ScrollView android:layout_width="fill_parent"
@@ -37,169 +51,176 @@
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Store -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="@dimen/inputPadding"
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="@dimen/cardThumbnailSize"
android:layout_height="@dimen/cardThumbnailSize"
android:layout_marginEnd="@dimen/activity_margin"
android:layout_gravity="center_vertical"
app:cardCornerRadius="4dp"
<TableLayout
android:id="@+id/cardPart"
android:visibility="gone">
<!-- Store -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="@dimen/inputPadding"
app:cardElevation="0dp">
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal">
<ImageView
android:id="@+id/thumbnail"
<androidx.cardview.widget.CardView
android:layout_width="@dimen/cardThumbnailSize"
android:layout_height="@dimen/cardThumbnailSize"
android:contentDescription="@string/thumbnailDescription"
android:src="@mipmap/ic_launcher"/>
android:layout_marginEnd="@dimen/activity_margin"
android:layout_gravity="center_vertical"
app:cardCornerRadius="4dp"
android:paddingHorizontal="@dimen/inputPadding"
app:cardElevation="0dp">
</androidx.cardview.widget.CardView>
<ImageView
android:id="@+id/thumbnail"
android:layout_width="@dimen/cardThumbnailSize"
android:layout_height="@dimen/cardThumbnailSize"
android:contentDescription="@string/thumbnailDescription"
android:src="@mipmap/ic_launcher"/>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/storeNameField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/storeName">
</androidx.cardview.widget.CardView>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/storeNameEdit"
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/storeNameField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
android:hint="@string/storeName">
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/storeNameEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<!-- Note -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="@dimen/inputPadding"
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal">
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/noteField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
<!-- Note -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/note">
android:paddingHorizontal="@dimen/inputPadding"
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/noteEdit"
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/noteField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
android:hint="@string/note">
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/noteEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<!-- Group -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="@dimen/inputPadding"
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal">
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<com.google.android.material.chip.ChipGroup
android:id="@+id/groupChips"
android:layout_height="match_parent"
<!-- Group -->
<LinearLayout
android:layout_width="match_parent"
android:padding="@dimen/inputPadding"
android:textSize="@dimen/inputSize" />
</LinearLayout>
android:layout_height="wrap_content"
android:paddingHorizontal="@dimen/inputPadding"
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal">
<!-- Buttons -->
<LinearLayout android:orientation="horizontal"
android:padding="10.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/barcodeCaptureLayout">
<Button android:id="@+id/enterButton"
<com.google.android.material.chip.ChipGroup
android:id="@+id/groupChips"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:padding="@dimen/inputPadding"
android:textSize="@dimen/inputSize" />
</LinearLayout>
</TableLayout>
<TableLayout
android:id="@+id/barcodePart"
android:visibility="gone">
<!-- Card ID and Barcode type -->
<LinearLayout
android:id="@+id/cardAndBarcodeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="@dimen/inputPadding"
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal"
android:baselineAligned="false">
<!-- Card ID -->
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/cardIdField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:hint="@string/cardId">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/cardIdView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
<!-- Barcode type -->
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/barcodeTypeView"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:hint="@string/barcodeType"
android:labelFor="@+id/barcodeTypeField">
<AutoCompleteTextView
android:id="@+id/barcodeTypeField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<!-- Barcode -->
<View
android:layout_height="@dimen/inputBorderThickness"
android:layout_width="match_parent" />
<LinearLayout android:orientation="horizontal"
android:padding="10.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="@+id/barcodeLayout">
<ImageView
android:layout_width="0dp"
android:layout_height="@dimen/barcode_disp_height"
android:layout_gravity="center_horizontal"
android:padding="10.0dp"
android:background="#ffffff"
android:id="@+id/barcode"
android:contentDescription="@string/barcodeImageDescription"
android:layout_weight="1.0"/>
</LinearLayout>
<!-- Buttons -->
<LinearLayout android:orientation="horizontal"
android:padding="10.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/barcodeCaptureLayout">
<Button android:id="@+id/enterButton"
android:layout_margin="@dimen/inputMargin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/editCard"
android:textColor="#FFFFFF"
android:layout_weight="1.0"/>
</LinearLayout>
<!-- Card ID and Barcode type -->
<LinearLayout
android:id="@+id/cardAndBarcodeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="@dimen/inputPadding"
android:paddingTop="@dimen/inputPadding"
android:orientation="horizontal"
android:baselineAligned="false">
<!-- Card ID -->
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/cardIdField"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:hint="@string/cardId">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/cardIdView"
android:layout_width="match_parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
<!-- Barcode type -->
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/barcodeTypeView"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:hint="@string/barcodeType"
android:labelFor="@+id/barcodeTypeField">
<AutoCompleteTextView
android:id="@+id/barcodeTypeField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<!-- Barcode -->
<View
android:layout_height="@dimen/inputBorderThickness"
android:layout_width="match_parent" />
<LinearLayout android:orientation="horizontal"
android:padding="10.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="@+id/barcodeLayout">
<ImageView
android:layout_width="0dp"
android:layout_height="@dimen/barcode_disp_height"
android:layout_gravity="center_horizontal"
android:padding="10.0dp"
android:background="#ffffff"
android:id="@+id/barcode"
android:contentDescription="@string/barcodeImageDescription"
android:layout_weight="1.0"/>
</LinearLayout>
android:text="@string/editBarcode"
android:textColor="#FFFFFF"
android:layout_weight="1.0"/>
</LinearLayout>
</TableLayout>
</TableLayout>
</ScrollView>

View File

@@ -132,4 +132,7 @@
<string name="leaveWithoutSaveConfirmation">Are you sure you want to leave this screen? Changed made will not be saved.</string>
<string name="addManually">Manually enter card ID</string>
<string name="groupsList">Groups: <xliff:g>%s</xliff:g></string>
<string name="card">Card</string>
<string name="barcode">Barcode</string>
<string name="editBarcode">Edit barcode</string>
</resources>