Skip to content

Style gallery button for uploading custom screenshots #4598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 26, 2023
Merged

Style gallery button for uploading custom screenshots #4598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13ef303
Update styling of gallery button
tagboola Jan 26, 2023
419d690
Update button styling and spacing
tagboola Jan 26, 2023
d820908
Update corner radius of card background
tagboola Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions firebase-appdistribution/src/main/res/drawable/btn_disabled_stroked.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#0D000000" />
<corners android:radius="8dp"/>
<stroke android:width="1dp" android:color="#0F000000" />
</shape>
6 changes: 6 additions & 0 deletions firebase-appdistribution/src/main/res/drawable/btn_stroked.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#00000000"/>
<corners android:radius="8dp"/>
<stroke android:width="1dp" android:color="#1A000000" />
</shape>
9 changes: 9 additions & 0 deletions firebase-appdistribution/src/main/res/drawable/btn_stroked_background.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>

<!-- Drawable state list for background of basic button -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disabled button background -->
<item android:state_enabled="false" android:drawable="@drawable/btn_disabled_stroked" />
<!-- default button background -->
<item android:drawable="@drawable/btn_stroked" />
</selector>
2 changes: 1 addition & 1 deletion firebase-appdistribution/src/main/res/drawable/card_background.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<corners android:radius="8dp"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
<stroke android:width="1dp" android:color="#CCCCCC"/>
</shape>
37 changes: 23 additions & 14 deletions firebase-appdistribution/src/main/res/layout/activity_feedback.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,25 +100,34 @@
android:background="@drawable/card_background"
android:orientation="vertical">

<CheckBox
android:id="@+id/screenshotCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/screenshot" />
<RelativeLayout
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since there are only two child elements and their relative positioning is pretty straightforward, wouldn't it make sense to use a simpler option for this container, e.g. LinearLayout (horizontal)?

Copy link
Contributor Author

@tagboola tagboola Jan 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually tried a LinearLayout before, but it wasn't clear to me how I could get the checkbox to align to the left and the button to align to the right. With RelativeLayout you get the nice android:layout_* attributes which makes it easier.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RelativeLayout looks good to me. Alternatively if you wanted to make it work with LinearLayout you might be able to add an empty View with a weight of 1 in between the two, as a spacer: https://developer.android.com/develop/ui/views/layout/linear#Weight

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LinearLayout with a spacer seems jankier, so I'd lean towards keeping it as a RelativeLayout.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or maybe you can use gravity instead of an empty View:

A LinearLayout respects [...] the gravity (right, center, or left alignment) of each child.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried this, and it wasn't working. I'm probably not using gravity correctly here, but regardless I think the RelativeLayout is sufficient here and I like the explicitness of the android:layout_* attributes.
Screenshot 2023-01-26 at 2 04 57 PM

android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="@+id/screenshotCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:text="@string/screenshot" />
<Button
style="@style/FeedbackTheme.Button.Stroked"
android:id="@+id/chooseScreenshotButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="Gallery"/>
</RelativeLayout>

<ImageView
android:id="@+id/screenshotImageView"
android:layout_width="wrap_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:layout_marginTop="12dp"
android:adjustViewBounds="true"
android:contentDescription="@string/screenshot_image_description" />

<Button
android:id="@+id/chooseScreenshotButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gallery" />
android:contentDescription="@string/screenshot_image_description"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
Expand Down
4 changes: 4 additions & 0 deletions firebase-appdistribution/src/main/res/values/themes.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,8 @@
<style name="FeedbackTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#000000</item>
</style>
<style name="FeedbackTheme.Button.Stroked" parent="Widget.AppCompat.Button.Colored">
<item name="android:background">@drawable/btn_stroked_background</item>
<item name="android:textColor">#1a73e8</item>
</style>
</resources>